JavaScript函数仅适用于具有类名称的第一个元素，而不适用于具有该类的所有元素

Question

I have multiple forms on one page with same structure.

They all have a file input field that has 'onchange' event, which removes the 'disabled' attribute from my submit button when a file is chosen.

The problem is, my function only works for the first element with that class name. How can I make it work for every item with that class?

index.php:

<form class="form">
    <input type="file" name="image" onchange="unlock();">
    <input type="text" name="title" placeholder="Image title"/>
    <input type="submit" value="Add image" class="submit" disabled/>
</form>

<form class="form">
    <input type="file" name="image" onchange="unlock();">
    <input type="text" name="title" placeholder="Image title"/>
    <input type="submit" value="Add image" class="submit" disabled/>
</form>

scripts.js:

function unlock() {
    document.querySelector('.submit').removeAttribute("disabled");
}

Any help is appreciated!

Answer 1

1. Use eventListener
2. address relatively using selectors
3. make it a habit to never call anything submit in a form

 document.querySelectorAll("[name=image]").forEach( ele => ele.addEventListener("change", (e) => e.target.closest(".form").querySelector(".sub").disabled = false ) ); 

 <form class="form"> <input type="file" name="image"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" value="Add image" class="sub" disabled/> </form> <form class="form"> <input type="file" name="image"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" value="Add image" class="sub" disabled/> </form> 

More compatible version

 [...document.querySelectorAll("[name=image]")].forEach(function(ele) { ele.addEventListener("change", function(e) { e.target.parentNode.querySelector(".sub").disabled = false; }) }); 

 <form class="form"> <input type="file" name="image"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" value="Add image" class="sub" disabled/> </form> <form class="form"> <input type="file" name="image"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" value="Add image" class="sub" disabled/> </form> 

Answer 2

Give ID's to all submit buttons and pass the respective ID's in unlock() function.

This removes the disabled from the submit

 function unlock(form_id) { document.getElementById(form_id).removeAttribute("disabled"); } 

 <form class="form"> <input type="file" name="image" onchange="unlock('form1');"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" id="form1" value="Add image" class="submit" disabled/> </form> <form class="form"> <input type="file" name="image" onchange="unlock('form2');"> <input type="text" name="title" placeholder="Image title" /> <input type="submit" id="form2" value="Add image" class="submit" disabled/> </form>