javascript - 如何将表行传递到包含所有输入元素的隐藏表单？

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>