Ajax avec plusieurs entrées de formulaire

Question

Je travaille sur un nouveau système et je suis bloqué à un point avec jquery + ajax et que cela fonctionne correctement avec les autres choses qui se passent sur la page.

Fondamentalement, la page est de soumettre un devis et sur la page, vous pouvez ajouter autant d'articles de devis que vous le souhaitez. Quand quelqu'un clique sur un nouvel élément, il exécute le code ci-dessous qui obtient la valeur d'un élément caché et l'utilise dans tous les nouveaux éléments Ids afin de les garder tous uniques.

Nouveau Code produit:

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

La prochaine chose que je veux faire est de configurer une requête AJAX en utilisant jQuery que lorsqu'elle est sélectionnée demandera les données appropriées et remplir la boîte de produits, mais je ne peux pas comprendre comment obtenir l'ID de cet ensemble d'éléments pour s'assurer que la zone de liste déroulante correcte est remplie et également pour s'assurer que l'onchange est détecté pour la boîte correcte. Ive essayé des méthodes comme l'ajout de l'ID à l'ID de la boîte déroulante, mais l'onchagne ne fonctionne pas.

Mon jquery code ajax est inférieur à celui retreives la liste des produits

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

Pour la vie sur mon ne peut pas comprendre cela alors si quelqu'un pouvait faire la lumière sur la meilleure façon de le faire, ce serait génial .

ALSi j'ai besoin de clarifier davantage, faites-le moi savoir parce que je me trompe pour l'expliquer.

Merci d'avance

Answer 1

J'ai des fonctionnalités similaires dans mon projet. Voici comment je le fais:

J'ai une variable globale qui commencent par 0, et augmenté chaque fois nouveau champ ajouté:

var num = 0; 

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

pour le rendre plus facile à déboguer, vous devriez commencer par un simple élément, Testez-le donc il est sans bug, et ajoutez plus de champ à celui-ci.

Pour soumettre un formulaire via AJAX, utilisez jQuery form plugins, vous n'avez donc pas besoin d'ajouter manuellement tous les champs dans le code ajax qui envoie le formulaire.