We Keep Coding

How can I serialize a form in JavaScript asp.net

I am using some javascript to post my form but I dont want to have to submit each form field is there a way I can serlize this to an object in .net so that it will bring in all the form contents.
section Scripts {
<script>
function confirmEdit() {
swal({
title: "MIS",
text: "Case Created your Case Number is " + $("#Id").val(),
icon: "warning",
buttons: true,
dangerMode: true,
}).then((willUpdate) => {
if (willUpdate) {
$.ajax({
url: "/tests/edit/" + $("#Id").val(),
type: "POST",
data: {
Id: $("#Id").val(),
Name: $("#Name").val()
},
dataType: "html",
success: function () {
swal("Done!", "It was succesfully edited!", "success")
.then((success) => {
window.location.href = "/tests/index"
});
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error updating!", "Please try again", "error");
}
});
}
});
}
</script>
}

asp.net core will automatically bind json data using the [FromBody] attribute.
data: {
id: $("#Id").val(),
name: $("#Name").val()
},
and then in your controller
[HttpPost("/tests/edit/")]
public IActionResult Process([FromBody] MyData data){ ... }
where MyData is
public class MyData
{
public string Id {get;set;}
public string Name {get;set;}
}

section Scripts { function confirmEdit() {
swal({ title: "MIS", text: "Case Created your Case Number is " + $("#Id").val(), icon: "warning", buttons: true, dangerMode: true, }).then((willUpdate) => { if (willUpdate) {
var obj = { Id: $("#Id").val(), Name: $("#Name").val() }
$.ajax({ url: "/tests/edit/" + $("#Id").val(), type: "POST", data: JSON.Stringify(obj), dataType: "html", success: function () { swal("Done!", "It was succesfully edited!", "success") .then((success) => { window.location.href = "/tests/index" }); }, error: function (xhr, ajaxOptions, thrownError) { swal("Error updating!", "Please try again", "error"); } }); } }); } }
in c# use
public ActionResult FormPost(MyData obj)

Please refer to the following methods to submit the form data to action method:
using the serialize() method to serialize the controls within the form.
#model MVCSample.Models.OrderViewModel
<h4>OrderViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Showsummary" asp-controller="Home" method="post" class="signup-form">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="OrderId" class="control-label"></label>
<input asp-for="OrderId" class="form-control" />
<span asp-validation-for="OrderId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="OrderName" class="control-label"></label>
<input asp-for="OrderName" class="form-control" />
<span asp-validation-for="OrderName" class="text-danger"></span>
</div>
<div id="packages">
#for (int i = 0; i < Model.Packages.Count; i++)
{
<div class="form-group">
<label asp-for="#Model.Packages[i].Pid" class="control-label"></label>
<input asp-for="#Model.Packages[i].Pid" class="form-control" />
<span asp-validation-for="#Model.Packages[i].Pid" class="text-danger"></span>
<br />
<label asp-for="#Model.Packages[i].PackageTitle" class="control-label"></label>
<input asp-for="#Model.Packages[i].PackageTitle" class="form-control" />
<span asp-validation-for="#Model.Packages[i].PackageTitle" class="text-danger"></span>
</div>
}
</div>
</form>
</div>
</div>
<div>
<input type="button" id="summary" value="Summary" />
<div id="page_3">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
$.ajax({
type: "POST",
url: "/Home/Showsummary", //remember change the controller to your owns.
data: $("form.signup-form").serialize(),
success: function (data) {
console.log(data)
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
});
});
</script>
Code the the action method:
[HttpPost]
public PartialViewResult Showsummary(OrderViewModel model)
{
try
{
//...
return PartialView("OrderSummary", model);
}
catch
{
return PartialView("OrderSummary", model);
}
}
After clicking the button, the result like this:
As we can see that, we could get the element's value in the form and even the nested entity.
Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
Create a JavaScript object, and post it to action method.
Change the JavaScript script as below:
$(function () {
$("#summary").click(function () {
console.log("calling summary");
event.preventDefault();
//create a object to store the entered value.
var OrderViewModel = {};
//using jquery to get the entered value.
OrderViewModel.OrderId = $("input[name='OrderId']").val();
OrderViewModel.OrderName = $("input[name='OrderName']").val();
var packages = [];
//var count = $("#packages>.form-group").length; //you could use it to check the package count
$("#packages>.form-group").each(function (index, item) {
var package = {}
package.Pid = $(item).find("input[name='Packages[" + index + "].Pid']").val();
package.PackageTitle = $(item).find("input[name='Packages[" + index + "].PackageTitle']").val();
packages.push(package);
});
//add the nested entity
OrderViewModel.Packages = packages;
$.ajax({
type: "POST",
url: "/Home/Showsummary", //remember change the controller to your owns.
data: OrderViewModel,
success: function (data) {
console.log(data)
$('#page_3').html(data);
},
failure: function (response) {
console.log(response.responseText);
},
error: function (response) {
console.log(response.responseText);
}
});
});
});
By using the above code, I could also get the submit entity, you could refer to it.

