Javascript alert issue on form: Alert prompt keeps appearing - javascript

Can't provide a link to this project due to NDA, but hopefully, the code I'll post will be more than sufficient to solve this.
I'm doing a simple PHP contact form. Nothing crazy. Two text input fields and a checkbox to validate age. If you leave the form unchecked, you can't enter the contest.
I have the validation working....to a point. Here's what is happening. When I keep the checkbox unchecked and I try to submit the form, I get an alert prompt saying I'm not 18 or over. The JS is like this:
if (!document.forms[0].age.checked)
{
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
}
That works, and I click "OK", but then the alert prompt immediately comes back! And I'm stuck essentially in a loop.
Anyone know how to properly do this so I can get the form to work?

Have you tried
if (!document.forms[0].age.checked) {
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
return false;
}

It must be checked in the form submit event (here inline but should be unobtrusive):
<form onsubmit="return validate(this)"...
and do
function validate(theForm) {
if (!theForm.age.checked) alert("Please....");
return theForm.age.checked;
}

You could try something like:
var validateForm = function (e) {
e.preventDefault();
var formEl = document.forms[0].age;
if (formEl.checked) {
alert("Sorry, you must be over 18 to enter...Please check the over 18 box to proceed");
}
e.stopPropagation();
}
Instantiate the function as you normally would, like:
var button = document.getElementById('submit');
button.addEventListener('click', validateForm, false);
Fiddle

Related

Form required fields not working when disabling submit for a few seconds

I have a submit form that needs to be disabled for a few seconds because some users are clicking more than one time since it takes a while to load, sending the request more than once.
Searching on here I have found the next code:
function disableSubmit(){
submit.value = 'Sending...';
document.getElementById("submit").disabled = true;
setTimeout(
function(){
document.getElementById("submit").disabled = false;
submit.value = 'Send';
},
5000);
}
const submit = document.getElementById("submit");
submit.addEventListener("click", disableSubmit);
I have made some additions to also change the text. The thing is that by doing this you can click the submit button without completing the fields (name, email... etc). The normal behavior is that it will throw an alert telling you need to complete this fields if they are empty, but after my personalized function the required fields are not required anymore. Any ideas? I guess it needs to take the submit normal functioning first and then my personalized function. How can I achieve this goal? Thanks

How to go to another HTML page, if form is validated and stay in the same page if it is not validated?

So I have a HTML file where I collect some input, and I validate it using JavaScript.
If I give the wrong type of input I get the alert window which I have given. When I press 'ok' in the alert window it goes to the target page instead of staying in the same page. How do I fix this error?
function validate()
{
var x = document.getElementById("zc").value;
if (x.toString().length != 6) {
alert("Enter a valid zip-code which contains 6 digits");
x.focus();
return False;
}
else {
alert("Form Success");
return True;
}
}
My HTML file is given below, I have skipped the parts where I collected input. If it is false shouldn't be in the same page instead of going to welcom.html.
<form action="welcome.html" onsubmit="return validate()">
<button type="submit">Submit</button>
</form>
you could use the window.location.href method. I will leave a link from w3schools where it explains how to redirect to another page.
link: https://www.w3schools.com/howto/howto_js_redirect_webpage.asp

Show alert for HTML5 required field validation for no longer visible input

I've got a multiple step form, so when I finally come to the submit button, many of the required inputs are no longer visible for the user, therefore the HTML5 alert can't be apreciate by the user. There's a way to show an alert telling what input is incomplete?
JavaScript example:
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("The form is incomplete");
return false;
}
}
It's explained here: https://www.w3schools.com/js/js_validation.asp

JavaScript Form Validation Query

I've just wrote some validation code so as to check if either of my radio buttons from my web form have been selected before they are submitted. I've just starting learning php as I want to be able to store the value of each radio button in a .csv file.
Because I have my action attribute set to trigger a php script, I get my alert box, but as soon as I click OK after pressing submit the browser goes straight to the php script (inevitably).
Is there a way I can return to my initial index.html after the alert message?
I have not actually written any php as yet, so would this go in the php script or the javascript?
Heres my code so far:
$("#submit").on("click", function() {
var radio = $("input[type=radio][name=emotion]")[0].checked;
var radio2 = $("input[type=radio][name=emotion]")[1].checked;
var radio3 = $("input[type=radio][name=emotion]")[2].checked;
if(!radio && !radio2 && !radio3) {
alert("You must select at least one word!");
}
else {
alert("Please rate the next item!")
}
});
In Jquery you should use .submit() function to validate a form.
Then to avoid to submit the form you can use the function event.preventDefault()
And if you want to go to the index you can use window.location = "yourURL"
You must use form.onsubmit().
For example, if your form's name is myForm:
document.forms['myForm'].onsubmit = function()
{
if (this.elements['emotion'].value)
{
alert("Please rate the next item!");
}
else
{
alert("You must enter at least one word!");
return false;
}
}
And after alert "Please rate the next item!" form will be send.
Actually you can use jquery $.post() , an easy solution is just to post your php page without leaving index page.
http://api.jquery.com/jquery.post/
$.post( "yourpage.php" );
You probably have the input type of the submit button as submit? Set this to button, so the action doesn't take place and only jQuery is executed.
But then you have to submit the form by jQuery when validation was successful:
document.myFormId.submit();

Text modified by innerHTML won't stay visible

I have a function that is supposed to display a message in a P element if conditions are met. The function runs fine but the text that is sent to 'output1' appears briefly when you press the button and then disappears. I have tried putting the JS in the head and in the body but it doesn't seem to make a difference. Any ideas? Thanks.
HTML:
<p id="output1"><p>
Javascript:
<script>
function logicProcess() {
// alert('function launched');
if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
}
else {
document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
}
}
</script>
The reason the innerHTML is not staying visible is because there is some type of onclick method that is resetting the form. If that is true edit your onclick method like so:
onClick="function();return false;"
The change in here is the ;return false;
You haven't show us how you are calling that function, but the odds are that you are doing so in response to a form's submit button being pressed.
This will modify the DOM, and then submit the form, which will cause a new page to be loaded.
You need to cancel the default behaviour of the form to stop it being submitted.
function logicProcess(evt) {
// All your other code
evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);
I think you are using input type submit, so the meaning of submit button is to submit the form and reload it, that's why your output is not holding your inner html.
change it to
<input type="button" />

Categories