How to delete HTML attributes using Puppeteer

Other Questions Puppeteer
1

I’m working with a webpage that has a submit button which is disabled by default. The HTML looks like this:

<form>
  <input type="submit" class="submit-btn primary-btn" disabled="disabled" id="form-submit">
    <span class="btn-label">Submit Form</span>
  </input>
</form>

I need to make this button clickable but just changing the disabled attribute value doesn’t work. I have to completely remove the disabled attribute from the element.

Can someone show me how to remove an attribute entirely using Puppeteer? I would prefer using page.$eval() method if possible.

2

yep, i had a similar problem. just try await page.$eval('#form-submit', el => el.removeAttribute('disabled')) and it should make the button clickable. it worked for my case!

3

I’ve had good luck using page.evaluate() to remove attributes directly in the browser context. Try await page.evaluate(() => { document.getElementById('form-submit').removeAttribute('disabled'); }); - this skips potential selector issues and runs like you’re in the browser console. It works great with dynamically generated forms where elements aren’t immediately available through normal selectors. The big plus is it runs synchronously within the page, so you won’t get timing conflicts with other JavaScript messing with the same element.

4

I’ve hit this exact issue before - the removeAttribute approach works great. Just make sure you wait for the element to load first: await page.waitForSelector('#form-submit'); await page.$eval('#form-submit', el => el.removeAttribute('disabled')); This avoids timing issues with async form loading. Heads up though - some sites re-enable the disabled state with JavaScript, so you might need to remove the attribute right before clicking instead of doing it early in your script.