jquery ajax form submit with edit values

I have a datatable where I have the detail column with an edit button. When the user clicks on the edit am passing the id as a parameter. I am fetching all the values for that id and displaying in the form. Now when I edit the values and submit the form using PUT method it is getting inserted in the table, the values are passing as a parameter and it shows the empty form. How to solve this issue.
HTML:
<form class="container" id="myform" name="myform" novalidate>
<div class="form-group row">
<label for="position" class="col-sm-2 col-form-label fw-6">Position</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="position" name="position" placeholder="Position" required>
</div>
</div>
<div class="form-group row">
<label for="location" class="col-sm-2 col-form-label fw-6">Location</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Location" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
PUT Method Script:
<script type='text/javascript'>
$(document).ready(function(){
$("#myform").submit(function(e) {
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+par_val,
method: 'PUT',
async: false,
dataType : "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(parms),
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});
});
</script>
GET method script:
<script type="text/javascript">
$(document).ready(function(){
var id_val;
var params = new window.URLSearchParams(window.location.search);
id_val = params.get('id');
console.log(id_val);
var url1=id_val;
$.ajax({
url: "http://localhost:3000/joblists/"+id_val,
type: "GET",
dataType: "json",
success: function (data) {
// alert(JSON.stringify(data));
console.log(typeof(data));
$("#position").val(data.position);
$("#location").val(data.location);
},
error: function(data) {
console.log(data);
}
});
});
</script>
After submitting the form the page should remain the same with edit form values. only the edited values should be inserted. How to achieve this.

