Let's say I have a simple form. I use this jquery piece of code to get the result using ajax on my form page.
function sendquery()
{
$("#form").submit();
var url = "form.php";
$.ajax({
type: "POST",
url: url,
data: $("#form").serialize(),
success: function(data)
{
$("#output").html(data);
}
});
return false;
}
Quite simple. What I want now is to validate the form by adding a class, let's say "blank" to inputs with empty value, and don't allow the form to be submitted. It shouldn't be too hard, but whatever i've tried will just break my form.
How can I do it?
you need jQuery validate plugin , and ......
$(document).ready(function()
{
$('#formId').validate({
submitHandler:function(form)
{
$(form).ajaxSubmit({
success:function(response)
{
//do stuff on success
},
dataType:'json'
});
},
errorLabelContainer: "#error_message_box",
wrapper: "li",
rules:
{
name:"required",
category:"required"
},
messages:
{
name:"name required",
category:"category required"
}
});
});
Related
Hi i have problem with form redirection to its action target, validation ajax interrupt the form redirection here is my code , all i just submit the post to form action location also redirect on that location.
$("form").submit(function(e){
jQuery.ajax({
type : "post",
url : "validate.php",
dataType : "json",
data : {email : 'example#domain.com'},
success: function(response) {
if(response.status == '1'){
//Email is valid want to continue form submit and redirect , but it is not
}else{
e.preventDefault();
//return false
}
}
});
})
You may need to create a separated function to submit your form as a callback of the validation ajax process and pass the serialized data to it, something like :
function submitForm(serializedData) {
jQuery.ajax({
ur: "{your form action processing file}",
type: "POST",
data: serializedData,
success: function (data, textStatus, xhr) {
console.log("form submitted "+xhr.status) // 201 if everything OK
// optionally reload the page
window.location.reload(true);
}
});
}
jQuery(document).ready(function ($) {
// validate form
$("#myForm").on("submit", function (event) {
// prevent form from being submitted
event.preventDefault();
// collect your form data to be submitted :
var serializedData = $("#myForm").serializeArray();
$.ajax({
url : "validate.php",
type: "POST",
cache: false,
dataType : "json",
data : {email : 'example#domain.com'},
success: function (response) {
if(response.status == '1'){
// email is valid so submit the form
submitForm(serializedData);
} // you don't need an else statement since we already used event.preventDefault() before the ajax call
},
error: function () {
console.log("ajax validation error");
}
})
}); // on submit
}); // ready
Notice we assigned a selector (#myForm) to the form we are processing.
everything works, I get my json array returned in an alert, I just need to change the onSubmit event handler $('#city').submit(function() to something more dynamic that grabs the user input and runs the ajax call as soon as the user types the letters.
I'd recommend the keyup() event:
$("#term").keyup(function(e){
});
But you can also use the autocomplete function from JQuery-UI: autocomplete
Using autocomplete this would be:
$("#term").autocomplete({source: "/suggestjson", minLength: 2, select: function (event, ui) {
//do something when the user selects, by the way the value
//selected by the user is in: 'ui.item.value'
}});
Use
$('#city').change(function() {
var formdata = $('#term').val()
$.ajax({
url: "/suggestjson",
type: "GET",
dataType: "json",
data: {'term': formdata},
success: function (data) {
alert(data);
}
});
return false;
});
Or
$('#city').keyup(function() {
........
.......
});
I am calling a file with ajax.
The ajax call works fine when I remove ajaxcomplete code line.
But the data that prints is not satisfactory.
How do I find what is making my ajaxcomplete, incomplete..
Help me figure out this.
Thank you.
What is that I need to do here? Thanks..
When I use the script below,I get the response in firebug, but it is not displaying.
ajax script
$("#form1").validate({
debug: true,
rules: {
plid: "required",
},
messages: {
plid: "Please select a pack name id..",
},
submitHandler: function (form) {
loading_show();
$.ajax({
type: "POST",
url: "load_data.php",
data: $('#form1').serialize() + "&page=1",
success: function (msg) {
$("#container").ajaxComplete(function (event, request, settings) {
loading_hide();
$("#container").html(msg);
});
}
});
}
});
If you're using success in your Ajax object, there's no need to use .ajaxComplete(). Just take it out:
$.ajax({
type: "POST",
url: "load_data.php",
data: $('#form1').serialize() + "&page=1",
success: function(msg) {
loading_hide();
$("#container").html(msg);
}
});
As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.
$(document).ajaxComplete(function (event, request, settings) {
// Your code here
});
You can use the code below for accomplishing the task.
$(document).ajaxComplete(function () {
loading_hide();
});
or you can use ajax start and stop.
$(document).ajaxStart(function () {
loading_show();
});
$(document).ajaxStop(function () {
loading_hide();
});
I'm trying to display an Alert message through ajaxSubmit as successful as in the example code below:
submitHandler: function( form ){
var dados = $( form ).serialize();
$.ajaxSubmit({
type: "POST",
url: "...",
data: dados,
complete: function( data )
{
// $("#cargo").resetForm();
alert("Alert Message");
$("#txtNome").focus();
$("#txtNome")
.hide()
.show("slow");
document.getElementById("cargo").reset();
}
});
return false;
}
But every time the form data is saved, but no Alert message is shown! Can anyone help me?
check this code. It is working.
jQuery('#formId').validate({
submitHandler: function(form) {
jQuery("#formId").ajaxSubmit({
success: function(data) {
alert("hello");
jQuery('#element').html(data);
},
data: {ajax:'true', tab:'true'}
});
}
});
Put your code in this format.
I'm currently working on a multi-step query form which can be found at: http://jsfiddle.net/xSkgH/47/.
I'm trying to submit the variables via jQuery AJAX (process.php will handle the processing) and refresh the div last-step with the div in the process.php called result. How can I achieve this?
I've so far managed to accomplish this using the jQuery form plugin by malsup (http://jquery.malsup.com/form/) and now need to using the jQuery AJAX method to accomplish it as part of a strict specification.
This is the code I had been using (with the jQuery form plugin):
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#result',
beforeSubmit: showRequest,
success: showResponse
};
// bind to the form's submit event
$('#task5_booking').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
// alert('About to submit: \n\n' + queryString);
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
$('#last-step').fadeOut(300, function() {
$('#result').html(responseText).fadeIn(300);
});
}
Many thanks!
Use jQuery.ajax to handle the last step:
http://api.jquery.com/jQuery.ajax/
else if (whichStep == 'last-step') {
$.ajax( {
url:'urltophp.php',
data: {}, // your data
dataType: 'json', //your datatype
type: 'POST', //or GET
success: function(r) {
//your callback here...
}
});
}
Edit:
$('#task5_booking').submit(function(e) {
$(e).preventDefault(); //prevent the default form submit()
var formData = $(this).serialize(); //serialize the form fields data...
$.ajax( {
url:'urltophp.php',
data: formData, // your data
dataType: 'json', //your datatype
type: 'POST', //or GET
success: showResponse
});
//$(this).ajaxSubmit(options);
//return false;
//});
});
Change this:
function showResponse(responseText, statusText, xhr, $form) {
$('#last-step').fadeOut(300, function() {
$('#result').html(responseText).fadeIn(300);
});
}
To this:
function showResponse(responseText) {
$('#last-step').fadeOut(300, function() {
$('#result').html(responseText).fadeIn(300);
});
}
use http://api.jquery.com/load/ .
it's like using .ajax, only easier and fits your requirements.
$('#last-step').load(url, data, function(){}) sends a post request, and fills the html content of 'last-step' with whatever the url printed out into the response html.