Question

您好我正在尝试将onclick事件上的变量传递给javascript函数。我正在尝试以下方式，我无法在javascript函数中获取输入值。（我期待1的警报。）这是正确的方法吗？请帮忙。

<head>
    <script>
        function submit_value(form) {
            alert(form.ip.value);
        }
    </script>
</head>
<table>
    <tr>
        <form>
            <td>
                <input id="ip" type="text" value="1">
            </td>
            <td>
                <a href="javascript:;" onClick="submit_value(this)">Button</a>
            </td>
        </form>
    </tr>
</table>

Answer 1

您的脚本不知道form是什么。您需要指定document.forms[0].ip.value。

如果文档上有多个表单，那么最好先将表单元素存储在变量中。你可以在表格上有一个id ......

<form id="formID">

并在submit_value函数中，您可以

var myForm = document.getElementById('formID'); alert(myForm.ip.value);

修改

您可以使用this.form来点击锚标记。

Answer 2

将功能更改为：

    function submit_value(form) {
        alert(document.getElementById('ip').value);
    }

当您撰写submit_value(this)时，this的值实际上是元素<a>本身，而不是表单。

Answer 3

我假设您可以使用jquery。选择器很简单。

从

更改以下表单html

<form>
        <td>
            <input id="ip" type="text" value="1">
        </td>
        <td>
            <a href="javascript:;" onClick="submit_value(this)">Button</a>
        </td>
 </form>

到

 <form>
        <td>
            <input id="ip" type="text" value="1">
        </td>
        <td>
          <a href="" class="mySubmitButton">Button</a>
        </td>
 </form>

然后你的JS看起来像

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

  var inputBox = $(this).prev(); 
  alert(inputBox.val());
  return false; //This prevents the default function submit . Similar to event.preventDefault
});

Answer 4

JQuery无处不在。你不需要JQuery。为什么人们会忘记DOM对象模型？他几乎以正确的方式做了一切：

    <head>
        <script>
            function submit_value() {
                alert(document.forms[0].ip.value);
            }
        </script>
    </head>
    <table>
        <tr>
            <form>
                <td>
                    <input name="ip" type="text" value="1">
                </td>
                <td>
                    <a href="javascript:;" onClick="submit_value()">Button</a>
                </td>
            </form>
        </tr>
    </table>

或者您可以添加表单ID

    <head>
        <script>
            function submit_value() {
                alert(document.forms.formid.ip.value);
            }
        </script>
    </head>
    <table>
        <tr>
            <form id='formid'>
                <td>
                    <input name="ip" type="text" value="1">
                </td>
                <td>
                    <a href="javascript:;" onClick="submit_value()">Button</a>
                </td>
            </form>
        </tr>
    </table>

Answer 5

我们可以在没有表单ID且没有JQuery的情况下进行操作。有关详细信息，请参见FormData。

 function test(frm) {
      const formData = new FormData(frm);
      for (var value of formData.values()) {
          console.log(value);
      }
  }

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="button" value="Submit" onclick="test(this.form)">
</form>

将onclick事件上的父表单传递给javascript函数

5 个答案: