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

Question

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

<html>

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

</html>

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>