AJAX如何从一个元素中序列化和发布所有表单元素

Question

我正在尝试序列化和发布所有可能来自

元素或来自任何其他元素（div、tr 等）的表单元素。

简而言之，我的表单将来自：

<form id="frm1">
  Name: <input ...>
  Gender: <select ...>
  <input type="button" value="Submit" onClick="submitFormData('frm1')"/>
</form>

有时，我有 html TABLE，所以其中不能有

，因此我使用：

<table>
  <tr id="frm1">
    <td><input type...></td>
    <td><select...></td>
    <td><input type="button" value="Submit" onClick="submitFormData('frm1')"/></td>
  </tr>
  <tr id="frm2">
    <td><input type...></td>
    <td><select...></td>
    <td><input type="button" value="Submit" onClick="submitFormData('frm2')"/></td>
  </tr>
</table>

我似乎无法弄清楚如何从给定元素中提取和序列化所有表单元素（输入、选择等）。

到目前为止我的代码：

const ERROR_TYPE_FATALERROR = 1;
const ERROR_TYPE_INPUTERROR = 2;
const ERROR_TYPE_GLOBALMESSAGE = 3;

function submitFormData(formid) {

  var formNode = document.getElementById(formid);

  $.ajax({
    type: 'POST',
    url: $(location).attr('href'),
    // data: jQuery('#' + formid + ' input').serialize(), // this works, but will only get <INPUT...>s
    data: formNode.serialize(), // this doesn't work
    dataType : "json",
  }).done(function(response) {

    // If we have response, then it's PHP that returned an error!
    if(response) {

      // error type
      switch (response.type) {

        case ERROR_TYPE_GLOBALMESSAGE:
          // unhide informational box (i.e. "Data saved!")
          $('#globalMessage').addClass('d-block');
          $('#globalMessagePH').empty();
          $('#globalMessagePH').append(response.message);

          break;

        case ERROR_TYPE_FATALERROR:
          // unhide form fatal error message box showing response.message
          $('#fatalError').addClass('d-block');
          $('#fatalErrorMessagePH').empty();
          $('#fatalErrorMessagePH').append(response.message);

          break;

        case ERROR_TYPE_INPUTERROR:
          // unhide form input error messages based on response.field
          break;

        default:
          // ...
      }
    }

    // Successful post, but not response came back !?
    else {
      console.error("Post sent, but no response came back!?");
    }
  }).fail(function(response) {
    console.error("Unknown Error!"); // not sure yet how I'd get here... ?
  });

}

我还尝试向所有表单元素添加“data2post”类，以便获取发布所需的所有元素并对其进行序列化：

var formNode = document.getElementById(formid);
var formData = formNode.getElementsByClassName('data2post');
...
  data: formData.serialize()
...

但它不起作用：formData.serialize 不是函数

正如你从我的 JS sn-p 中看到的，我知道刚刚

data: jQuery('#' + formid + ' input').serialize()

有效，但这只会得到 。无论类型如何（输入、选择、文本区域等），我都需要能够获取所有表单元素

即使为了它，我也可以同时问一下，考虑到你们看到我使用这个 ajax 的目的，在良好的实践中，我是否应该在 .失败（）部分？不确定我如何在 PHP 中执行此操作，这意味着触发失败。我所知道的是，如果我用 JSON 数据 die() 我的脚本，它将作为响应发送...

感谢您的帮助。

干杯，帕特

编辑：这是我的 SELECT 输入的示例：

<tr id="row_1">
  <!-- STATUS -->
  <td class="text-nowrap">
    <select name="isActive" id="isActive" class="form-control pl-2" aria-label="Account Status" aria-describedby="isActiveReq" required>
      <option value="1"  selected>Enabled</option>
      <option value="0" >Disabled</option>
    </select>

    <!-- missing field: add 'is-invalid' to the <input>'s classes to show OR 'was-validated' to the form's classes -->
    <div id="isActiveReq" class="pl-1 invalid-feedback">
      This field is required! 
    </div>
  </td>
  <td><input type="button" name="btnSave" value="Save" onClick="submitFormData('row_1')"></td>
</tr>

Answer 1

尝试使用$('#frm1').serialize();

var data = $('#frm1').serialize();

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: function(response){
     console.log(response);
  }
});

Answer 2

没有表单元素也没关系，

克隆指定的 id 元素，可以是它的 div 或任何东西：

$('#myDiv').clone()

附加到form 元素中：

$('<form>').append($('#myDiv').clone()).serialize();

以下是工作示例，包括几乎类型的元素：

function getSerialize(id){

    let element = $("#"+id);

    // if you are using form element
    if( element.prop("tagName") === "FORM" ){
        var data = element.serialize();
    }

    // if your are using another elements
    else{
        var myInputs = element.clone();
        // this is the bug getting select box selected value when clone, so we have selected value in clone using this hack.
        element.find('select').each(function(i) {
            myInputs.find('select').eq(i).val($(this).val())
        })
        var data = $('<form>').append(myInputs).serialize();
    }

    // you can return 'data' variable from here.
    console.log(data);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Div Serialize</h1>
<div id="myDiv">
    <input type="text" name="name" placeholder="Name"><br><br>
    <select name="age" placeholder="Age">
        <option value="">Age</option>
        <option value="18+">18+</option>
    </select><br><br>
    <textarea name="about" placeholder="About"></textarea><br><br>
    <button onClick="getSerialize('myDiv')">Get Serialize</button>
</div>

<h1>Form Serialize</h1>
<form id="myDivForm" action="" onSubmit="return false;">
    <input type="text" name="name" placeholder="Name"><br><br>
    <select name="age" placeholder="Age">
        <option value="">Age</option>
        <option value="18+">18+</option>
    </select><br><br>
    <textarea name="about" placeholder="About"></textarea><br><br>
    <button onClick="getSerialize('myDivForm')">Get Serialize Form</button>
</form>

希望对您有所帮助。