Html Question posted in
Some basic documentation can be found here.

Html – 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 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>
Tags:

2

Answers


  1. 0

    element’s name are hierarchical dependent in each form: (see Document: forms property )

    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>
    Login or Signup to reply.
  2. 0

    Here is an alternative using querySelector/querySelectorAll

    let showForm = 'form3';
// Hide only form3's button
document.querySelector(`[name=${showForm}] #addtocart`).hidden = true;

// Hide all except 3 - I find all forms with name starting with form

document.getElementById('show').addEventListener('click',() => {
  document.querySelectorAll('[name^=form]').forEach(form => form.addtocart.hidden = form.name !== showForm);
});
    <form name="form1" id="form1">
    form content
    <input type="button" name="addtocart" id="addtocart" value="1">
</form>
<form name="form2" id="form2">
    form content
    <input type="button" name="addtocart" id="addtocart" value="2">
</form>
<form name="form3" id="form3">
    form content
    <input type="button" name="addtocart" id="addtocart" value="3"> // this is the button to hide
</form>
<form name="form4" id="form4">
    form content
    <input type="button" name="addtocart" id="addtocart" value="4">
</form>

<button type="button" id="show">Show only form 3</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search