Ajax和多形式的投入

我工作在新系統上和我停留在使用jQuery + AJAX點，並得到它正常工作與工作發生的頁面上的其他東西。Ajax和多形式的投入

基本上頁面提交報價，並在頁面上，只要你想，你可以添加儘可能多的報價項目。當有人點擊新的項目時，它會運行下面的代碼，以獲取隱藏元素的值，並將其用於所有新元素ID中，以便保持它們的唯一性。

新產品代碼：

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

我想要做的下一件事就是安裝使用jQuery在被選擇時會要求相應的數據和填充產品的框，但我無法弄清楚如何得到一個AJAX查詢該元素集的ID以確保填充正確的下拉框，並且確保檢測到正確的框的onchange。

我用盡像加了ID的下拉框的ID的方法，但隨後onchagne不起作用。

我的jQuery Ajax代碼是低於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); 
     }) 
     }) 
    })

有關生命的清單我能不知道這一點，所以如果任何人都可以闡明的最佳途徑一些光做到這一點，將是巨大。

另外，如果我需要進一步澄清，讓我知道，因爲IM strugling解釋。

在此先感謝

來源

2010-02-08 kwhohasamullet

我已經在我的項目類似的功能。在這裏，我如何做到這一點：

我有一個全局變量，從0開始，每一次新的領域增加增加：

var num = 0; 

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

，使其更容易調試，你應該用一個簡單的元素開始，測試它，因此它沒有錯誤，併爲其添加更多字段。

要通過AJAX提交表單，使用jQuery form plugins，所以你不需要手動添加所有字段在提交表單Ajax代碼。

來源

2010-02-09 01:43:32

Ajax和多形式的投入

回答

相關問題