Develop Reference

Validation with Ajax POST

I have a form that I have set up to POST using Ajax. Currently my validation is basically this function:
// Function for making all fields required
$(function(){
$("input").prop('required',true);
});
This works fine, however since parts of my form are hidden using CSS depending on previous answers selected - I get the following error for all hidden fields in the console:
An invalid form control with name='providerName' is not focusable.
Is there an easier way to add validation to an Ajax form, perhaps with more control?
E.g. some fields require a link - I think I can validate that the input has a 'link structure'
Example of my Ajax POST code:
// Wait for the DOM to be loaded
$(document).ready(function() {
// Make sure New Provider is unchecked by default
document.getElementById("typeNew").checked = false;
// Variable to hold request
var request;
// Bind function to form submit event
$("#createPanelForm").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// Setup local variable
var $form = $(this);
// Select and cache form fields
var $inputs = $form.find("projectName, projectLink, type, providerName, completeLink, quotaFullLink, screenoutLink, existingProvider");
// Serialize the data in the form
var serializedData = $form.serialize();
// Disable the inputs for the duration of the Ajax request
// Disabled form inputs will not be serialized.
$inputs.prop("disabled", true);
// Send the request
request = $.post({
url: "actions/createpanel.action.php",
method: "POST",
data: serializedData,
function(result){
alert(result);
}
});
// Callback handler for successful request
request.done(function (response, textStatus, jqXHR){
// Log data to console
console.log(serializedData);
console.log(response);
document.getElementById('submitSuccess').style.display = 'block';
});
// Callback handler for failed request
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to console
console.error("Error: "+textStatus, errorThrown);
document.getElementById('submitError').style.display = 'block';
});
// Callback handler for both outcomes
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
// Prevent default form posting
event.preventDefault();
// Hide form and show response
$("#createPanelForm").fadeOut(1000);
$("#submitResponse").delay(1001).fadeIn(1000);
});
})

Adding a novalidate attribute to the form will help:
<form name="myform" novalidate>

AJAX post form won't work. It does absolutely nothing

There was an error in my code and there was also a js file included inside my page which prevented anything from executing inside $(document).ready(function () { ...
i'm trying to sumbit this login form:
<form class="form" id="AjaxForm">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit" id="login-button">Login</button>
</form>
Via ajax with this code:
var request;
$("#AjaxForm").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "login.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
// Prevent default posting of form
event.preventDefault();
});
Which i found here: jQuery Ajax POST example with PHP
I'm trying to post it to login.php which checks if it is a valid username and password. But when i press the Login button it just puts the username and the password in the url and does nothing. And when i add action="login.php" method="POST" It submits the form but not via ajax because when i comment the ajax code out it still submits. I'm trying to prevent that. Any insights on my problem?
EDIT: lives here for now: http://5f6738d9.ngrok.io/test/public/index.html username and password are test

Check that the event is bound within a $(document).on('ready' ... otherwise the event won't fire and the form will just submit normally or not via AJAX.
Your code should look like:
$(document).on('ready', function () {
var request;
$("#AjaxForm").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "login.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
// Prevent default posting of form
event.preventDefault();
});
});
Note that these callback events are actually deprecated as of jQuery 1.8.
You will also need to ensure that your POST and action attributes are set on the form in all cases.

Your submit button is a standard submit type button which means that your form will be submitted normally. Based on your HTML code it will just submit the form to the same URL. The JS code will not have time to execute.
All you need to do is cancel de default HTML form submit by adding
event.preventDefault();
You need to add this first thing in your submit listener.
So your JS code will start like this
$("#AjaxForm").submit(function(event){
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
//....
Try using the following code:
$(document).ready(function(){
$('#AjaxForm').on('submit', function(event){
event.preventDefault();
if(request){
request.abort();
request = false;
}
var $form = $(this);
var serializedData = $form.serialize();
var $inputs = $form.find("input, select, button, textarea");
$inputs.prop("disabled", true);
var request = $.ajax({
url: 'login.php',
type: 'POST',
data: serializedData,
success: function (data, textStatus, jqXHR) {
// login was successful so maybe refresh the page
window.location.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
// display form errors received from server
},
complete: function (jqXHR, textStatus) {
request = false;
}
});
});
});

Personally I would use this instead:
$(document).ready(function(){
$("#AjaxForm").on("submit",function(e){
e.preventDefault();
var $form = $(this);
var $cacheData = $form.find("input, submit");
var serializedData = $form.serialize();
$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: serializedData,
xhrFields: {
onprogress: function(e){
$cacheData.prop("disabled", true);
console.log(e.loaded / e.total*100 + "%");
}
},
done: function(text){
if(text == "Succes!"){
alert(text);
} else {
alert(text);
}
},
fail: function(xhr, textStatus, errorThrown){
alert(textStatus + " | " + errorThrown);
},
always: function(){
$cacheData.prop("disabled", false);
}
});
});
});
This allows you to do some usefull things:
You're able to monitor the progress in the console
Just because Ajax is succesfull, doesn't mean you can't have an error returned. For example: Wrong password. So now you can simple echo errors back this script will show them. Echo "Succes!" when the login was fine.
Keep in mind though that this script requires that you set the HTML attributes action and method in your form.

Redirect from client side using html and ajax or js

