Develop Reference

How to check if submitting form with jQuery if successful?

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>

AJAX file upload giving undefined file error

let me first explain what I aim to do, then display my code.
What I want to do is make a page which basically updates a user's details in the database, I did this part first and everything works perfectly here, through AJAX. Next I wanted to update the profile picture of the user as well through AJAX, so I made a normal file upload PHP page to make sure that my PHP code was working correctly and it was. Now I just needed to perform the upload via AJAX, and this is where I get stuck. I keep getting an error message from the PHP page which states undefined index: file.
Please feel free to ask any questions, and thank you for the responses.
Here is my HTML form:
<form action="upload.php?upload&type=profile" method="post" enctype="multipart/form-data">
<label for="profile">Profile Picture</label><br />
<img id="preview" width="200" height="200" src="<?php echo $user->getProfile(); ?>" alt="Profile Picture Preview" /><br />
<br />
<input type="file" name="file" id="file" onchange="loadImage(this);" /><br />
<label for="username">Username</label><br />
<input type="text" name="username" id="username" value="<?php echo $user->getUsername(); ?>" /><br />
<label for="email">Email Adress</label><br />
<input type="text" name="email" id="email" value="<?php echo $user->getEmail(); ?>" /><br />
<label for="bio">Biography</label><br />
<textarea name="bio" id="bio" cols="40" rows="5"><?php echo $user->getBio(); ?></textarea><br />
<label for="password">New Password</label><br />
<input type="password" name="password" id="password" /><br />
<label for="oldPass">Current Password</label><br />
<input type="password" name="oldPass" id="oldPass" /><br />
<label for="first">First Name</label><br />
<input type="text" name="first" id="first" value="<?php echo $user->getFirstName(); ?>" /><br />
<label for="last">Last Name</label><br />
<input type="text" name="last" id="last" value="<?php echo $user->getLastName(); ?>" /><br />
<br />
<input type="submit" name="update" value="Save" id="update" /> <input type="button" name="reset" value="Reset Fields" onclick="resetFields()" />
</form>
Here is my js file containing the AJAX:
$(document).ready(function() {
$("#update").click(function() {
profile = "pictures/default.jpg";
username = $("#username").val();
email = $("#email").val();
bio = $("#bio").val();
newPass = $("#password").val();
oldPass = $("#oldPass").val();
first = $("#first").val();
last = $("#last").val();
// First an ajax request to upload the image as it requires separate request
$.ajax({
type: "POST",
url: "upload.php?upload&type=profile",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(resp) {
alert(resp);
},
error: function (resp) {
alert(resp);
}
});
// Now the updates in the profile
$.ajax({
type: "POST",
url: "update.php",
data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last,
success: function(resp) {
// resp contains what is echoed on update.php
alert(resp);
}
});
return false;
});
});
Finally, here is my PHP Code:
include "base.php";
// Kick user off this page if they are not logged in
if (!isset($user)) {
echo "<meta http-equiv='refresh' content='0.1;url=index.php'>";
exit();
}
if (isset($_GET['upload'])) {
switch ($_GET['type']) {
case "profile": {
$dir = "pictures/";
$maxFileSize = 2000000; // 2mb
$extensions = array("jpg", "jpeg", "png", "gif");
$currentPath = pathinfo($_FILES['file']['name']);
$fileType = $currentPath['extension'];
$targetFile = $dir.$user->getUsername()."Profile.".$fileType;
}
break;
default: {
echo "<meta http-equiv='refresh' content='0.1;url=index.php'>";
exit();
}
break;
}
$upload = true;
// Check the file size
if ($_FILES['file']['size'] > $maxFileSize) {
echo "The file is too large.";
$upload = false;
}
// Limit file types
if (!in_array($fileType, $extensions)) {
echo "This file type is not allowed.";
$upload = false;
}
// Check if file upload is allowed and upload if it is
if ($upload) {
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
echo basename($_FILES['file']['name']);
} else {
echo "There was an error during file upload.";
}
}
}

