So I have a form, which asks for the user's personal information. At the end of the form I have set a modal to pop up, which says "Thank you for signing up with us etc.". However, even if you leave all the fields blank and you click on the button at the end of the form, the modal still pop up saying "Thank you for signing up with us...".
How can I set the modal to appear only after all the fields are completed?
Note: I need the personal information to remain on the page after I click the button at the end of the form. I changed the type from submit to button, but as soon as I fill in the last question and i click on the button, all the input disappears.
Any help would be much appreciated !
Here's the form:
<form id="personalinfo" name="personalinfo" onsubmit="ask()">
<b>Please sign up with us before you proceed:</b><br>
First Name: <input name="firstname" required="" size="40" type="text"><br>
<br>
Last Name: <input name="lastname" required="" size="40" type="text"><br>
<br>
Age: <select name="dropdown">
<option value="1">10-18</option>
<option value="2">19-25</option>
<option value="3">26-35</option>
<option value="4">36-45</option>
<option value="5">46-55</option>
<option value="6">56-65</option>
<option value="6">65+</option>
</select><br>
<br>
Gender: <input name="gender" required="" type="radio" value="male"> Male<br>
<input name="gender" required="" type="radio" value="female"> Female<br>
<input name="gender" required="" type="radio" value="other"> Other<br>
<br>
<br>
<button id="OK!">OK!</button>
</form>
<div id="myModal" class="modal" type="button">
<div class="modal-content">
<span class="close">×</span>
<p>Thank you for signing up with us ! You can now proceed to the test.</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("OK!");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function()
{
modal.style.display = "block";
}
span.onclick = function()
{
modal.style.display = "none";
}
window.onclick = function(event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
</script>
</form>
The reason why your form is cleared is that your form is submitted to the server, and hence the page reloaded with an empty form.
In my opinion, there are two ways in which you could handle this:
In the first case you would send your form, process it on the server, and then redirect to a page containing a welcome message (the content of your modal). But in this case your form would be cleared on submission.
In the second case, you want to do several things in the right order:
As for the code, in your HTML:
onsubmit="ask()"
from your<form>
tagtype="submit"
attribute to your submit buttonstyle="display:none"
to your<div id="myModal">
.id="modalText"
attribute to the<p>
tag inside your modalIn your script, add the following after your code (you could use jQuery to make it simpler, however this is not mandatory at all, see this):
Then an example of server-side processing in PHP (
process.php
located in the same folder as your HTML form):Keep in mind that this code is quick'n'dirty stuff, just to address your question.
In real-life code,you would ask an email and password in your form, then you would need much more server-side stuff: you would check that the email doesn't already exist in your database, etc.
Feel free to ask if anything isn't clear.