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.
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.