var dataString = 'name=' + $("input#name").val() + '&email=' + $("input#email").val() + '&comments=' + $("textarea#comments").val();
$('#reply_message').addClass('email_loading');
// Send form data
$.ajax({
type: "POST",
url: "SendMail",
data: dataString,
success: function () {
$('#reply_message').removeClass('email_loading');
$('#reply_message').addClass('list3');
$('#reply_message').html("Mail sent sucessfully");
$('#reply_message').delay(500).fadeOut(3500);
$("input#name").val('Name');
$("input#email").val('Email');
$("textarea#comments").val('Comments..');
}
});
return false;
});
});
This is my ajax script for sending an email everything is working fine for the first time user is filling the form and submitting but if user is filling form again and click on send button this time only email is coming not showing the success message and loader. One more thing currently in my text fields the value=name is working as a label so I put the values again in success function but what about the text area?
In the success: portion of your Ajax you are using fadeOut.
I do not see anywhere that you are fading back in.
If you either remove fadeOut from the success or add fadeIn to the loading message it should work well.
Related
I am trying to enable a submit button for a form only if the user has input the correct captcha (which is displayed as a image) value inside a textbox. captcha is the id of the textbox.
For each key up on this textbox there will be an AJAX request which is sent to a file called a ErrorProcessing.php.Then it will provide a HTML variable which is either "wrong text entered" or null. The submit button then gets enabled only based on that value. This works.
However the problem is that for every key up on that textbox submit button first becomes enabled and then becomes disabled. In the end it is okay. But I am trying to get rid of the enabling the submit button for every key up if the HTML variable is null. The rest of the code is okay. register-submit2 is the id of the submit button. Can any one help me?
$(document).ready(function() {
$("#captcha").keyup(function(e) {
var captcha = $("#captcha").val();
var datastring = 'captcha=' + captcha;
$.ajax({
type: "POST",
url: "my_url/ErrorProcessing.php",
data: datastring,
success: function(html) {
if (html == "wrong text entered") {
$('#register-submit2').prop('disabled', 'true');
} else {
$('#register-submit2').prop('disabled', 'false');
}
}
});
});
});
Use true/false without quotes. String form will be considered as true.
$('#register-submit2').prop('disabled', false);
Or you can skip the if using
$('#register-submit2').prop('disabled', html == "wrong text entered");
I'm working on a message board and inputs forms have to be validated if javascript is disabled. If javascript is enabled it has to have AJAX to stop refresh and submit form.
I have an html form which is validated by php. And now I'm trying to add jquery and ajax to stop page refresh.
I added a loading gif and inactive inputs field on submit button. But when I add $.ajax gif won't stop spinning and fields won't become active. After I refresh the page I can see that the input data was added to database.
I'm quite new in using ajax and maybe you could help me find a solution to my problem.
here is my code:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
// getting input values by id
var fullname = $("#fullname").val();
var message = $("#message").val();
// array for input values
var data = { fullname : fullname,
message : message };
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
//dataType : 'json',
data: data,
cache: false,
success: function(data){
alert('success');
}
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
});
I get success and input value alert, when I use dataType : 'json', I get error alert.
I would appreciate any kind of help.
maybe once you display .gif image than you are not going to hide the same .gif image again although your ajax finished or stop or fail (in any case).
So, on success of ajax add below two lines to hide .gif and enable text fields.
//enabled all the text fields
$('.text').prop("disabled", false);
//hide the loading sign
$('.loading').hide();
Whole code seems like this,
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
data: data,
cache: false,
success: function(data){
//enabled all the text fields
$('.text').prop("disabled", false);
//hidethe loading sign
$('.loading').hide();
alert('success');
}
});
I have an email form at www.ezrite.com/email_form.php
Using this click function in my page to capture an email and trigger download for user of a zip file:
$('#toinfo').click(function(e) {
e.preventDefault();
window.location = $(this).parents('a').attr('href');
setTimeout(function(){
window.location="http://www.ezrite.com/d/infopage.html";
}, 1000);
However, the email is never sent and I'm wondering if the anchor tag is hijacking the button and preventing the email from posting??
GOAL: To trigger a download of a zip file, send email input to an email, and to redirect the page when the button is clicked..
IDEA: I'm thinking of using a second setTimeout at this point
On the click of the button, you can initiate the ajax command. Once the data is POSTED to the url, it will call a done function. In your case to redirect the user to the next page.
$('#toinfo').click(function(){
$.ajax({
type: "POST",
url: "email_form.php?do=send",
data: { femail: "'+$(['name=femail']).value()+'"}
}).done(function() {
window.location="http://www.ezrite.com/d/infopage.html";
}).fail(function(){
alert("Could not send data.");
});
});
In a div on my page called total_records is a database field binding which counts up the total records submitted. i use jquery for the submission so the page doesn't refresh when i click on the button. But i'm only able to get the total records submitted when i refresh the page or press F5. i know there a way out to add 1 to the binding on the page on button click but i don't know how. this is the jquery i use for the submission
$(document).ready(function(){
$("#form2").on('submit',function(event){
$("#comment_loader").fadeIn(); //show when submitting
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function(msg) {
$('#new_entry').html(msg);
$("#comment_loader").fadeOut('fast');
$("#msg_div").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your comment has been saved </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 3000);
$("input[type=text]").val("");
});
});
});
Either you can have have the insert.asp script return the total number of records submitted or within success you can call the script that runs the appropriate query and in either case you can use jQuery to update the div with the number returned:
$('div.total_records').text( 'number-of-records-submitted' );
If you do it this way you would not need to refresh the page.
I have a menu bar which contains links for web pages. Now I want to add a login form with username and password with submit button in dilaogue box with locked screen on clicking of particular web pages. Its a kind of double login authentication.. As soon as log in submit button is clicked it should go to database to check the entered credentials and if it is correct will lead or show the clicked link..
To check the credentials I have made ajax call to server side code.. but I dont know how to add dialogue box and after success lead to required clicked page...
Here is my ajax call code..
$.ajax({
type: 'GET',
url: 'logincredit',
async:false,
dataType: "text",
success: function(data) {
}
});
Please guys help me ..
Thanks in advance..
You can add dialog script inside the success function.
like this
success: function(data){
if(data.d==true)
//show dialog code
else
//show something else
}