Wie füge ich Formular mit dynamischem html ein Eingabefeld mit jQuery Ajax

Question

Ich erstelle dynamisches multipler HTML-Eingabefeld mit jQuery und befülle den Wert, nach dem Füllen möchte ich den Produktpreis in jedem Textfeld aktualisieren und das Formular mit aktualisierten senden Wert für den Server mit Ajax. Ich habe Probleme mit dem unten stehenden Code, wenn ich den Produktpreis in der Textbox bearbeite und auf "Aktualisieren" klicke, ruft er meine Ajax-Funktion an, aber der aktualisierte Produktpreis wird nicht an den Server gesendet. Ich bekomme einen leeren Wert.

Wenn ich Update-Button klicken, erhalte ich leeres Array für Code unten:

JSON.stringify($("#updateNameForm").serializeArray()) 

Aus irgendeinem Grund meine dynamische Textfelder aktualisierten Werte nicht auf Ajax-Methode kommen.

Hier finden Sie meinen untenstehenden Code - kann jemand helfen, was ich hier falsch mache und wie man das Problem löst. komplette Code:

JSON, die von Server-Seite kommt:

[{ 
    "productName": "Product1", 
    "productPrice": "323" 
}, { 
    "productName": "Product2", 
    "productPrice": "4333" 
}] 

HTML-Code:

<div class="content-wrapper"> 
    <section class="content"> 
    <div class="row"> 
     <div class="col-md-9"> 
     <div class="box box-info"> 
      <div class="box-header with-border"> 
      <h3 class="box-title">My Form</h3> 
      </div> 
      <!-- /.box-header --> 
      <form id="updateNameForm" class="form-horizontal" method="post"> 
      <div class="box-body"> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
       <div class="checkbox"> 
        <label> 
        <input type="checkbox" id="editName" class="input_control" /> <strong> Edit</strong> 
        </label> 
       </div> 
       </div> 
      </div> 
      <div class="box-footer"> 
       <button type="submit" class="btn btn-default">Cancel</button> 
       <input id="updateName" type="button" name="updatea" value="Update" class="btn btn-info pull-right"> 
      </div> 
      </form> 
     </div> 
     </div> 
    </div> 
    </section> 
</div> 

aktualisieren Ajax

$("#updateName").on('click', function() { 
    $.ajax({ 
     url: 'myApp/updateProduct', 
     type: "PUT", 
     dataType: 'json', 
     data: JSON.stringify($("#updateNameForm").serializeArray()), 
     success: function(result) { 
      alert(result); 
     }, 
     error: function(e) { 
      console.log(e.responseText); 
     } 
    }); 
}); 

loadProduct Funktion

function loadProduct() { 
    $.ajax({ 
     url: 'myApp/getProduct', 
     type: "GET", 
     dataType: 'json', 
     success: function(productJson) { 
      $.each(JSON.parse(JSON.stringify(productJson)), function(idx, obj) { 
       var formgroup = $("<div/>", { 
        class: "form-group" 
       }); 
       formgroup.append($("<label>", { 
        class: "col-sm-2 control-label", 
        text: obj.productName 
       })); 
       var colsm = $("<div/>", { 
        class: "col-sm-10" 
       }); 
       var input = $("<input/>", { 
        type: "text", 
        class: "form-control", 
        id: obj.productName + "Id", 
        value: obj.productPrice 
       }); 
       colsm.append(input); 
       formgroup.append(colsm); 
       $(".box-body").append(formgroup); 
      }); 
     }, 
     error: function(e) { 
      console.log(e.responseText); 
     } 
    }); 
} 

Dank!

Answer 1

Sie haben name nicht in Ihr Eingabefeld eingegeben.

var input = $("<input/>", { 
    type: "text", 
    name: "productPrice", 
    class: "form-control", 
    id: obj.productName + "Id", 
    value: obj.productPrice 
}); 

Versuchen Sie mit dem obigen Code.