I have a form with input fields which will be triggered every 1 min to update the user entries to the server.
$(document).ready(function()
{
timer = setInterval(function() { save(); }, 60000);
});
function save() {
jQuery('form').each(function() {
jQuery.ajax({
url: "http://localhost:7002/submitStudent.do?requestType=auto&autosave=true",
data: $('#form').serialize(),
type: 'POST',
success: function(data){
if(data && data == 'success') {
alert("data saved");
}else{
}
}
});
});
}
And here is my form
<form name="listBean">
<c:forEach var="Item" items="${listBean.nameList}" varStatus="status">
<input type="number"name="nameList<c:outvalue='[${status.index}]'/>.initialWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="number" name="nameList<c:out value='[${status.index}]'/>.finalWeight" onchange="checkOnChange(this,'<c:out value='${Item.personId}'/>','<c:out value='${Item.minWeight}'/>','<c:out value='${Item.maxWeight}'/>','<c:out value='[${status.index}]'/>')">
<br><br>
<input type="text" class="formtext" name="nameList<c:out value='[${status.index}]'/>.Reason" id ="reason<c:out value='[${status.index}]'/>" value="" maxlength="255" >
<br><br>
<input type="submit" value="submit" id="submit" />
</c:forEach>
</form>
So the ajax calls to the server works fine for every 1 min .But the values entered are not available at the server side.
I am getting the value as listBean.Item.getInitialWeight().
what am i doing wrong ?
Any suggestions are welcome.Thanks for your time ..
data: $('#form').serialize(),
should become
data: $('form').serialize(),
You are referencing to the wrong DOM item
jQuery will treat your
$('#form')
as "an element with id form". So you should change your jQuery DOM reference.
In your case it can be
$('form[name="listBean"]').serialize()
Related
My Form looks like this:
<form id="invite-form" method="post" action="" >
<input type="text" name=friends[0][first_name] />
<input type="text" name=friends[0][last_name] />
<input type="text" name=friends[0][email] />
<input type="text" name=friends[1][first_name] />
<input type="text" name=friends[1][last_name] />
<input type="text" name=friends[1][email] />
<input type="text" name=friends[2][first_name] />
<input type="text" name=friends[2][last_name] />
<input type="text" name=friends[2][email] />
<input type="submit" value="Invite" />
</form>
And here is my javascript code:
var friends = [];
jQuery("#invite-form").serializeArray().map(function(x){friends[x.name] = x.value;});
var formData = {
'friends' : JSON.stringify(friends),
'action' : 'invite-friends'
};
jQuery.ajax({
type : 'POST',
url : '/invitation.php',
data : formData,
dataType : 'json',
encode : true
}).done(function(data){
console.log(data);
if(data.success == true){
...
It doesn't work properly and the list of friends is not POSTed properly. How do I convert this kind of form to json data properly? I want to be able to use this data as a regular array, as if it were a regular form POSTed.
In this way you can submit form with serialize data and you many use
post or get request for this or any other method.
jQuery("#invite-form").submit(function(e) {
e.preventDefault();
let data = jQuery(this).serialize();
jQuery.ajax({
type: "get",
url: 'invitation.php',
data: data,
cache: false,
success: function(data){
console.log(data);
}
});
});
I having 3 textbox and I want to send value enter over there to controller method
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
#Html.ActionLink("Send", "MethodNameInController", "ColtrollerName", new { id= $('#id').val(),
id1= $('#id1').val(), id2= $('#id2').val()})
and in controller
public ActionResult MethodNameInController(int id, string id1, string id2)
{
//some text here
}
but it's sending null value
If you want to stay on the same view or redirect to another url after, instead of using #Html.ActionLink() try passing the values to the controller using an ajax call.
function submitAjax(){
//purely for readability
var id = $('#id').val();
var id1 = $('#id1').val();
var id2 = $('#id2').val();
//ajax call
$.ajax({
url: "/ControllerName/MethodNameInController",
data: { id: id, id1: id1, id2: id2 },
success: function (result) {
//handle something here
}
});
};
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<button type="button" onclick="submitAjax()">submit</button>
If the method does some processing and then returns you to a different view, you could do a form submit.
function submitForm(){
var $form = $("#idForm");
//optional validation
$form.submit();
};
<form id="idForm" class="form-horizontal" asp-controller="ControllerName" asp-action="MethodNameInController" >
<input class="form-control" type="text" id="id" name="id">
<input class="form-control" type="text" id="id1" name="id1">
<input class="form-control" type="text" id="id2" name="id2">
<!-- type="button" prevents the from from submitting so you can do validation checks in the js -->
<button type="button" onclick="submitForm()">submit</button>
</form>
I got the solution using ajax just want to know is there any direct solution
$(function () {
$('#receipt').unbind('click');
$('#receipt').on('click', function () {
$.ajax({
url: "/Controller/Method",
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify({
fromDate: $("#fromDate").val(),
toDate: $("#toDate").val(),
id: $("#id").val()
}),
async: false
});
});
});
I have following codes as form, and I wanted to check if the form is been successfully submitted.
I was wondering how I can check on the console. I want to check if the form is been successfully submitted so I can display another form.
<form id="signup" data-magellan-target="signup" action="http://app-service-staging.com" class="epic_app-signup" method="POST">
<div class="grid__column " style="width: 100%;">
<input type="text" name="first_name" placeholder="Name" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="password" placeholder="Password" required/>
</div>
<div class="grid__column " style="width: 100%;">
<input type="text" name="confimred-password" placeholder="Confirmed password" />
</div>
<div class="grid__column " style="width: 100%;">
<input type="date" name="startdate" id="startdate" min="2019-12-16">
</div>
</div>
<button type="submit" class="grid__column" style="width: 50%;"></button>
</div>
</div>
</div>
</form>
and the script,
$('.epic_app-signup').on('submit', function(e) {
e.preventDefault();
var formData = $('.epic_app-signup').serializeArray();
var jsonData = {};
formData.forEach(function(item, index) {
jsonData[item.name] = item.value;
});
console.log('data\n', jsonData);
$.ajax({
url: 'http://app-service-staging.com/api/auth/register',
type:'POST',
data: jsonData,
contentType: 'application/json'
}).done(function(data, textStatus, jqXHR) {
if (textStatus === 'success') {
}
});
});
});
you can do this by various ways currently you are not using ajax request if you want to achieve this without ajax let follow these steps
when user click on submit button your form is submitted received form information(you define the path in action attribute where form submitted) after processing successfully redirect toward a new form
second solution use jquery ajax request
//first form
<form action='test.php' id='form_1' method='post'>
<label>Full Name</label>
<input type='text' name='full_name'>
<input type='submit'>
</form>
//second form
<form action='test.php' id='form_2' method='post' style='display:none'>
<label>Father Name</label>
<input type='text' name='father_name'>
<input type='submit'>
</form>
use jquery cdn
<script src='https://code.jquery.com/jquery-git.js'></script>
<script>
$("#form_1").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert("form submitted successfully");
$('#form_1').hide();
$('#form_2').show();
},
error:function(data){
alert("there is an error kindly check it now");
}
});
return false;
});
</script>
I have a button and input field, and want to send the value of that field into an ajax call. I'm having a brain freeze at the moment and could use some help. Here's what I have so far.
function submit() {
$.ajax({
type: 'POST',
url: 'http://localhost:8000/getCoords',
dataType: 'json',
data: {name: 'Abduh'},
success: (success) => {
console.log(success);
},
error: (error) => {
console.log(error);
}
});
}
<input type=text id=search placeholder=Search />
<br/>
<button id=submit onclick="submit()">Submit</button>
you should sue quote around properties values
<input type='text' id='search' placeholder=Search />
<br/>
<button id='submit' onclick="submit();">Submit</button>
$("#submit").on("click",function(){
var url= 'http://localhost:8000/getCoords';
$.post( url, { name: $("#search").val() }).done(function(data) {
alert( "Data Loaded: " + data );
});
});
<input type="text" id="search" placeholder="Search" />
<button id="submit">Submit</button>
I'm using a Google Form's value to integrate with my website where I want to submit the form and store data in google sheet as form responses. I'm using AJAX to redirect to another page instead of google form submit page. But whenever I'm trying to submit it's redirecting to my page accurately but datas are not saved in google sheet. Here are my codes,
<strong>Full Name</strong>
<input type="text" name="Fullname" class="form-control" id="Fullname" />
<strong>Email Address</strong>
<input type="text" name="Email" class="form-control" id="Email" />
<strong>Subject</strong>
<input type="text" name="Subject" class="form-control" id="Subject" />
<strong>Details</strong>
<textarea name="Details" rows="8" cols="0" class="form-control" id="Details"></textarea><br />
<button type="button" id="btnSubmit" class="btn btn-info" onclick="postContactToGoogle()">Submit</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry_805356472": fullname,
"entry_1998295708": email, "entry_785075795":
subject, "entry_934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>
How can I save the data in google sheet? Am I missing something in my code? Need this help badly? Thanks.
You can directly copy the form from google view form page like shown in the demo, and then do the following changes in the AJAX call as shown below.
And now once you submit data it is visible in google forms, view responses.
$(function(){
$('input:submit').on('click', function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse",
data:$('form').serialize(),
type: "POST",
dataType: "xml",
crossDomain: true,
success: function(data){
//window.location.replace("youraddress");
//console.log(data);
},
error: function(data){
//console.log(data);
}
});
});
});
<div class="ss-form"><form action="https://docs.google.com/forms/d/18icZ41Cx3-n1iW7yTOZdiDx9a6mySWHOy9ryd1l59tM/formResponse" method="POST" id="ss-form" target="_self" onsubmit=""><ol role="list" class="ss-question-list" style="padding-left: 0">
<div class="ss-form-question errorbox-good" role="listitem">
<div dir="auto" class="ss-item ss-text"><div class="ss-form-entry">
<label class="ss-q-item-label" for="entry_1635584241"><div class="ss-q-title">What's your name
</div>
<div class="ss-q-help ss-secondary-text" dir="auto"></div></label>
<input type="text" name="entry.1635584241" value="" class="ss-q-short" id="entry_1635584241" dir="auto" aria-label="What's your name " title="">
<div class="error-message" id="1979924055_errorMessage"></div>
<div class="required-message">This is a required question</div>
</div></div></div>
<input type="hidden" name="draftResponse" value="[,,"182895015706156721"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fvv" value="0">
<input type="hidden" name="fbzx" value="182895015706156721">
<div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</td>
</tr></tbody></table></div></ol></form></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If you go to your form on Google and click on 'View Live Form', and then view source on the form, you'll see that the fields you want to upload have aname in the form entry.12345678; the id is in the form entry_12345678. You need to use the name value. Try this:
<script>
function postContactToGoogle() {
var email = $('#Email').val();
var fullname = $('#FullName').val();
var subject = $('#Subject').val();
var details = $('#Details').val();
$.ajax({
url: "https://docs.google.com/forms/d/abcdefgh1234567xyz/formResponse",
data: {
"entry.805356472": fullname,
"entry.1998295708": email,
"entry.785075795": subject,
"entry.934055676": details
},
type: "POST",
dataType: "xml",
statusCode: {
0: function () {
window.location.replace("Success.html");
},
200: function () {
window.location.replace("Success.html");
}
}
});
}
</script>