How can I stop a form using AJAX from refreshing when using success and error? If I remove return false; after the end of the function, the error(Error validating CLid!) is displayed and the page refreshes, however if I leave it the ajax function submits and returns true with no refresh. Let me know if you need more information. Thanks!
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&company=' + phone + '&length=' + length + '$time=' + time + '&question' + question;
$.ajax({
type: "POST",
url: "contact_process.php",
data: dataString,
success: function() {
$('#search_contact').html("You're request for more information was submitted.");
},
error: function() {
$('#search_contact').html('Error validating CLid!');
}
});
return false;
});
I suspect you are triggering this ajax request through an event on a form submission or link click or something.
If you are triggering the request from a link, ie:
Click me
When you bind the event you need to call event.preventDefault(); on the event passed to the event handler to prevent the default behavior, ie:
$('#contactTrigger').click(function(event){
event.preventDefault();
//do your ajax stuff here.
});
Related
I validate my form with both client and sever side scripting. First I validate it with jQuery then it goes to php validation and if it returns success or something like that I want to submit the form but some how the condition does not work. However in html err_msg I get success text but its not working.
jQuery.validator.setDefaults({
submitHandler: function () {
var name = $na('#inf_field_FirstName').val();
var password = $na('#inf_field_Password').val();
var cpass = $na('#cpass').val();
var email = $na('#inf_field_Email').val();
var age = $na('#inf_custom_Age').val();
$na.ajax({
type: "POST",
url: '<?php bloginfo('
template_url ')?>/user_create.php',
data: 'name=' + name + '&email=' + email + '&password=' + password + '&cpass=' + cpass + '&age=' + age,
cache: false,
success: function (result) {
jQuery('.err_msg').html(result);
if (jQuery('.err_msg').html == 'sucess') {
jQuery("#inform").submit();
} else {
alert('error');
}
}
});
}
});
use jQuery("#inform")[0].submit();
otherwise, if u have submit button in your form just trigger that button
jQuery("#submit_btn_id").trigger('click')
I'm getting a weird result from a jQuery ajax request sending form details to a PHP script. The same scripts are used elsewhere problem free. Basically the form is submitted using jQuery.ajax like this:
//if submit button is clicked
$('#form1').submit(function () {
//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var con_email = $('input[name=con_email]');
var comments = $('textarea[name=comments]');
//organize the data properly
var data = 'name=' + name.val() + '&email=' + email.val() + '&con_email=' + con_email.val() + '&comments=' + encodeURIComponent(comments.val());
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process-email/process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function () {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('slow');
$('.done').delay(1000).fadeIn('slow');
}
}
});
//cancel the submit button default behaviours
return false;
});
The PHP script works fine, the email is sent and 1 is returned (email sent) but the script stops at: if(html==1). I get this error
html is not defined
As said above exactly the same script works fine somewhere else, but here I get that error and the script is stopped. Can someone please help to understand where there might be the problem?
You have to add the parameter reference:
success: function (html) {
//if process.php returned 1/true (send mail success)
//.....
}
Then you can use this parameter, which will be the response from server.
Check your success funcion, should be like:
success: function (response) {
//if process.php returned 1/true (send mail success)
if (response == "1") {
//hide the form
$('.form').fadeOut('slow');
$('.done').delay(1000).fadeIn('slow');
}
}
It looks like you are not returning the response from the PHP script to the JavaScript function. If you do something like the following for your success function it should get you on the right track:
success: function( html )
{
if(html=='1')
{
[...]
}
}
i have an easy ajax script which sending data to php file with no problem
index.php
<script type="text/javascript">
$(function() {
$('#submit').click(function() {
$('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');
var name = $('#name').val();
var email = $('#email').val();
var comments = $('#comments').val();
$.ajax({
url: 'submit_to_db.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
}
});
return false;
});
});
</script>
with in the same page i have another form which needed to be submitted so i don't know how to do it without no conflict with in this function i already use ?
btw it won't processed with in the same php file it will use another file
I don't see what's the point. What kind of problems do you have in submitting more than one form? You're referencing elements by id.
Note that you really should change your code to intercept the $('#form-id').submit(), not the $('#submit').click event, because a form could be submitted also with enter key, or via javascript callbacks, not only using the submit button.
In your code what is the problem in doing something like this
$(function() {
$('#other-form-id').submit(function() {
$.ajax({
url: 'other-php-script.php',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comments=' + comments,
success: function(result) {
// your success handling
}
});
return false;
});
});
This is going to work as far as Dom ID are unique across the document.
BTW I strongly advise you to use this wonderful plugin to manage ajax form to keep your js code cleaner and simple. With that your code could be rewritten as:
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
$('#response').remove();
$('#container').append('<p id="response">' + result + '</p>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
});
});
I have a form that requires a physical address. Once the user enters the full address, I have a button that says "Verify address". I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks
So, I did this to have things working:
$(document).ready(function() {
//if verify button is clicked
$('#verify').click(function () {
var address = $('input[name=address]');
var city = $('input[name=city]');
var state = $('input[name=state]');
var zip = $('input[name=zip]');
var country = $('select[name=country]');
//organize the data for the call
var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip=' + zip.val() + '&country=' + country.val();
//start the ajax
$.ajax({
url: "process.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//alert (html);
if (html!='error') {
//show the pin long and lat form
$('.form2').fadeIn('slow');
} else alert('Error: Your location cannot be found');
}
});
//cancel the submit button default behaviours
return false;
});
});
process.php returns the longitude and latitude back in a variable as: "longitude,latitude". How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.
I hope this is helpful. This would be a generic AJAX call to a php page:
$.ajax({
type: "POST",
url: "scripts/process.php",
data: "type=query¶meter=" + parameter,
success: function (data) { //Called when the information returns
if(data == "success"){
//Success
} else {
//Fail
}
},
error: function () {
//Complete failure
}
});
The jQuery function you need is jQuery.get().
You can find other details here: http://api.jquery.com/category/ajax/
Sorry for the scarce details but you haven't provided source code.
I'm kinda new to jQuery but understand it for the most part. My problem is that when my ajax call which refreshes the entire div is done, all my dynamically created forms don't work. If you try and submit them, the event doens't work properly and just tries to do a normal form submit. I have all the other items such as links bound using the .live() which seem to work great. Just the form dies.
How do I rebind the dynamically created forms after the ajax call? They all have id of formname_id. I tried to use bind but it doesn't work as below. Any help is appreciated.
Here is the code
jQuery(document).ready(function(){
jQuery("form[id^='commentform_']").each(function(){
var id = parseInt(this.id.replace("commentform_", ""));
jQuery(this).bind('submit', function(e) {
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: "action="+ action +"& act_id="+ act_id,
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
});
});
Try doing something like this:
jQuery("form[id^='commentform_']").live('submit',function(){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
return false;
});
No need to loop over the forms to bind to them. If you can use delegate instead of live do so.
Why don't you over-ride the normal form submit:
function addNewitem() {
$('#new_item_form').submit(function() {
$.get("includes/ItemEdit.php", {
newItem: true
},
function(msg) {
isNewItem = true;
$("#new_item").hide();
$('#item_list').hide();
$("#item_edit").html( msg );
$("#item_edit").show();
editActiveEvent();
});
return false;
});
}
Don't forget to return false. or do a .preventDefault
I have gotten this to work adding the event in the function call and using event.preventDefault(); BUT of course only in FF. Doesn't work in IE7..
jQuery("form[id^='commentform_']").live('submit',function(event){
var id = parseInt(this.id.replace("commentform_", ""));
var action = jQuery('#action_' + id).attr('value');
var act_id = ('1');
jQuery.ajax({
type: "POST",
url: "ajax/modify.php",
data: {"action": action, "act_id": act_id},
success: function(response){
jQuery('#CommentsContainer_' + id).html(response);
jQuery('#commentform_' + id)[0].reset();
}
});
event.preventDefault();});
But IE7 still tries to sumbit the action. arrgggh.. Anything I'm doing wrong??