将多个字段的值传递给jQuery

Question

I want to pass multiple field on to jquery to do an check for example, but i only get value of the changed field passed to jquery how can i pass both field to jquery

Enter some text: 
<input type="text" name="txt1" value="Hello" onchange="myFunction(this.value)">
<input type="text" name="txt2" value="Hello" onchange="myFunction(this.value)">


<script>
function myFunction(txt1, txt2) {
  alert("The input value has changed. The new value is: " + txt1 + txt2);
}
</script>

Answer 1

The reason yours doesnt work is because of this this context, it refers to the item that has changed. You can access that from inside that input.

You can however access them in another way, eg getElementsByName :

function myFunction() {
    let text1 = document.getElementsByName('txt1')[0].value;
    let text2 = document.getElementsByName('txt2')[0].value;
    alert("The input value has changed. The new value is: " + txt1 + txt2);
}

<input type="text" name="txt1" value="Hello" onchange="myFunction()">
<input type="text" name="txt2" value="Hello" onchange="myFunction()">

I've now selected it via name. If you only intend to use it via javascript, I recommend dropping the name attribute and use id instead. You can then replace getElementsByName('txt1')[0] with getElementsById('txt1') , which is a little cleaner to read and is (slightly) faster.

---

If you want to step it up a notch: It's not standard practice to add eventhandlers right into the inputs, but to hook them on:

<input id="txt1" value="Hello" /> <!-- type=text is the default type, you can ommit it -->
document.getElementById('text1').onchange = myFunction;

Answer 2

Ok, the reason why your code didn't work, you are trying to pass in a value of an undefined element. Remember that you are firing onchange event, and once you change one of the input fields the other remains the same not firing the onchange event. so to make sure you get the value of another input field only if one of the field is changed.

Use document.querySelectorAll('classOfTheFields');

and loop through using for and get the values as done below.

 <input type="text" name="txt1" class="inner" value="Hello" onchange="myFunction(this.value)"> <input type="text" name="txt2" class="inner" value="Hello" onchange="myFunction(this.value)"> <script> var allValue = []; function myFunction() { text = document.querySelectorAll('.inner'); for (var I = 0;I<text.length;I++){ allValue = text[I].value; console.log(text[I].value); } } </script> 

Hope this helps