How to hide a button with multiple forms in page?

I have an e-commerce page, in the page I have multiple forms each with a different name and id but every button has the same id and name., e.g;

<form method="post" name="form12345" id="form12345" action="..."> 
    <input type="button" class="btn-BuyOff" value="Acquista" id="addtocart" name="addtocart">
</form>

How can I modify the visibility of the button in a specific form using the instruction in Javascript:

document.getElementById('addtocart').style.visibility = 'hidden';

the code above modify only the first button in the page, I need to address a specific button in the page.

Note: I can not modify the id or name of the buttons.

Example:

<form name="form1" id="form1">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>
<form name="form2" id="form2">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>
<form name="form3" id="form3">
    form content
    <input type="button" name="addtocart" id="addtocart"> // this is the button to hide
</form>
<form name="form4" id="form4">
    form content
    <input type="button" name="addtocart" id="addtocart">
</form>

You need to sign in to view this answers

Related Post