動的HTMLを使用してフォームを送信する方法jQueryを使用してtexboxを入力する

Question

jQueryを使用して動的な複数のHTML入力ボックスを作成し、値を入力した後に各テキストボックスの製品価格を更新し、 ajaxを使用してサーバーに値を渡します。私はテキストボックスで製品の価格を編集し、そのボタンをクリックして私のajax関数を呼び出すが、更新された製品価格がサーバーに送信されない場合は、以下のコードで問題に直面している。私は空の価値を得ている。私のダイナミックテキストボックスは、AJAXの方法に来ていない値を更新し、いくつかの理由で

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

：私は、[更新]ボタンをクリックした場合

、私はコードの下に空の配列を取得しています。

私の下のコードを見つけてください - 私がここで間違っていることや問題の解決方法を教えてもらえますか？ 完全なコード：

JSONサーバ側から来ている：

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

HTMLコード：

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

更新アヤックス

回の

$("#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機能

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

ありがとう！

Answer 1

入力フィールドにnameを指定していません。

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

上記のコードで試してください。