Ajax with multiple form inputs

Question

Hi Guys,

I am working on a new system and am stuck at a point with jquery + ajax and getting it work work correctly with the other things happening on the page.

Basically the page is to submit a quote and on the page you can add as many quote items as you want. When someone clicks on new item it runs the below code wich gets the value of a hidden element and uses it in all of the new elements Ids in order to keep them all unique.

New Product code:

    function addFormField() {
        var id = document.getElementById("field_id").value;
        $("#products").append("
<table width='600' cellpadding='5' cellspacing='0' class='Add_Products' id='row" + id + "'>
    <td width='250' class='left'>
      <label>Select Product Category</label>
    </td>
    <td class='right' >
      <label><select name='ProductCategory' id='ProductCategory'>
      <?php foreach($categories as $key=>$category){ 
                echo "<option value=".$key.">".$category."</option>"; 
            } 
             ?>
       </select>
      </label>
    </td>
  </tr>
  <tr>
     <td width='250' class='left'>
        <label>Select Product Template</label>
     </td>
     <td class='right' >
         <label>
         <select name='data[QuoteItem][" + id + "][product_id]' id='QuoteItem" + id + "product_id'></select>
          </label>
     </td>
   </tr>
   <tr >
     <td class='left'>Name</td>
     <td class='right'>
          <label>
             <input name='data[QuoteItem][" + id + "][name]' type='text' id='QuoteItem" + id + "name' size='50' />
          </label>
      </td>
    </tr>
     <tr >
       <td class='left'>
           Price (ex GST)
       </td>
       <td class='right'>
           <input type='text' name='data[QuoteItem][" + id + "][price]' id='QuoteItem" + id + "price' onchange='totalProductPrice();' class='quote-item-price' />
       </td>
    </tr>
    <tr>
       <td class='left'>
           Description
       </td>
       <td class='right'>
          <label>
                <textarea name='data[QuoteItem][" + id + "][description]' cols='38' rows='5' id='QuoteItem" + id + "description'>
                </textarea>
           </label>
         </td>
      </tr>
      <tr>
         <td>
           <a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a>
         </td>
      </tr>
  </table>
");


        $('#row' + id).highlightFade({
            speed:1000
        });

        id = (id - 1) + 2;
        document.getElementById("field_id").value = id;
    }

The next thing i want to do is setup an AJAX query using jQuery that when selected will request the appropriate data and populate the products box but i cannot figure out how to get the ID of that set of elements to ensure that the correct dropdown box is populated and also to make sure that the onchange is detected for the correct box.

Ive tried methods like adding the ID to the id of the dropdown box but then the onchagne doesnt work.

My jquery ajax code is below that retreives the list of products

    $(function(){
      $("select#ProductCategory").change(function(){
        var url = "productList/" + $(this).val() + "";
        var id = $("select#ProductCategory").attr('name');
        $.getJSON(url,{id: $(this).val(), ajax: 'true'}, function(j){
          var options = '';
        options += '<option value="0">None</option>';
          $.each(j, function(key, value){
        options += '<option value="' + key + '">' + value + '</option>';
          })
          $("select#QuoteItem" + id + "product_id").html(options);
        })
      })
    })  

For the life on my cannot figure this out so if anyone could shed some light on the best way to do it that would be great.

ALso if i need to clarify further let me know because im strugling to explain it.

Thanks in advance

Answer 1

I have similar functionality in my project. Here how I do it:

I have a global variable that start with 0, and increased every time new field added:

var num = 0;

jQuery(function($){
  $("#add_field").click(function(){
    num++;
    //here add new field, with id contains 'num'
  });
});

to make it easier to debug, you should start with a simple element, test it so it's bug free, and add more field to it.

To submit form via AJAX, use jQuery form plugins, so you don't need to add all fields manually in ajax code that submit the form.