I have a php form that works perfectly. However, when the form submits, I want to display a modal and take the user back to the homepage. I have looked this past two hours online but have found no conclusive evidence. My current code is;
if($sentMail) //output success or failure messages
{
?><script>
$(function() {
$("#thankyouModal").modal();
});
</script>
<?php
}else{
die('Could not send mail!');
}
The form collects data then sends all data as an email. I have tried using only php, jquery, amongst everything else. I simply want a modal that says a brief thank you, your form has submitted whilst re-directing the user to the index.html page. Does anyone have any ideas?
Regards,
Michael
If you want to show the message while the form is posting (whether or not it will succeed), use jquery to swallow the onSubmit() event.
$('form').on('submit', function(e){
e.preventDefault();
$("#thankyouModal").modal();
$('form').submit();
});
If you care about if the email is successful, pass a variable back to the view and conditionally show the modal, but this will be serverside validation (will only know after form submission and re-rendering of the view). Otherwise look into doing an asynchronous post with $.ajax
Related
I am facing a problem and I am already stuck for ages, hopefully one of you can help me.
The Problem:
- I created a form in HTML and I connected Jquery to it in order to validate whether input is correct (also to give the user feedback whether answer is correct). When individuals press the submit button the information is also send to my database in phpMyadmin (this works.
The problem is, how can I make sure that the information is only send to my phpMyadmin database when al the input is correct? I know with jquery when all the input is correct but how can i connect this information to my php code?
To be more specific i created a javascript/ jquery variable like correct_answers which is 13 when all questions are correct (as I have 13 questions), but how can I send this information (which is in correct_answers) to php?, so that I can create an if condition within php in order to send the info yes or no?
Thanks in advance!!
You can listen for the form submit event to wrap your validation logic with. If the form passes validation do nothing and it will submit normally, if not display a notice and prevent the form's submission:
$('#myFormId').submit(function(e){
var failed = false;
// logic for validatiom
// use event object to prevent submission
if (failed) {
alert('error in form');
e.preventDefault();
}
});
client side:
<input type="hidden" name="correct_answers" id="correct_answers" value="0">
<javascript>
checkForm = function(){
...
...
$('#correct_answers').val = 13;
form.submit(); //-- or ajax();
});
server side:
<?php
var_dump($_POST['correct_answers']);die('nice!');
I'm new to web design, and I have a question about cache.
I have a page called buy-form.php that gets form data from form.php. I want it to have the cache error that makes Google Chrome read "Confirm Form Submission" when the is page accessed manually.
For example, I only want the page to be accessible when form data is submitted. If someone were to type in the page on the address bar, it should have an error.
A javascript alert("Confirm Form Submission"); can handle your request, and be effective across browsers. Call a function for the event <input [other attributes here] onclick=myFunction()> that has the alert you want. The alert will stop execution of the page until it is confirmed (selected). Attach a security code to your form submission and PHP can check for it and die; if it is not valid.
Add this statement to your buy-form.php:
if(empty($_POST))
{
echo "<script type='text/javascript'>alert('Error!');</script>";
}
You can replace 'Error!' to whatever you prefer
I have two web pages: index.php and handler.php
index.php has a form, that submits to handler.php like this:
handler.php?input=some+data
My goal is to do something so that browser's back button takes me to index.php?input=some+data instead of simply index.php. How can I do that? Ideally, I'd prefer to do as much as possible using php instead of js
Solution:
I added submit handler that does this:
function onFormUpdate()
{
window.history.replaceState({} , '', 'index.php?' + document.forms[0].serialize());
}
this way, form will be submitted not from index.php, but from index.php?input=some+data. That is, back button will bring me back to index.php?input=some+data.
You can do this by: (JS)
history.replaceState({}, '', 'index.php?input=some+data');
Before submitting.
But I don't think you need to do this, my browser (firefox, though I think chrome would do the same) saves form data before submitting, so when I go back from the handler, the form still have the input.
I'm using a HTML form to allow a user to upload some files to a java servlet and start some analysis. When the user clicks submit I use a javascript function to do some quick validation on the form i.e. have they selected the right options, entered a valid email etc.
The form data is then passed to the doPost() method in my servlet where I do some more complex checking for errors in the input data. After this the user is either forwarded to an error page or notified that the job has been started.
What I would like to do is display a progress page while the error checking is taking place in the servlet. It seems I can't forward the user to the progress page in the servlet as this commits the response and I can't carry on the checking and then later forward the user to the relevant page. This is explained here.
I think the answer might be to display the progress page when the user clicks the submit button and before the form data is sent to the servlet. This could be done in the javascript validation in the form. So far my attempts at this have failed. I think I'm misunderstanding something!
I've tried the advice listed here to use window.location.replace(...) but it doesn't seem to work. I've also tried using a button instead of a submit input type and defining the form action in the javascript as shown here.
My javascript validation function is
<script language="JavaScript">
<!-- // ignore if non JS browser
function Validator(form) {
var error = "";
if (form.family.value == "") {
error += "Please upload a family file\n";
}
if (error != "") {
alert(error);
return (false);
} else {
window.location.replace("http://stackoverflow.com");
return (true);
}
}
and my form is submitted using <form method="POST" enctype="multipart/form-data" action="runDupliPHY.do" onsubmit="return Validator(this);"> from a submit input.
Any examples of how to show a progress page before submitting the form so the user sees the progress page while the servlet processes the form data would be great.
We have a booking form that POSTs to the parent company website. Because this is a different domain we need to implement the GA _linkByPost to pass the GA tracking cookie info across domains.
As the booking form is in a .NET user control it does a postback. On postback we validate, wrap up the booking info, and write a form back to the client with hidden elements required by the target booking engine and add line of javascript to submit the form.
Below is the javascript function I'm using to submit the form:
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
thisForm.submit();
}
And the relevant form info:
<form id="PostForm" name="PostForm" action="ClientBookingEngineUrl" method="post" >
booking form info in here
</form>
The result is that we fill in the form, hit submit which does a round trip to the server generates a new form and POSTs the info. This all works fine apart from the URL loses the GA cookie info from the query string. If I comment out the form submit line and look at source code I can see the GA cookie info on the querystring - but when posting, I do not see the querystring (using Fiddler).
To clarify:
The above technique works and does what we want with regards to POSTing form data to the booking engine and taking the user there.
If the submit line is commented out you can see the form with the modified action that has the GA stuff appended (using Firebug).
If the form is submitted with the submit line, the querystring info is removed (confirmed by Fiddler).
Am I missing something obvious? Are there some gotchas regarding JS submit, form POSTs and querystrings? Or is there a simple trick I'm missing?
Cheers
EDIT 1
An oddity has occured.
If I alert the form action before and after the _gaqPush then we can see the URL in its before and after state and it's as expected.
alert('1 form action = ' + thisForm.action);
_gaq.push(['_linkByPost', thisForm]);
alert('2 form action = ' + thisForm.action);
Alert 1 shows the pre-modified action and alert 2 shows the action with the GA info.
With the alerts in place it submits WITH the GA info in the query string.
If I comment out the alerts the GA info is NOT in the query string...
I'm starting to think the form or something is not ready so I'm trying it with JQuery's document ready.
EDIT 2
Wrapping the method call in document ready doesn't help. I'm confused as to why action URL is correct AFTER displaying it in an alert but incorrect if I don't alert it.
Answering this for posterity.
The problem is the _qaq (Google Analytics Queue) hasn't had time to modify the form before the call to submit() the form.
The solution is to push a function onto the _gaq object that submits the form so it will happen directly after the form modification is done.
function postBookingForm() {
var thisForm = document.getElementById('PostForm');
_gaq.push(['_linkByPost', thisForm]);
_gaq.push(function() { thisForm.submit(); });
}
I tried a simple HTML page that calls _gaqPush and submits immediately. This also fails.
Adding a 1000ms delay works (for the most part) so I suspect the alerts just gave the GA script time to modify the form.
I'm closing/accepting this as it seems down to submitting the form too quickly after the GA call.