Develop Reference

Ajax POST HTML form with elements array using jQuery

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

How to send similar data in array using JSON and AJAX Post Method using jQuery

HTML CODE
<form id="details">
<div>
<input type="text" placeholder="Email ID" id="email"></input>
<input type="text" placeholder="Mobile Number" id="mobile"></input>
</div>
<h5>Data</h5>
<div>
<div>
<input type="text" placeholder="Name" id="name1"></input>
<input type="text" placeholder="Age" id="age1"></input>
</div>
<div>
<input type="text" placeholder="Name" id="name2"></input>
<input type="text" placeholder="Age" id="age2"></input>
</div>
</div>
</form>
JS CODE
$(document).ready(function() {
$("form").on('submit', function(e) {
// Prepare data
var form = $("form");
var formData = new FormData(document.getElementById("details"));
e.preventDefault();
$.ajax(form.attr('action'), {
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData:false,
dataType: "json",
success: function(result) {
// Success Code
},
error: function(result) {
// Failure Code
},
timeout: 5000,
});
});
});
The codepen link for my code is http://codepen.io/anon/pen/VKzGRG
I want to send data like
{
"email" : "xyz#gmail.com",
"mobile" : "9898989898",
"data" : [
{
"name":"xyz",
"age":45
},
{
"name":"xyz",
"age":45
}
]
}
I tried sending the data using jQuery.
The problem is that it's sending only one name and age.
Also, in my project, I'm dynamically adding a Name and Age box using jQuery and a button.
How can I send the data using AJAX post method using jQuery?

you have missed the name of input that's why data is not posting
see the below working code.
//HTML code
<form name="details" action="t.php" id="details">
<div>
<input type="text" name="email" placeholder="Email ID" id="email"></input>
<input type="text" name="mobile" placeholder="Mobile Number" id="mobile"></input>
</div>
<h5>Data</h5>
<div>
<div>
<input type="text" name="data1[]" placeholder="Name" id="name1"></input>
<input type="text" name="data1[]" placeholder="Age" id="age1"></input>
</div>
<div>
<input type="text" name="data2[]" placeholder="Name" id="name2"></input>
<input type="text" name="data2[]" placeholder="Age" id="age2"></input>
</div>
</div>
<input type="submit" value="send">
</form>
//ajax code
$(document).ready(function() {
$("form").on('submit', function(e) {
// Prepare data
var form = $("form");
var formData = new FormData(document.getElementById("details"));
console.log(formData);
e.preventDefault();
$.ajax(form.attr('action'), {
type: 'POST',
data: formData,
contentType: false,
cache: false,
processData:false,
dataType: "json",
success: function(result) {
// Success Code
},
error: function(result) {
// Failure Code
},
timeout: 5000,
});
});
});

To post data with jQuery and Ajax, you can do something like this
var myObj = {
"email" : "xyz#gmail.com",
"mobile" : "9898989898",
"data" : [
{
"name":"xyz",
"age":45
},
{
"name":"xyz",
"age":45
}
]
};
$.post( "test.php", myObj)
.done(function( data ) {
alert( "Data Loaded: " + data );
});
That will post the data and alert the response of the request.

Google Form Response not working from the website

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>

Inserting Data into MySQL without calling PHP file inside HTML

I have a form:
<form method="post" action="insert.php">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="submit" value="Speichern">
</form>
As you can see my action is action="insert.php" so that calls my insert.php. A new url is created and it is opened in the browser.
But what if i dont want that? I want to stay on the same site where the form is and i would prefer not to call any php directly. i would prefer to call a javascript function. For example, my select i do with ajax:
function getData() {
$.ajax({
url: "queries.php",
data: {action: "retrieve_data"},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
Can i also do something like that with the insert?

<html>
<body>
<form method="post" action="insert.php" id="insertForm">
<input type="text" name="firstname" placeholder="Vorname" required>
<br>
<input type="text" name="lastname" placeholder="Nachname" required>
<br>
<input type="text" name="nickname" placeholder="Spitzname" required>
<br>
<input type="email" name="email" placeholder="Email" required>
<br>
<input type="button" id="insertData" value="Speichern">
</form>
<script type="text/javascript" src="lib/js/jquery-2-1-3.min.js"></script>
<script type="text/javascript">
$(function () {
$('#insertData').click({ inputs:$('#insertForm :input') }, getData);
});
function getData(o) {
var values = {};
o.data.inputs.each(function() {
values[this.name] = $(this).val();
});
$.ajax({
url: "queries.php",
data: {action: "retrieve_data", firstname: values['firstname'], lastname: values['lastname'], nickname: values['nickname'], email: values['email']},
dataType: "json",
type: "post",
success: function(output) {
// do stuff
}
});
}
</script>
</body>
</html>
Here you go, you can always edit is as you want, or what values are optional and such.
Remember i've used a type="button" so the page doesn't reload, so the action could just stay empty.

Since you seem to be using jQuery, this is easy; as explained in the documentation. If you give your form id=insertForm this should work:
$("#insertForm").submit(function(e){
$.ajax({
url: "/insert.php",
type: "post",
data: $(this).serialize();
});
e.preventDefault();
});

Javascript AJAX method

why does this not work?
function AjaxCall (FormName, PHPFunction) {
alert(FormName);
$.ajax({
type: "GET",
url: "webservice.php?method=" + PHPFunction,
data: $("'" + FormName + "'").serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
}
and this is the call from the form:
<form id="form_login" name="form_login" method="POST" onsubmit="return AjaxCall('form_login','CheckUserLogin')">
Thank you

FormName will be 'form_login', which you use as a jQuery selector which would match <form_login> elements if you weren't adding quotes to the string, but simply isn't a valid selector as you are.
Don't mess around with passing identifying strings, just pass the element itself.
onsubmit="return AjaxCall(this, ...
and
$(FormName)

This Code will work fine:
HTML Code:
<form id="form_login" name="form_login" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email" id="email" >
Passwort: <input type="text" size="30" name="password" id="password" >
DeviceID: <input type="text" size="30" name="deviceid" id="deviceid" >
<input type="submit" value="Login" name="submit_login" />
</form>
JAVASCRIPT Code:
$(function () {
$('#form_login').on('submit', function (e) {
$.ajax({
type: 'GET',
url: 'webservice.php?method=CheckUserLogin',
data: $('#form_login').serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
e.preventDefault();
});
});
so, and now i change it to them:
HTML Code:
<form id="form_login" name="form_login" method="POST" onsubmit="return AjaxCall('form_login', 'CheckUserLogin')" action="">
E-Mail: <input type="text" size="30" name="email" id="email" >
Passwort: <input type="text" size="30" name="password" id="password" >
DeviceID: <input type="text" size="30" name="deviceid" id="deviceid" >
<input type="submit" value="Login" name="submit_login" />
</form>
JAVASCRIPT Code:
function AjaxCall(FormName, PHPFunction) {
$.ajax({
type: 'GET',
url: 'webservice.php?method=CheckUserLogin',
data: $('#form_login').serialize(),
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response);
}
});
}
i get no request to webserice.php and i don't know why. I can see any AJAX request, i use fiddle, all i can see is:
"/projekte/werbung/login.php"