Ajax с несколькими входными формами

Question

Я работаю над новой системой и застрял в точке с jquery + ajax и правильно ее работаю с другими вещами, происходящими на странице.

В основном страница предназначена для отправки предложения, и на странице вы можете добавить столько котировок, сколько хотите. Когда кто-то нажимает на новый элемент, он запускает код ниже, который получает значение скрытого элемента и использует его во всех идентификаторах новых элементов, чтобы сохранить их уникальными.

Новый код продукта:

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

Следующая вещь, которую я хочу сделать, это настроить учетную запрос AJAX с помощью JQuery, что при выборе будет запрашивать соответствующие данные и заполнить коробку продуктов, но я не могу понять, как получить идентификатор этого набора элементов, чтобы обеспечить заполнение нужного выпадающего окна, а также убедиться, что onchange обнаружен для правильного поля.

Ive пробовал методы, такие как добавление идентификатора к идентификатору раскрывающегося списка, но тогда ончан не работает.

Мой JQuery код Аякса ниже, чем retreives список продуктов

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

Для жизни на моей не может понять это, так что если кто-то может пролить некоторый свет на лучший способ сделать это, что было бы здорово ,

Также, если мне нужно уточнить, дайте мне знать, потому что я пытаюсь объяснить это.

Заранее спасибо

Answer 1

У меня есть аналогичная функциональность в моем проекте. Вот как я это делаю:

У меня есть глобальная переменная, которые начинаются с 0, и увеличение каждый раз, когда добавляется новое поле:

var num = 0; 

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

, чтобы облегчить отладку, вы должны начать с простого элемента, протестируйте его, чтобы он был без ошибок, и добавьте к нему больше полей.

Чтобы отправить форму через AJAX, используйте jQuery form plugins, поэтому вам не нужно добавлять все поля вручную в код ajax, которые отправляют форму.