Make an image alt attribute value as a form field value

Question

I want to add the alt value of the image as a form field value. How to do that with JS or Jquery?

Thank you

<img src="x.jpg" alt="grab me" id="ok" />

<form action="/#wpcf7-f1352-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
  
<span class="image-alt"><input type="text" name="iamge-alt" value="" size="40"  aria-invalid="false"></span>

<input type="submit" value="OK" class="wpcf7-submit">
</form>

Answer 1

.getAttribute() to grab alt property and then .forms[0] the first <form> and .elements[0] first form control (<input>) to the .value property.

const alt = document.querySelector('img').getAttribute('alt');

document.forms[0].elements[0].value = alt;

<img src="x.jpg" alt="grab me" id="ok" />

<form action="/#wpcf7-f1352-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
  
<span class="image-alt"><input type="text" name="iamge-alt" value="" size="40"  aria-invalid="false"></span>

<input type="submit" value="OK" class="wpcf7-submit">
</form>