java begineer java begineer - 6 months ago 18
Javascript Question

How to submit form with dynamic html Input texbox using jQuery Ajax

I'm creating dynamic multiple HTML input box using jQuery and populating the value, after populating I want to update the product price in each text box and submit the form with updated value to server using ajax. I'm facing issue with below code, if I edit the product price in textbox and click on Update button its calling my ajax function, but updated product price not sending to server. I'm getting empty value.

If I click Update button, I'm getting empty array for below code:

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


For some reason my dynamic textboxes updated values not coming to ajax method.

Please find my below code - can someone help what I'm doing wrong here and how to resolve the issue.
Complete code:

JSON which comes from server side:

[{
"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>


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

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


Thanks!

Sid Sid
Answer

You have not given name to your input field.

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

Try with above code.