Call JS Function with Form Submit Value

Question

I have a autocomplete form inputs, I want to call a javascript function with the autocomplete selected value.

I have the form and the JS function, on submit if I give a specific value it's calling the js function. But I didn't get how to pass the value of the form submit to the js function. Here is the code I tried. if you have any idea how to pass the values, please let me know. your help is much appreciated. thanks.

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:1120px;">
    <input id="myInput" type="text" name="myCountry" placeholder="country">
  </div>
  <input onclick="filterSelection('all')" type="submit"> <!-- filterSelection() is the JS function, and I am passing value as 'all'. its working. But I want to pass the submit value from the form.
</form>

Answer 1

You can pass the current value of the element using document.getElementById('myInput').value :

Demo:

 function filterSelection(v){ alert(v); }

 <form autocomplete="off" action="/action_page.php"> <div class="autocomplete" style="width:1120px;"> <input id="myInput" type="text" name="myCountry" placeholder="country"> </div> <input onclick="filterSelection(document.getElementById('myInput').value)" type="submit"> <,-- filterSelection() is the JS function. and I am passing value as 'all'. its working. But I want to pass the submit value from the form.--> </form>