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, который при выборе будет запрашивать соответствующие данные и заполнять поле продуктов, но я не могу понять, как получить идентификатор этого набора элементов, чтобы гарантировать, что правильный в раскрывающемся списке, а также убедитесь, что обнаружен обмен для правильного поля.

Я пробовал такие методы, как добавление идентификатора к идентификатору выпадающего списка, но затем onchagne не работает.

Ниже приведен код JQuery Ajax, который получает список продуктов

    $(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 plugins формы , поэтому вам не нужно добавлять все поля вручную в код ajax, который отправляет форму.