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.
Related
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 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.
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 3 tasks :
1) Submit the message in a textarea when the user press enter button on keyboard or click "submit" button.
2) Use php/mysql to save the message onto database.
3) After save it onto database, need to show the updated message onto the website back.
The problem is... There is no php script that can change "Enter" button event, so I need to use javascript, if I use javascript, I need to create a new page sendMsgToDB.php to submit the data to database by the following javascript/ajax :
<script type="text/javascript">
function gg(e) { //sumbit the form when user press Enter button
key = e ? e.which : window.event.keyCode;
if(key==13) {
$.ajax({
type: "POST",
url: "sendMsgToDB.php?msgid=" + msgid,
data: dataString2,
success: function() {
$('textarea.resposting').val('');
}
});
}
}
$(function() {
document.getElementById("resposting").onkeypress = gg;
});
</script>
I use mysql to retrieve 10 latest messages from database and use pure php to display the messages onto the website. If I want to show updated messages onto website after the user submit the data through the textarea by pressing "Enter" button on keyboard, sure I need to call the function Display_New_Msg() after the data is complete send to database. If I use Javascript/ajax to sumbit data, how to use javascript/ajax/jquery determine whether or not the data is complete send to database?
Seriously I don't like to use javascript/ajax/jquery, but I force to use them because I need to change the "enter" button event, is there a way to change "enter" button event by using php? How to make the press "enter" button act like click "submit" button to submit the form <form name="frmMsg" action="currentPage.php">, the action will go to the currentPage.php, so the page is refresh, so it will re-execute the function Display_New_Msg() automatically to show the new message, so don't need to dertermine whether or not the data is complete send to database anymore.
If I use Javascript/ajax to sumbit data, how to determine whether or not the data is complete send to database?
It all comes down to the response from the resource that's handling the AJAX request. In this case, sendMsgToDB.php. That script needs to make sure it's doing what it needs to do and that everything's getting into the database (usually a lack of error is sufficient), then sending a response accordingly. If there is an error on the server, return an HTTP error code (such as a 500 server error) to indicate this.
The jQuery .ajax() call then determines the call-back function to use based on the response from the server. Your code currently handles a successful response:
success: function() {
$('textarea.resposting').val('');
}
In order to handle an error response, you'd want a second callback for error:
error: function() {
alert('There was an error!');
}
The HTTP response codes exist for exactly this purpose, so that clients consuming those responses can easily determine the status of the request.
Edit: Conversely (and perhaps more to the spirit of your question, if I'm now re-interpreting you correctly), you can use the jQuery submit() function to submit the form in your key press logic. That way you don't have to use AJAX and can just use a regular form submission and response, which you indicate to be your preference. Something like this:
if(key==13) {
$('#myForm').submit();
}