I have a login page basically connecting to a location, and do a simple post call. I want to redirect the page to somewhere else if a user clicks submit and if post returns 200 or success. If not, return fail.
What would be the simplest way to do it? I am looking into client side redirect.
<html>
<head>
<title>Login</title>
</head>
<body>
<form action="/1.1.1.1:80/login" method="POST">
<p>Username: <input type="text" name="username" /><p>
<p>Password: <input type="password" name="password" /><p>
<p><input type="submit" value="Log In" /></p>
{% module xsrf_form_html() %}
</form>
</body>
</html>
UPDATE:
<html>
<head>
<title>Please Log In</title>
<script src="/Users/src/downloads/app/jquery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<form action="https://1.1.1.1:80/login" method="POST">
#Tried as well, but doesn't redirect <form action="https://google.com" method="POST">
<input class="form-control" type="text" required name="username" placeholder="username">
<input class="form-control" type="password" required name="password" placeholder="Password">
<input class="form-control" type="hidden" required name="eauth" value="pam">
<p><input type="submit" value="Log In" /></p>
{% module xsrf_form_html() %}
</form>
</body>
</html>
<script type="text/javascript">
$('form').submit(function(){
$.ajax({
type: "Post",
url: $('form').attr('action'),
success: function (response) {
window.location = 'http://www.google.com';
//error handling
}
});
//return false so the form does not submit again
return false;
});
</script>

you can post your form by jquery(ajax) and when result back decide what you want to do.
this link should help you
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#foo").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "/form.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
// Prevent default posting of form
event.preventDefault();
});

include jQuery and Try to use this according your code input
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function(){
$.ajax({
url: 'your-php-file.php',
dataType: 'html',
success: function(response) {
window.location.href = response;
}
});
});
});
</script>

Try something like this:
Make sure you have downloaded jquery.js file, put it in your directory somewhere, and put this in the head tag
<script src="path to your jquery file" type="text/javascript"></script>
Put this at the end of your html:
<script type="text/javascript">
$('form').submit(function(){
$.ajax({
type: "Post",
url: $('form').attr('action'),
success: function (result) {
if(result.Code == 200) //change this to your status code return
window.location = 'http://www.google.com';
else
//error handling
}
});
//return false so the form does not submit again
return false;
});
</script>
This should capture the form's submit event and instead post it via ajax which will allow you to handle the response however you want.

AJAX form script isn't executed

I want to use a form via AJAX, so I got this Code Snippet from another post on stackoverflow. It didn't work, so I added an alert to check, if the script is even executed. That doesn't seem to be the case and I'm wondering why.
<head>
<script src='jquery.js'></script>
<script>
var request;
$("#foo").submit(function(event){
alert("Hallu");
if (request) {
request.abort();
}
var $form = $(this);
var $inputs = $form.find("input, textarea");
var serializedData = $form.serialize();
$inputs.prop("disabled", true);
request = $.ajax({
url: "/action.php",
type: "post",
data: serializedData
});
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
event.preventDefault();
});
</script>
</head>
<body>
<form id="foo">
<input type="text" id="name" name="name" />
<textarea id="msg" name="msg"></textarea>
<input type="submit" value="Senden" />
</form>
</body>

When the script runs, #foo does not exist, so there is nothing to bind the event hander to.
Move the script so it appears after the form, or convert it to a function and bind it as a ready or load event handler.

The reason is very simple. You do something to $('#foo') before it has been loaded. At this point of time JS does not know anything about an object with id="foo", because it is not loaded yet.
Wrap the whole code in $(document).ready(function() { ... });.
This should look like this:
var request;
$(document).ready(function() {
$("#foo").submit(function(event){
alert("Hallu");
if (request) {
request.abort();
}
var $form = $(this);
var $inputs = $form.find("input, textarea");
var serializedData = $form.serialize();
$inputs.prop("disabled", true);
request = $.ajax({
url: "/action.php",
type: "post",
data: serializedData
});
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
event.preventDefault();
});
});
Please consider using a good IDE, like NetBeans or Eclipse. It helps you to detect unclosed brackets and other stuff.

Having trouble submitting a form with AJAX

HTML:
<form id="message">
<input id="message-text" name="message" type="text" value="" autofocus="autofocus" />
<input type="submit" value="Send" />
</form>
JAVASCRIPT:
$(document).ready(function () {
// submit new message
var request;
$("#message").submit(function(event) {
// abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
var $inputs = $form.find("input, select, button, textarea");
var postData = $form.serialize();
// note: we disable elements AFTER the form data has been serialized
$inputs.prop("disabled", true);
request = $.ajax({
url: "submit.php",
type: "POST",
data: postData
})
.done(function(response, textStatus, jqXHR) {
console.log('Success: ' + textStatus, jqXHR);
})
.fail(function(jqHXR, textStatus, errorThrown) {
console.error('Error: ' + textStatus, errorThrown);
});
});
});
I've confirmed that submit.php works when not using AJAX to submit, so I don't think that's the problem. The console log simply says: Error: error on line 66: console.error('Error: ' + textStatus, errorThrown); which is completely non-descriptive nor helpful... The page also refreshes when I hit enter or click submit, which isn't supposed to happen.
Any ideas what I'm doing wrong?

This happens because you use submit input, this is the default behavior of submit input, so you have 2 options first is disable the submit using event.preventDeafult(); on the submit process, or you can easily change your send button:
<input type="submit" value="Send" />
to
<input type="button" value="Send" />

$("#message").submit(function(event) {
event.preventDefault();
...

I prepare demo for you please download it from
https://www.dropbox.com/s/24h0o9n08iuvpo1/ajaxdemo.rar
Change as per your requirement. I think it is helpful