当我按下提交按钮时，我如何获得ID表格

Question

当我按下提交按钮时，我需要找出表单 id 并通过 ajax 使用 post 方法传递输入值。我可以将form放在tr标签内吗？我该怎么做？

这是我的代码：

$("button").click(function(e) {
e.preventDefault();
alert("hello");
 var formid = $(this).closest("form[id]").attr('id');;
alert(formid) });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
     <form id='idForm'>
          <td><input type='input' value='12345' name='data1'></td>
          <td><input type='input' value='12345' name='data2'></td>
          <td><button type='submit' form='idForm'>Send</button></td>
     </form>
  </tr>
</table>

但是当我尝试检查Alert()里面的结果时，它显示未定义。

Answer 1

首先，您必须为要操作的标签提供id或class属性。最好像这样编写html，您可以使用jQuery获取所需的标签值

。

$("button").click(function(e) {
  var input1 = $('#input1').val();
  var input2 = $('#input2').val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
     <form id='idForm'>
          <td><input id="input1" type='input' value='12345' name='data1'></td>
          <td><input id="input2" type='input' value='12345' name='data2'></td>
          <td><button type='submit' form='idForm'>Send</button></td>
     </form>
</tr>

Answer 2

<button> 元素将具有一个属性，指向它所包含的表单，因此您应该能够简单地更改获取表单 ID 的方式来解决问题。

尝试更改此行...

var formid = $(this).closest("form[id]").attr('id');

对于这样的东西...

var formid = this.form.id;

或者一种更jQuery的方式来做到这一点...

var formid = $(this.form).attr('id');

而且，是的，您可以将<form>元素放在<tr>元素中，但是，您还需要在<tr>中有一个<td>，而不是在表单中具有<td>。

正确的形式看起来更像这样...

<table>
    <tr>
        <td>
            <form id="idForm">
                <input id="input1" type="input" value="12345" name="data1">
                <input id="input2" type="input" value="12345" name="data2">
                <button type="submit" form="idForm">Send</button>
            </form>
        </td>
    </tr>
</table>

或者这个，这可能更接近你想要的......

<form id="idForm">
    <table>
        <tr>
            <td><input id="input1" type="input" value="12345" name="data1"></td>
            <td><input id="input2" type="input" value="12345" name="data2"></td>
            <td><button type="submit" form="idForm">Send</button></td>
        </tr>
    </table>
</form>