单击（）上的serialize（）时出现空字符串

Question

我有一个带有两个提交按钮的html表单，一个用于删除项目，另一个用于更新项目。由于我有两个提交按钮，我使用click（）通过ajax提交表单。

Jquery的：

$('#deleteClass').click (function(event) {
    var datastr = $('#selectclass_form').serialize();
    console.log(datastr);
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: someurl,
        data: datastr,
        success: function(data) {
            var result = $.parseJSON(data);
            if (result.status == 'success') {
                alert('Entry has been deleted');
            } else {
                alert('Uhoh! We hit and error and cannot delete the entry');
            }
            console.log(result);
        },
        error: function() {
            alert('php error');
        }
    });
});

HTML：

      <form id=selectclass_form'>

          <b>Select A Class:</b>
          <select name='selectclassselect' id='selectclassselect' data-native-menu='false' onChange='loadClassInfo()'>
            <option value="choose_one" data-placeholder="true">Choose one...</option>
          </select>

        <div name='editclass' id='editclass' style='display:none'>
            <div>
              <b>Class Name</b>
              <input type='text' name='selectclassname' id='selectclassname' disabled>
            </div>
            <div class='ui-grid-c'>
              <div class='ui-block-a main'><b>Component</b></div>
              <div class='ui-block-b point'><b>Max Point</b></div>
              <div class='ui-block-c per'><b>Percentage</b></div>
            </div>
            <div id='editComponents'>
              <div class='ui-grid-c'>
                <div class='ui-block-a main'><input type='text' name='component0' id='component' placeholder='Component'></div>
                <div class='ui-block-b point'><input type='number' name='point0' id='point' placeholder='Max Point'></div>
              <div class='ui-block-c per'><input type='number' name='percentage0' id='percentage0' placeholder='Percentage'></div>
              <div class='ui-block-d rm'><button type='button' class='ui-btn ui-icon-delete ui-shadow ui-corner-all ui-btn-icon-notext' disabled></button></div>
              </div>
            </div>
            <br>
            <div class='ui-grid-a'>
              <div class='ui-block-a'><input type='submit' id='deleteClass' name='action' class='ui-btn ui-btn-b ui-shadow ui-corner-all' data-icon='delete' value='Delete Class'></div>
              <div class='ui-block-b'><input type='submit' id='updateClass' name='action' class='ui-btn ui-btn-b ui-shadow ui-corner-all' data-icon='check' value='Submit'></div>
            </div>

          </div>

        </form>

序列化表单数据后，控制台日志显示datastr为空，表单已完全填满。

任何帮助将不胜感激

Answer 1

试试这个， 我在表单ID中添加了一个缺少的'，并在Jquery上序列化之前阻止了单击

$('#deleteClass').click (function(event) {
    event.preventDefault();
    var datastr = $('#selectclass_form').serialize();
    console.log(datastr);
    $.ajax({
        type: 'POST',
        url: someurl,
        data: datastr,
        success: function(data) {
            var result = $.parseJSON(data);
            if (result.status == 'success') {
                alert('Entry has been deleted');
            } else {
                alert('Uhoh! We hit and error and cannot delete the entry');
            }
            console.log(result);
        },
        error: function() {
            alert('php error');
        }
    });
});

HTML：

  <form id='selectclass_form'>

      <b>Select A Class:</b>
      <select name='selectclassselect' id='selectclassselect' data-native-menu='false' onChange='loadClassInfo()'>
        <option value="choose_one" data-placeholder="true">Choose one...</option>
      </select>

    <div name='editclass' id='editclass' style='display:none'>
        <div>
          <b>Class Name</b>
          <input type='text' name='selectclassname' id='selectclassname' disabled>
        </div>
        <div class='ui-grid-c'>
          <div class='ui-block-a main'><b>Component</b></div>
          <div class='ui-block-b point'><b>Max Point</b></div>
          <div class='ui-block-c per'><b>Percentage</b></div>
        </div>
        <div id='editComponents'>
          <div class='ui-grid-c'>
            <div class='ui-block-a main'><input type='text' name='component0' id='component' placeholder='Component'></div>
            <div class='ui-block-b point'><input type='number' name='point0' id='point' placeholder='Max Point'></div>
          <div class='ui-block-c per'><input type='number' name='percentage0' id='percentage0' placeholder='Percentage'></div>
          <div class='ui-block-d rm'><button type='button' class='ui-btn ui-icon-delete ui-shadow ui-corner-all ui-btn-icon-notext' disabled></button></div>
          </div>
        </div>
        <br>
        <div class='ui-grid-a'>
          <div class='ui-block-a'><input type='submit' id='deleteClass' name='action' class='ui-btn ui-btn-b ui-shadow ui-corner-all' data-icon='delete' value='Delete Class'></div>
          <div class='ui-block-b'><input type='submit' id='updateClass' name='action' class='ui-btn ui-btn-b ui-shadow ui-corner-all' data-icon='check' value='Submit'></div>
        </div>

      </div>

    </form>