将表单中的参数发送到 JavaScript 中的函数

Question

I'm trying to send a value from the form to the new window that opens. In my program the window opens but the value val2 is not sent and instead null exists.

My code:

 function eq(value) { ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0'); }

 <form id='testform_eq' name='testform_new'> <input type='text' id='val2' name='val2'> <input type='button' value='Submit' onclick='eq(document.getElementById(val2))'> </form>

Does anyone have an idea why this is so? Thanks

Answer 1

 function eq() { const value = document.getElementById('val2').value; ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0'); } 

 <form id='testform_eq' name='testform_new'> <input type='text' id='val2' name='val2'> <input type='button' value="Submit" onclick='eq()'> </form> 

You don't need to pass anything to the click function. Since you already have an id attribute to your input element you can get the value of the input when you click it. Probably you would wanna use that function in other places and that would mean that you would have to pass every time that element.

If you really want to pass something you can pass the id itself.

eq('val2')

The eq function would look like this than:

function eq(id){
  const value = document.getElementById(id).value;
  ....
}

Than you can use that function in other places on other inputs.

Answer 2

Because you're supposed to do it like this: document.getElementById("val2").value

document.getElementById(val2) is incorrect if you want to get the id=val2 value.

To fix it you can replace eq(document.getElementById(val2) into eq(document.getElementById("val2").value)

 function eq(value) { ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0'); console.log(value); } 

 <form id='testform_eq' name='testform_new'> <input type='text' id='val2' name='val2'> <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'> </form> 

or simply put the id in function call: eq(val2)

 function eq(id) { ViewImg = window.open('http://localhost/coord.php?' + id.value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0'); console.log(id.value); } 

 <form id='testform_eq' name='testform_new'> <input type='text' id='val2' name='val2'> <input type='button' value='Submit' onclick='eq(val2)'> </form> 

Answer 3

If you want to pass a value of an input, you should take into account two things:

1. getElementById accepts a string, but you're trying to pass a variable, which doesn't exist
2. If you want to pass a value and not an element, you should add .value after the element

And finally you should have the input element like this:

<input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>

Here is a live example:

 <script> function eq(value) { console.log(value); ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0'); } </script> <form id='testform_eq' name='testform_new'> <input type='text' id='val2' name='val2'> <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'> </form> 

Another option is to get the value inside the function, as described here . This way is good if you're not going to reuse eq with different values. You have to choose one of them depending on your real case.

Answer 4

You need to use value property of the input.

Update code

 <input type='button' value='Submit' 
 onclick='eq(document.getElementById(val2).value)'>