Question

我正在处理我的项目，我创建了多行的表。现在我想从表行中提交用户输入信息但不是整个信息的元素。所以我想知道将表格行中的所有元素传递给隐藏的最佳方法是什么，我可以从该特定行提交信息。这是我的代码：

<form name='slotsPtc' id='slotsPtc' method='POST'>
   <table>
     <tbody>
       <tr>
          <td>Slot_Label</td>
          <td><span>
              <input type='text' name='EMAIL' value='' class="email"/>
              <input type='button' name='slot' value='Save' onClick='saveSlot(this)'></span>
              <input type='hidden' value='userID'/>
              <input type='hidden' value='dateSignUp'/>
          </td>
       </tr>
    </tbody>
  </table>
</form>

function saveSlot(btn){
   //Here I want to submit my form with information entered in table row.
}

我应该在onClick事件之后将信息传递给我的函数，然后创建动态表单并传递所有信息吗？或者有更好的方法来做到这一点？

Answer 1

我的建议是：

function saveSlot(btn){
  var frm = document.getElementById('slotsPtc');
  // disable the button until the form is successfully submitted or on failure
  // this to avoid to submit while submitting the same data
  btn.disabled = true;
  $.ajax({
    url: frm.action,
    type: frm.method,
    data: $(btn).parent('tr').find(':input').serialize(),
    success: function(result) {
      // enable again the button
      btn.disabled = false;
      // form submitted with success
    },
    error: function(jqXHR, textStatus, errorThrown ) {
      // enable again the button in any case
      btn.disabled = false;
      // form submitted with failure
    }
  });
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<form name='slotsPtc' id='slotsPtc' method='POST'>
    <table>
        <tbody>
        <tr>
            <td>Slot_Label</td>
            <td><span>
              <input type='text' name='EMAIL' value='' class="email"/>
              <input type='button' name='slot' value='Save' onClick='saveSlot(this)'></span>
                <input type='hidden' value='userID'/>
                <input type='hidden' value='dateSignUp'/>
            </td>
        </tr>
        <tr>
            <td>Slot_Label1</td>
            <td><span>
              <input type='text' name='EMAIL1' value='' class="email"/>
              <input type='button' name='slot1' value='Save' onClick='saveSlot(this)'></span>
                <input type='hidden' value='userID1'/>
                <input type='hidden' value='dateSignUp1'/>
            </td>
        </tr>
        </tbody>
    </table>
</form>

Answer 2

我的建议是做这样的事情，然后发布通过选择器找到的表单数据：

$('#save').click(function(){
    console.log($(this).parents('tr').find('td input'));
});

示例（从选择器检查控制台中的对象）：

https://jsfiddle.net/yLk07esz/

Answer 3

所以不要使用它：

data: $(btn).parent('tr').find(':input').serialize()

我必须使用它：

data:$j(btn).closest('td').find(':input').serialize()

出于某种原因，当我使用第一行代码时，我的表单在提交后是空的。然后我切换并使用最近的（'td'）。find（'：input'），这给了我正确的输入字段和有效值。

如何使用所有输入元素将表行传递给隐藏表单？

3 个答案: