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.
Related
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.
I have 2 forms on my web page. I want to give the illusion that they are being submitted simultaneously. I need one form to process and if it fails, don't process the 2nd form. The first form is payment information. The 2nd form is an "ask question" form. How do I do this? I am using PHP for server side code. Her is a screenshot of my 2 forms for anyone wondering. Note: I removed the "Pay" button used to submit the Braintree form because I want there to only be one submit button - the plugin's "Post Question" button.
How do I begin the overall submission process for both forms using only 1 button?
How do I restrict the 2nd form to be posted only after the first goes through successfully?
This JSFiddle should work.
It simply has a simple conditional factor in the first form (which you can modify to check for correct payment info), and the second form has the submit button. If the first form's information is incorrect, it will not send by using a return false;. If it does go through, then it first sends the first form with form.submit(); and then goes through with the second form.
Edit: The above answer just sends both forms - it does not check that the first one goes through, but it insteads does some basic JS validation.
So supposing that you had the two forms (because your imgur link was broken and I can't tell what they really look like):
<form action="braintree.php">
<!-- Payment options -->
</form>
<form action="questions.php">
<!-- The questions you want -->
<button>Submit</button>
</form>
And supposing that you have the braintree.php file: (you are using PHP, right?)
<?php
// send data to braintree
if(/* payment goes through */) {
echo "0"; // echo error code 0 (no error) for JS
} else {
echo "1"; // echo error code 1 (error) for JS
// if you can get an error back from braintree,
// then you can add it here -- it will be sent
// back to JS and you can show it to the user
}
?>
And supposing that you have JQuery (JS) like so:
$("button").click(function() {
// manually send first form with AJAX
$.ajax({
url: "braintree.php",
method: "post",
asynch: false, // so that the second form waits for this request to finish
data: {
// put in all the data to send in the braintree file here
fname: $("#fname").val();
lname: $("#lname").val();
}
}).done(function(data) {
// data will be the response from "braintree.php"
if(data == "0") {
return true;
} else {
// if you have a more specific error, you can alert() it here
return false;
}
});
});
This code is untested, so tell me if it doesn't work.
I have a donation page I am working on. After filling out the form, submit it is pressed, sends data to a php page, and either returns html to be displayed in a modal, or uses javascript to allow the page to be submitted. Because of the asyncronous nature of javascript, I'm not sure how to fix this. When I click submit with valid data, it checks the data, switches the boolean to true, but does not submit as it was checked before the data was returned.
This web page is also running in wordpress.
Here is the code.
var check = 0;
function noError(){
check = 1;
}
jQuery('#donateform').submit(function() {
jQuery.post(
'validate.php',
jQuery("#donateform").serialize(),
function(data) {
jQuery('#overlay_msg').html(data);
}
);
if(check != 1)
event.preventDefault();
else
self.submit();
});
In validate.php it calls
function noError() {
check = 1;
}
If the data is valid.
I will keep looking into it.
Thanks!
Not sure if i understand completely but if your problem is order of process: IE, click submit, validate, then actually submit via ajax then i would suggest the following.
replace the submit type input with a button
when this is clicked have it run your validation, if validation passes then have that function submit the form via ajax for you
html
<button type="button" id="submitButton">submit</button>
$('#submitButton').click(function(){
//run validation
if (validate == true){
ajaxSubmitFunction();
}
});
ajaxSubmitFunction(){
//run your ajax.
}
This has cleared a lot of headaches for me when validating and then submitting forms via ajax
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.
i have a form that works perfectly fine with mozilla and IE but on google chrome there is a slight problem
i am using ajax to submit my form that is there is no submit button ,in IE and Mozilla its working fine but in google chrome when i press enter the form submits and the page redirects to the main page( this is another problem page refresh manipulation in ajax)
how can i stop the page from submission while pressing enter button ?
Each event has its default action (a button will click, a hyperlink will take you somewhere) and in your case an ENTER on a form element will submit the form. Such actions can be prevented. Browsers differ from their implementation to prevent this default action, but tools like jQuery or MooTools help you with this.
Clear details on how to go about can be found here:
http://www.quirksmode.org/js/events_early.html#link4
The idea is either to write an onsubmit handler on the form element as such:
<form id="foo" onsubmit="doYourAjaxThing(); return false">
Or to have an event listener attached to your form by javascript and do something like this (jQuery syntax):
$("foo").submit(function(event){
doYourAjaxThing()
event.preventDefault();
});
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
Return false from the function submitting the form.
$("input").keypress(function (e) {
if (event.keyCode == 13) {
//Put whatever you would rather happen here........
return false; //this cancels the SUBMIT action
}
});
Good luck, Patrick