My project based on spring boot, Thymeleaf, mysql, html and jQuery. My Scenario is getting dynamically generated input box data and static input box data need to carried out and to hit the @controller.
I want to POST as a JSON format in a type of List EntPropertySub that means list of class type, I had a confusion how do I make a list in jQuery. I tried to make a array of object, but it seems error. Please guide me. Here is a sample code
var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++) {
blockListPropSub[max] = {
blockname = $('#block'+max).val();
floors=$('#floor'+max).val();
flatstart=$('#flats'+max).val();
flatend=$('#flatsend'+max).val();
};
}
Here is a plete script..
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#addingInp"); //Fields wrapper
var add_button = $("#addButton"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true
$(wrapper).append('<div style="margin-top: 20px" class="form-row">'
+'<div class"form-group col-md-3">'
+'<label for="block'+x+'">Block</label>'
+'<input id="block'+x+'" th:field="*{blockListPropSub.blockname}" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="floor'+x+'">No of floors</label>'
+'<input id="floor'+x+'" th:field="*{blockListPropSub.floors}" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="flats'+x+'">No/Name of flats</label>'
+'<input id="flats'+x+'" th:field="*{blockListPropSub.flatstart}" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
+'<input id="flatsend'+x+'" th:field="*{blockListPropSub.flatend}" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
+'</div>'
+'<a href="#" class="remove_field col-md-1"> X </a>'
+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
//--------------------For Submitting` data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajxPost();
});
function ajxPost(){
var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++)
{
blockListPropSub[max]={
blockname = $('#block'+max).val();
floors=$('#floor'+max).val();
flatstart=$('#flats'+max).val();
flatend=$('#flatsend'+max).val();
};
}
alert(blockListPropSub.blockname[1]);
// PREPARE FORM DATA
var formData = {
property_name : $("#propertyname").val(),
address1 : $("#inputaddress").val(),
address2 : $("#inputaddress2").val(),
city:$("#inputcity").val(),
state:$("#inputstate").val(),
country:$("#inputcountry").val(),
zipcode:$("#inputzip").val(),
blockListPropSub
}
// DO POST
$.ajax({
type : "POST",
contentType : "application/json",
url : url+"/savemasterproperty",
data :JSON.stringify(formData),
dataType : 'json',
success : function(result) {
if(result == "saved"){
$("#resultid").html("<strong>" +username+ " Registered Successfully!" );
}else{
$("#resultid").html("<strong>Error</strong>");
}
alert(result.status);
console.log(result);
},
error : function(e) {
alert("Error!");
alert(url);
console.log("ERROR: ", e);
}
});
// Reset FormData after Posting
//resetData();
}
/* function resetData(){
property_name : $("").val(),
address1 : $("").val(),
address2 : $("").val(),
city:$("").val(),
state:$("").val(),
country:$("").val(),
zipcode:$("").val(),
}*/
});
My project based on spring boot, Thymeleaf, mysql, html and jQuery. My Scenario is getting dynamically generated input box data and static input box data need to carried out and to hit the @controller.
I want to POST as a JSON format in a type of List EntPropertySub that means list of class type, I had a confusion how do I make a list in jQuery. I tried to make a array of object, but it seems error. Please guide me. Here is a sample code
var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++) {
blockListPropSub[max] = {
blockname = $('#block'+max).val();
floors=$('#floor'+max).val();
flatstart=$('#flats'+max).val();
flatend=$('#flatsend'+max).val();
};
}
Here is a plete script..
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $("#addingInp"); //Fields wrapper
var add_button = $("#addButton"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true
$(wrapper).append('<div style="margin-top: 20px" class="form-row">'
+'<div class"form-group col-md-3">'
+'<label for="block'+x+'">Block</label>'
+'<input id="block'+x+'" th:field="*{blockListPropSub.blockname}" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="floor'+x+'">No of floors</label>'
+'<input id="floor'+x+'" th:field="*{blockListPropSub.floors}" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
+'</div>'
+'<div class"form-group col-md-4">'
+'<label for="flats'+x+'">No/Name of flats</label>'
+'<input id="flats'+x+'" th:field="*{blockListPropSub.flatstart}" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
+'<input id="flatsend'+x+'" th:field="*{blockListPropSub.flatend}" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
+'</div>'
+'<a href="#" class="remove_field col-md-1"> X </a>'
+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
//--------------------For Submitting` data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajxPost();
});
function ajxPost(){
var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++)
{
blockListPropSub[max]={
blockname = $('#block'+max).val();
floors=$('#floor'+max).val();
flatstart=$('#flats'+max).val();
flatend=$('#flatsend'+max).val();
};
}
alert(blockListPropSub.blockname[1]);
// PREPARE FORM DATA
var formData = {
property_name : $("#propertyname").val(),
address1 : $("#inputaddress").val(),
address2 : $("#inputaddress2").val(),
city:$("#inputcity").val(),
state:$("#inputstate").val(),
country:$("#inputcountry").val(),
zipcode:$("#inputzip").val(),
blockListPropSub
}
// DO POST
$.ajax({
type : "POST",
contentType : "application/json",
url : url+"/savemasterproperty",
data :JSON.stringify(formData),
dataType : 'json',
success : function(result) {
if(result == "saved"){
$("#resultid").html("<strong>" +username+ " Registered Successfully!" );
}else{
$("#resultid").html("<strong>Error</strong>");
}
alert(result.status);
console.log(result);
},
error : function(e) {
alert("Error!");
alert(url);
console.log("ERROR: ", e);
}
});
// Reset FormData after Posting
//resetData();
}
/* function resetData(){
property_name : $("").val(),
address1 : $("").val(),
address2 : $("").val(),
city:$("").val(),
state:$("").val(),
country:$("").val(),
zipcode:$("").val(),
}*/
});
-
1
You will need to replace
=with:inside object literals. – Mohammad Usman Commented Oct 23, 2017 at 7:27
1 Answer
Reset to default 6First, you have to make BlockListPropSub an array, var blockListPropSub = []
then use something like blockname: $('#block' + max).val() to set the value of blockname
var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub = [];
for (max = 1; max <= 2; max++) {
blockListPropSub.push({
blockname: max, //$('#block' + max).val();
floors: max, //$('#floor' + max).val();
flatstart: max, //$('#flats' + max).val();
flatend: max, //$('#flatsend' + max).val();
})
}
console.log(blockListPropSub)<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>