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

问题描述 投票:5回答:5

[嗨,我正在尝试将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>

javascript html javascript-events
5个回答
3
投票

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

如果文档上有多个表单,那么最好先将表单元素存储在变量中。您可以在表单上找到该ID ...

<form id="formID">

并且您可以在Submit_value函数中使用

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

编辑:

您可以将this.form用于锚标记的onClick。


1
投票

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>

0
投票

将功能更改为此:

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

[编写submit_value(this)时,this的值实际上是元素<a>本身,而不是形式。


0
投票

我假设您可以使用jquery。选择器对此非常简单。

更改以下形式的html自

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

to

 <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
});

0
投票

我们可以在没有给定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> 
© www.soinside.com 2019 - 2024. All rights reserved.