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

Question

我正在尝试将表单中的值发送到打开的新窗口。在我的程序中，窗口打开但是没有发送值val2，而是存在null。

我的代码：

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>

有没有人知道为什么会这样？谢谢

Answer 1

如果要传递输入值，则应考虑两件事：

1. getElementById接受一个字符串，但你试图传递一个不存在的变量
2. 如果要传递值而不是元素，则应在元素后添加.value

最后你应该有这样的input元素：

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

这是一个实例：

<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>

另一个选择是获取函数内部的值，如here所述。如果你不打算重用不同值的eq，这种方式很好。你必须根据你的实际情况选择其中一个。

Answer 2

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>

您无需向click功能传递任何内容。由于您的input元素已经有了id属性，因此单击它时可以获得输入值。可能你会想在其他地方使用该功能，这意味着你必须每次都传递该元素。

如果你真的想传递一些东西，你可以传递id本身。

eq('val2')

eq函数看起来像这样：

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

您可以在其他输入的其他地方使用该功能。

Answer 3

因为你应该这样做：document.getElementById("val2").value

如果你想获得document.getElementById(val2)值，id=val2是不正确的。

要修复它，你可以将eq(document.getElementById(val2)替换为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>

或者只是将id放在函数调用中：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 4

您需要使用输入的value属性。

更新代码

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