click（）でserialize（）を実行すると空の文字列

Question

私は2つの送信ボタンを持つhtmlフォームを持っています.1つはアイテムを削除し、もう1つはアイテムを更新します。私は2つの送信ボタンを持っているので、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で行方不明'を追加し、HTML

$('#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'); 
     } 
    }); 
}); 

のjQuery

にシリアライズする前にクリックを防止している、これを試していただければ幸いです。

<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> 

をそれぞれ のhtml形式の