how to change my login button value when login is success?
i have popup error message when email and password is not registered also validate first using required in html if email format is correct and check if the email and password is empty
in this code pop-up error message is not appear when invalid credentials also button is already animate while the form have validate warning
$("#login").click(function(e)
{
$("#login").html('<i class="fa fa-gear fa-spin" style="font-size:24px"></i>');
setTimeout(function()
{
$('LOGIN_FORM').submit();
}, 5000);
});
in my 2nd code, the problem is no animate before logging in but all validation and pop up error message works.
$("#login").click(function(e)
{
$('.required').each(function()
{
if( $(this).val() == "" )
{
$("#login").html('<i class="fa fa-gear fa-spin" style="font-size:24px"></i>');
setTimeout(function()
{
$('LOGIN_FORM').submit();
}, 5000);
}
});
});
How can i change the login button if credentials meets database record ..
In the first function, the first thing you ask jQuery to do is to find #login and add the spinning gear icon. Then after 5 seconds, to submit the form. (Edited to add that it actually begins posting data immediately--the timeout probably never fires because there's no e.preventDefault() to stop the form from being submitted, assuming of course that the click function is the submit button being clicked.)
In the second function, you evaluate your form fields (presumably) and then if they're empty, you tell jQuery to add the Font Awesome, and start your timer. (I don't think you meant that, but that's why the spinning icon never gets added; if there's data in the .validate classes, the statement is unreachable.)
What exactly are you trying to do? It seems like you actually want to do an AJAX submit of the form, and change the button if it succeeds? Do you want the gear to be spinning while it's submitting? There's nothing client-side here that I can detect--it's going to do whatever the POST action is in your login form.
Related
i need to call a click event from another file...
On my index.php I have a 'select' to choose a name, once I did, I call by Ajax a form by the name I choosed before, this form is on espacio.php, once I complete the form I must have to click a button to save the info, when I click this button the info are passed by Ajax to espacio2.php and there is here where I show a success or a failure message.
This message shows on my index.php and this is good, but I want to hide it after a few seconds.
How can I call the click event from espacio.php?
This is a code that works only if a click is pressed on the same page:
$(document).ready(function(){
$(".botoncete").click(function(){
$(".prueba").fadeIn();
Esconder();
});
function Esconder(){
setTimeout(function() {
$(".prueba").fadeOut();
},2000);
}
});
I've already solved the problem, thanks to #Barmar, and as he said: "If you're sending the data by AJAX, you stay on the same page".
I really don't know what was I thinking...
I work on a php file that contains a simple register form. I send the data to my mysql database via jQuery.click event. When the data goes to database, a massage display below the button, after 3 seconds it disappear and the input areas clean by jQuery. If I don't refresh the page and keep going to send data to my database, when I click the button, data go to database, input fields clean but message doesnt appear second time. I hope you could help me. Here is the jQuery code that I use;
$(document).ready(function(){
$('#submit').click(function(){
$.post("add_user2.php", $("#addUser").serialize(), function(response) {
$('#success').html(response);
$('#success').hide(3000);
$("#users_name").val('');
$("#users_mail").val('');
$("#users_phone").val('');
$("#users_schoolnumber").val('');
$("#users_faculty").val('');
$("#datepicker").val('');
});
return false;
});
});
This is the problem:
$('#success').hide(3000);
You are hiding your message box so when you execute it again, the message of the box will be the response variable but you will not see it as it is hidden.
You should show your message box when you want to display the message.
For example like:
$('#success').html(response).show();
$('#success').hide(3000);
I have a contact form which is hidden when the page loads. The contact form can then be viewed by clicking the contact form button, causing it to slideUp and slideDown. The problem is that when the form is submitted the page refreshes and if there is an error message or a success message it is hidden because the page has reloaded, you have to click on the 'contact form' button to see it. I'm not great with jquery or php. Any help would be much appreciated. Once the form is submitted I need the messages to appear.
the website is http://www.carlisleironing.co.uk/index.php
My jquery is
$(document).ready(function () {
$("#contactLink").click(function () {
if ($("#contactForm").is(":hidden")) {
$("#contactForm").slideDown("slow");
} else {
$("#contactForm").slideUp("slow");
}
});
});
add the following (just before the last }); in your question):
if ($('#contactForm #error').size() > 0){
$('#contactForm').slideUp('slow'); // or just .show();
}
Test if the #error element is present and, if so, show the form. I'm not sure what your success message looks like but a similar test can also be one for that.
As for the other answers: yes, you can do an AJAX submit but chances are (and I'm assuming context here) that's out of the scope of this question. That would involve special request handling and additional validation librar(y/ies) added.
You can use ajax to submit the form and show the result without reloading the page:
$('form').submit(function() {
$.post($(this).attr('action'), $(this).serialize(), function(data) {
console.log(data);
});
return false;
});
I am assuming that when someone submits the form, the php page generates the errors, but the user is not able to see them, because the form is hidden by default on a page load.
You can name the submit button. If the user clicks the submit button, the value of the button is send with the get or post request. You can then change the behaviour of your php page to not have the contact form hidden if the form was submitted.
<input type="submit" name="theSubmitButton" value="Submit!" />
In php $_GET['theSubmitButton'] (or $_POST if you are using a post request) will be set if the user submitted the form, and it will not be set if that was not the case. You can use isset( $_GET['theSubmitButton'] ) to test if the user did submit the page and alter the class of the contact form accordingly.
Overview
I have div#lead_form that SlideDown in 5 seconds after page loads. And in that div, I have a submit button. Everytime someone clicks submit, the form within #lead_form will validate the input fields and refresh the page.
Issue
Everytime the form validates, it refreshes the web page and the div#lead_form SlideDown takes 5 seconds to slide in. What I want to do is, have a true false variable and check if the submit button has been clicked, if true, disable the div#lead_form SlideDown effect?
My HTML
<div id="lead_form">
<div id="button"></div>
</div>
My jQuery
$(document).ready(function() {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
});
Findings
This is not exactly what I'm after, but similar?
In your server side code check if the request is coming with your form submitted, and write the result as a javascript var in a given section on your page
if( isset($_POST['yourFORMFIELD']) )
{
echo "var postBack = true;";
}
then change your jQuery ready to
$(document).ready(function() {
if(!postBack) {
$("#lead_form").hide(0).delay(4000).slideDown(5000);
}
});
As there is a page reload you can not solve this using javascript only.
you have to somehow persist the state (if the form was submitted) and check that state after the page is reloaded.
you can do this either via a cookie or the local storage (local storage will only work in most recent browsers)
I have a form which users may submit information. The submission can be successful or it's not successful.
In either case, I want a dialog box to tell the user if it was a success or not.
The page loads itself on form submission. Ergo, the page is not submited through Ajax.
I know how to trigger the dialogbox by clicking a button / link etc.
But how can I use jQuery UI Dialog after form submission?
UPDATE
I have found the solution. You can read the solution in this thread.
Don't use a type='submit', but rather bind a jQuery event to a normal button, process the form via ajax. When you get results via ajax you can either show the results from the ajax request on the dialog (PHP generates the message on the dialog), or you can have a conditional that checks whether it was successful or not and then take the appropriate actions.
Here's an example with an in the form. (the coding is a bit sloppy)
$(document).ready(function() {
$('#submit').click(function() {
name = $('#name').val();
email = $('#email').val();
number = $('#number').val();
message = $('#message').val();
$.post("contact.php", //PHP file to send POST to
{ ajax: 'yes', name: name, email: email, number: number, message: message }, //POST fields to send
function(returned) { //What to do if the POST finishes. 'returned' is the value recieved back from the script.
if (returned == 'done') {
//PHP script returns the word 'Done'
alert('Submit successful');
});
} else {
alert('An error has occured');
}});});});
You should be able to bind an event handler to the submit event on the form.
$("form_name_here").bind("submit", function(){$("dialog").open()})
Or whatever the method is to show the dialog. I can't remember off the top of my head. The other option would be go use the jQuery form plug-in as I'm assuming you're using ajax to submit the form. With that you can pass methods in for all of the events related to form submissions. Before, after, success, fail, etc.