$('#myform').on('submit', function (e) {
e.preventDefault();
..........

I have checked your code in my editor. There are some changes which i made in ajax request, and it now works for me. here is the code. Try it
<script type='text/javascript'>
$(document).ready(function(){
$("#myform").submit(function(e) {
e.preventDefault();
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+id_val,
method: 'POST', //or you can use GET
dataType : "json", //REMOVED CONTENT TYPE AND ASYNC
data: {send_obj:JSON.stringify(parms)}, //ADDED OBJECT FOR DATA
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});
});
</script>

Adding prevent default in form submit handle is enough. You're handling the post request by ajax call.
e.preventDefault();

There are 2 changes in your code.
This code will prevent your page from reloading and also you are not sending the data in proper format.
$("#myform").submit(function(e) {
e.preventDefault(); // 1. Dont reload the page
var parms = {
position : $("#position").val(),
location : $("#location").val()
};
var par_val;
var param_id = new window.URLSearchParams(window.location.search);
par_val = param_id.get('id');
console.log(par_val);
var par_url = par_val;
$.ajax({
url: "http://localhost:3000/joblists/"+par_val,
method: 'PUT',
async: false,
dataType : "json",
contentType: "application/json; charset=utf-8",
data: parms, // 2. Just send the parms object bcoz you already defined the dataType as json so it will automatically convert it into string.
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
});

Displaying all data from loop

I am able to fetch all my data from database successfully but only the last item in the array displays. What am I doing wrong?
HTML
#foreach($groups as $group)
<button type ="button" value="{!! $group->id !!}" id="btn" name="btn">{!!$group->name!!}</button>
<div class="panel">
<label for="myvalue"><input type="checkbox" id="myvalue" /> <span>Label text x</span></label>
</div>
#endforeach
JavaScript
$.ajax({
type: "GET",
url: "/dashboard/ajax=?id=" +id,
data: {
id: $(this).val(),
access_token: $("#access_token").val()
},
success: function (result) {
$.each(result, function (i, fb) {
$("label[for='myvalue']").text(fb.name);
});
}
);

This way you are replacing the label text, not creating labels. What you are looking for would be something like:
<div class="panel" id="labels_cotainer">
<label for="myvalue">
<input type="checkbox" id="myvalue" />
<span>Label text x</span></label>
</div>
$.ajax({
type: "GET",
url: "/dashboard/ajax=?id=" +id,
data:{
id: $(this).val(),
access_token: $("#access_token").val()
},
success:function(result) {
$.each(result, function (i, fb) {
$("#labels_cotainer").append('<label>'+fb.name+'</label>');
}
}
});
This code will append every label to your panel

You have to dynamically create new labels and add fb.name to it otherwise you will replace all values until the last value
success:function(result) {
$.each(result, function (i, fb) {
$("#outerDiv").append('<label>'+fb.name+'</label>');
});
}

Call change and click event together jquery

I'm not able to access skills value using id while I can access finduserType value.
I don't know why, It should call on change event and click event as well.
$(function() {
$("#findUserType").change(function () {
var user_type = $("#findUserType").val();
var skills = $("#skills").val();
var phone = $("#phones").val();
var src = '{{Request::root()}}/api/user/suggestion/email';
var srcPhone = '{{Request::root()}}/api/user/suggestion/phone';
/* var skills = $("#skills").val();
var phone = $("#phones").val();*/
// Load the Users from the server, passing the usertype as an extra param
$("#skills").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
method: 'GET',
dataType: "json",
data: {
term : skills,
user_type : user_type
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
// Load the Users from phone to the server, passing the usertype as an extra param
$("#phones").autocomplete({
source: function(request, response) {
$.ajax({
url: srcPhone,
dataType: "json",
data: {
term : phone,
user_type : user_type
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
});
});
<form>
<div class="input-group">
<select class="form-control" id="findUserType" name="finduser">
<option value="">--Select--</option>
<option value="2">D</option>
<option value="3">P</option>
</select>
</div>
<div class="input-group">
<input type="text" id="skills" class="form-control">
<input type="text" id="phones" class="form-control" name="phone">
</div>
</form>
Updated the code please take a look what exactly i'm going to stuck it does not take email's values. When I call ajax change event does work fine but skills value does not have the any value. Also suggest how can i compress this code. I just want to check on change event call ajax base on skills and phone values.

I think this will work better:
$("#findUserType").change(function() {
if ($(this).val() == "") {
$("#textboxes").hide();
} else {
$("#textboxes").show();
}
});
$("#skills").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
method: 'GET',
dataType: "json",
data: {
term: $("#skills").val(),
user_type: $("#findUserType").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
// Load the Users from phone to the server, passing the usertype as an extra param
$("#phones").autocomplete({
source: function(request, response) {
$.ajax({
url: srcPhone,
dataType: "json",
data: {
term: $("#phones").val(),
user_type: $("#findUserType").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="form-control" id="findUserType" name="finduser">
<option value="">--Select--</option>
<option value="2">Doctor</option>
<option value="3">Pharmacy</option>
</select>
<br/>
<div id="textboxes" hidden>
<input type="text" id="skills" class="form-control">
<br/>
<input type="text" id="phones" class="form-control" name="phone">
</div>
</form>
At present your two later autocomplete handlers are not bound until the "findUserType"'s "change" event has happened at least once, because they are declared within that code block. And also if that "change" event happens multiple times then multiple handlers will be attached to the other two elements, and then when those events are triggered, multiple copies of the code will run - I doubt that's what you intended.

The change handler for #skills and the click handler for #phone will only be registered after the first change event firing on #findUserType.
Move those two handlers outside of #findUserType's change handler.

$(document).ready(function(){
$("#findUserType").change(function () {
var user_type = $(this).val();
});
$("#skills").change(function () {
var skills = $(this).val();
var phone = $("#phones").val();
});
$("#phone").change(function () {
var phone = $(this).val();
});
});
I hope you this will help you get the values of skills and phone when user type is selected.

How to post jquery ajax data object with multiple values

I have a form with two inputs (later more inputs). One input is a text input and the second one is a checkbox. I would like to send these two inputs with $.ajax.
I created an Object formData with one input. The second one I would like to append to the Object if the checkbox is active or not.
Unfortunately, I can't pass the Object because of a wrong format.
My Code:
<form id="myForm">
<input type="text" name="search_text" id="search_text" placeholder="Search by a name">
<input type="checkbox" name="exact" value="Exact">Exact
</form>
<br>
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').on('change', ':checkbox', function(){
if($(this).is(':checked')) {
console.log($(this).val() + ' is now checked');
}
else {
console.log($(this).val() + ' is now unchecked');
}
});
var formData = {'qry':search};
$('#search_text').on('keyup', function(e){
e.preventDefault();
var search = $(this).val();
$('#result').html('');
$.ajax({
url:"fetch.php",
method: "POST",
data: formData,
dataType: "text",
success:function(data) {
$('#result').html(data);
}
});
});
});
</script>

You need to serialise the form data and then add more data if required:
var data = $('#myForm').serializeArray();
data.push({name: 'sample', value: "something_more"});
Your ajax should then be something like:
var data = $('#myForm').serializeArray();
data.push({name: 'sample', value: "something_more"});
$.ajax({
url:"fetch.php",
method: "POST",
data: data,
dataType: "text",
processData: false,
success:function(data) {
$('#result').html(data);
}
});