How to hide a button with multiple forms in page?

October 17, 2024

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 because the original code is automatically generate by the e-commerce.

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>

>Solution :

element’s name are hierarchical dependent in each form:

so, ther is no real interest to use id attributes in a form.

const formName = 'form3';

document.forms[formName].addtocart.style.visibility = 'hidden';


// document.forms.form3.addtocart.style.visibility = 'hidden';

form {
 height     : 2em;
 background : lightgreen;
 margin     : 0.5em;
 }

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