'Selecting a single input value from an HTML file using only javascript

I am trying to do a form validation WITHOUT jquery. I have found this code, but I am not sure how to convert it from Jquery to plain Javascript. I found this code here

$('.clickme').click(function() {

  alert($(this).prev().val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="bbb" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="ccc" />
<input type="button" class="clickme" value="Get Value" />


<input type="hidden" name="myvalue" class="form-control input_text" value="ddd" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="eee" />
<input type="button" class="clickme" value="Get Value" />

Any help with this would be amazing. I have multiple forms in one HTML file, all with the same input variables, and I need the functions to only run for when that specific input button is clicked.

javascripthtmljquery


Solution 1:[1]

The below JS code should do the job :

document.querySelectorAll('.clickme').forEach(ele => {
  ele.addEventListener('click', () => alert(ele.previousElementSibling.value))
});

Need to loop through all elements with class "click me" and add a click event to them 

document.querySelectorAll('.clickme').forEach(ele => {
  ele.addEventListener('click', () => alert(ele.previousElementSibling.value))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="bbb" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="ccc" />
<input type="button" class="clickme" value="Get Value" />


<input type="hidden" name="myvalue" class="form-control input_text" value="ddd" />
<input type="button" class="clickme" value="Get Value" />

<input type="hidden" name="myvalue" class="form-control input_text" value="eee" />
<input type="button" class="clickme" value="Get Value" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ankit Saxena

Related Questions