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. Use eventListener
2. address relatively using selectors
3. make it a habit to never call anything submit in a form

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

```html
<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

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

```html
<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>
```
Give ID's to all submit buttons and pass the respective ID's in unlock() function.

This removes the disabled from the submit

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

```html
<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>
```