Question

i’m trying to serialize a form by the id but it won’t serialize and send the data.

code attached below.

    <script type="text/javascript">
<!--
$(function() {

 if($('#selectProductDialog').length == 0)
 {
  $('#page-content').after('<div id="selectProductDialog"></div>');
  $('#selectProductDialog').hide();
 }

 $("#ViewProduct").click(function(){
  $.post("products/view", "ProductID="+$(this).val(), function(data){
   $("#page-content").html(data);
  });
  return false;
 });

 $('#AddProductLine').click(function() {
  $.post("order/getitem", null, function(data){
   $("#selectProductDialog").html(data);
  });
  $("#selectProductDialog").dialog({ autoOpen: true, 
           hide: 'slide',
           show: 'slide', 
           title: 'Selected Product',
           close: function(event, ui) 
           { 
            $("#selectProductDialog").empty();
           }});
  return false;
 });

 $('#addItemDialogButton').live('click', function(event) {
  $.post("order/getitem", "ProductCode="+$("#ItemCode").val(), function(data){
   $("#selectProductDialog").html(data);
  });
  return false;
 });

 $('.selectProductID').live('click', function(event) {
  $.post("order/getitem", "ProductID="+$(this).val(), function(data){
   $("#orderItems tbody").append(data);
  });
  return false;
 });


 $('a.delete').live('click', function(event) {
  $(this).parent().parent().remove();
  return false;

 });

 $("#DueDate").datepicker({ altFormat: 'yy-mm-dd', dateFormat: 'dd-mm-yy', minDate: new Date() });

 $("#SaveNewOrderButton").click(function() {
  $.post("order/newin", $("#NewOrderForm").serialize(), function(data){
   $("#page-content").html(data);
  });
  return false;

 });

});

//-->
</script>

<div class="container_12">
 <div class="grid_12">
  <div class="box-header">New Inbound Order
   <span class="fr">
    <button id="SaveNewOrderButton" class="button small">save</button>
   </span>
  </div>

        <div class="box">
         <form id="NewOrderForm">
          <div class="container_12">
     <div class="grid_6">
            <div class="box-header">To:</div>
            <div class="box">
             <textarea id="ToAddress" rows="5" cols="50"></textarea>
            </div>
           </div>

           <div class="grid_6">
            <div class="box-header"></div>
            <div class="box">
             <div class="row">Customer Account: <select id="CustomerAccount"><option value="1">chemists</option></select></div>
             <div class="row">Order ID: </div>
             <div class="row">Date: <?= date("d-m-Y");?></div>
             <div class="row">Due Date: <input type="text" id="DueDate"></div>
             <div class="row">Customer Order Reference: <input type="text" id="COReference"></div>
            </div>
           </div>
          </div>
          <br class="cl" />


          <div class="box-header">Order Items

          <span class="fr">
           <button id="AddProductLine" class="button small">add</button>
          </span>

          </div>

          <div class="box table">
           <table id="orderItems">
           <thead>
           <tr><td width="15%">Product Code</td><td width="50%">Product Name</td><td width="15%">Qty</td><td width="15%">Location (pallet) - Quantity</td><td width="5%">remove</td></tr>
           </thead>
           <tbody>

           </tbody>
           </table>
          </div>
         </form>
   </div>
 </div>
</div>
<br class="cl" />

within tbody
i have a dialog box that fills the table with the following row

<tr class="Item"><td><input type="hidden" id="Pcode[]" value="2">TW-TT-8423</td><td>Something Big - Real Big - Item A</td><td><input type="text" id="Qty[]"></td><td><select id="Location[]"> <option value="1">AA3 - 20</option>
<option value="3">BA3 - 16</option>
<option value="8">AA1 (3) - 1032</option>
</select></td><td><a href="#" class="delete">X</a></td></tr>

Answer 1

“serialize” works with the attribute “name”, must include the tags “input/select/textarea/…”

exmaple for a comment:

var data = "", limit = "";
$('myForm').find('input').each(function(){

    data += limit + encodeURIComponent($(this)[0].id) + "=" + encodeURIComponent ($(this).val());
    limit = "&";
});