Your code has a few issues. For one since your button was located within a Form and you were only associating a click on that button then the form was submitting itself as normal and pretty much confusing jquery. In order to capture the form properly in jquery you need to run it as a submit instead and add the e.preventDefault(); so that your code in ajax runs instead of the actual form submitting on the page.
You need to add e.preventDefault(); so that your form does not submit itself since you have form tags. Also change from click to submit
$("form").submit(function(e) {
e.preventDefault();
profile = "pictures/default.jpg";
username = $("#username").val();
email = $("#email").val();
bio = $("#bio").val();
newPass = $("#password").val();
oldPass = $("#oldPass").val();
first = $("#first").val();
last = $("#last").val();
// First an ajax request to upload the image as it requires separate request
$.ajax({
type: "POST",
url: "upload.php?upload&type=profile",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(resp) {
alert(resp);
},
error: function (resp) {
alert(resp);
}
});
// Now the updates in the profile
$.ajax({
type: "POST",
url: "update.php",
data: "mode=details&profile="+profile+"+&username="+username+"&email="+email+"&bio="+bio+"&password="+newPass+"&oldPass="+oldPass+"&first="+first+"&last="+last,
success: function(resp) {
// resp contains what is echoed on update.php
alert(resp);
}
});
return false;
});
If you are dealing with multiple forms on a page, or dynamically created forms then you will want to use
$(document).on('submit', 'form', function(e) {
...
});
Even better give your form a class for dynamic data
$(document).on('submit', '.myform', function(e) {
...
});

How do I make a success alert appear after correct submission in javascript

I want to show the user a form sent correctly alert message with javascript using bootstraps built in alerts.
When I run the code I get the object array of the values (inspecting the page at console log). what I want to do is after it is sent, to display a success alert (if it is a success).
there is test4.sj which contains the javascript code and then there is main.php which is the code for the form.
The code that I have so far is in the snippet.
$('form.ajax').on('submit', function() {
var that = $(this),
type = that.attr('action'),
data = {};
that.find('[name]').each(function(index, value) {
//console.log(value);
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
/* $.ajax({
url: url,
type: type,
data: data,
success: function(response){
console.log(response);
}
})*/
return false;
})
<body>
<form method="post" class="ajax">
<div>
<input name="name" type="text" placeholder="Your name" required>
</div>
<div>
<input name="lName" type="text" placeholder="Your Last Name">
</div>
<div>
<textarea name="message" placeholder="Your Message"></textarea>
</div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>

Just add hidden alert panel and show it on AJAX success.
HTML:
<form method="post" class="ajax">
<div class="alert alert-success js-alert hidden" role="alert">
Form was successfully sent!
</div>
...
<div>
<input name="name" type="text" placeholder="Your name">
</div>
...
<button type="submit" class="btn js-btn">Send</button>
</form>
JS:
$('form').on('submit', function( event ) {
var $form = $( this );
event.preventDefault();
$('.js-alert').addClass('hidden');
$('.js-btn').button('loading');
$.ajax({
url: '/someurl',
type: 'POST',
data: $form.serialize(),
success: function(response){
$('.js-alert').removeClass('hidden');
$('.js-btn').button('reset');
}
});
});
Check the fiddle:
https://jsfiddle.net/xw63db57/1/

you can use ajax jqXHR status and statusCode and based up on that you can write the alert code
success(data, textStatus, jqXHR){
var statusCode = jqXHR.status;
var statusText = jqXHR.statusText;
}

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>

404 Not Found on Jquery AJAX JSON PHP POST

I'm trying to POST some JSON data to a local host and I keep getting a 404 Not Found error which is strange because the php file is located in the correct location as specified in the script. I would appreciate any feedback from anyone who has experience with this. Am I getting this error because the the server can not locate the ajax.php file for some unknown reason?
<div class="container">
<div class="header">
<h3 class="text-muted">AJAX JSON Data</h3>
</div>
<div id="data-div">
<form method="post" action="api/ajax.php" class="ajax">
<p><label for="firstname" class="contact-input-text">First Name</label> <br/>
<input id="first-name" name="firstname" type="text" maxlength="30" autofocus /></p><p><label for="lastName" class="contact-input-text">Last Name</label> <br/>
<input id="last-name" name="lastname" type="text" maxlength="30" autofocus /></p>
<p><input type="submit" id="submit-button" class="contact-input-text" value="submit" /></p>
</form>
</div>
</div>
<script>
$('form.ajax').on('submit', function(){
var jsondata = {};
$(this).find('[name]').each(function(i, data){
console.log(data);
var that = $(this);
var key = that.attr('name');
var value = that.val();
jsondata[key] = value;
});
console.log(jsondata);
$.ajax({
type: 'POST',
url: 'ajax.php',
dataType: 'json',
data: jsondata,
success: function(response){
console.log(response);
},
error: function(xhr){
console.log(xhr);
}
});
return false;
</script>
Here is the ajax.php file....
<?php
if(isset($_POST['submit'])) {
$file = "data.json";
$json_string = json_encode($_POST,JSON_PRETTY_PRINT);
file_put_contents($file,$json_string,FILE_APPEND);
}
?>
This is the directory structure :
index.html (contains the form input fields and the ajax request)
ajax.php
/styles
/images

have you ensure with correct url in ajax?
maybe not thi:
url: 'ajax.php'
but this:
url: 'api/ajax.php'