0

I created two webpages and the Entrance page is supposed to prevent under aged users from entering the webpage, almost like a password page. I got the submit button to do almost everything it is supposed to do, except sending the user to the next page. Could somebody please help me solve this issue?

here is the code for the Entrance page:

<!DOCTYPE html>

<html>

<head>
<!-- this is how you add a code comment-->
 <title> Entrance Page </title>

</head>

<body bgcolor="#CEF6F5">

<form>

<h2 align=center><u> Please fill out the following information to proceed to the festival: </u></h2>

<br><br>First Name:<input type="text" name="First Name" id="first">    Last Name:<input type="text" 
name="Last Name" id="last">

<br><br> age:<select name="age" id="age">
<option value="1"> below 10 </option>
<option value="2"> 10 </option>
<option value="3"> 11 </option>
<option value="4"> 12 </option>
<option value="5"> 13 </option>
<option value="6"> 14 </option>
<option value="7"> 15 </option>
<option value="8"> 16 </option>
<option value="9"> 17 </option>
<option value="10"> 18 </option>
<option value="11"> 19 </option>
<option value="12"> 20 </option>
<option value="13"> above 20 </option>

</select>

<br><br><br>

<p align="center"> <button type="submit" onclick="run()"> Submit </button> </p>

</form>

<p><p align=center><img src="oktoberfest(4).jpg" hight="600" width="1200" border="3"></p>


<a href="Cost%20of%20an%20Event.html" id="pass"> </a>
<a href="Cost%20of%20an%20Event%20Entrance%20page.html" id="block"> </a>

<p><p id="p1">  </p>

<script>
    
    var firstName = document.getElementById("first").value 
    var lastName = document.getElementById("last").value
    var age = +document.getElementById("age").value
    var isNum = " ";
    
    isNum = isNum + isNaN(firstName)

    function run() {
        var firstName = document.getElementById("first").value 
        var lastName = document.getElementById("last").value
        var age = +document.getElementById("age").value
        if (age < 10) {
        window.alert("your too young to enter in this event!")//go back to Entrance page
    } else if (age > 10) {
        window.alert("welcome to the Oktoberfest website!");
        window.location.replace("Cost%20of%20an%20Event.html");//go to main website
    } else if (age == 10) {
        window.alert("lucky! you are just barely old enough to join!")
        window.location.replace("Cost%20of%20an%20Event.html");//go to main website
    }
}

    
if (isNum == true) {
    window.alert("your name cannot be a number");    
}//go back to Entrance page

    
 /*   while (firstName.length ==0) {
        window.alert ("you didn't enter a first name ")
        document.getElementById("block").value//go back to Entrance page
        
    while (lastNamet.length ==0) {
        window.alert ("you didn't enter a last name ")
        document.getElementById("block").value//go back to Entrance page
   */     

</script>

</body>


</html>
Bennet Schmidt
  • 1
  • 2
  • your form is being submitted to the server – Daniel A. White Feb 19 '21 at 19:51
  • Add `return false` to the end of `run()` function. – pavel Feb 19 '21 at 19:54
  • submit buttons submit the form; by default the form's action is the page it's on. Try turning your type="submit" into type="button" then it won't perform the default submit action and will call `run(). – mykaf Feb 19 '21 at 19:54
  • opening
    tag needs parameters, learn the basics here: https://www.w3schools.com/tags/tag_form.asp also: https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission
     – ikiK Feb 19 '21 at 19:57
  • @user1599011 thank you so much! that solved my problem instantly. – Bennet Schmidt Feb 19 '21 at 20:02

3 Answers3

0

You still haven't made the adjustments to your form that I mentioned in my last answer:

You need to specify an action and a method for your form so that it knows how and where to submit the form data. For example:

<form action="destinationURL" action="post">

Learn about the form element here.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

I edited the code as you want to do with documentation.

firstly: you must add action and method to the form like this

<form action="Cost%20of%20an%20Event.html" name="entranceform" method="POST">

secondly: pass the event object to the run method on submitting button like this

<p align="center"> <button type="submit" onclick="run(event)"> Submit </button> </p>

thirdly: prevent the default action of the submitting event inside run() like this

//Prevent default behavior of submit event;
    event.preventDefault();

fourthly: modify if conditions and submitting form like this:

 } else if (age >= 10) {
    window.alert("welcome to the Oktoberfest website!");
    // submitting form to the new page 
    // age >=10
    document.entranceform.submit(); // submitting
    //window.location.replace("Cost%20of%20an%20Event.html");//go to main website
} 


full code is:

    <!DOCTYPE html>

<html>

<head>
<!-- this is how you add a code comment-->
 <title> Entrance Page </title>

</head>

<body bgcolor="#CEF6F5">

<!-- adds method of submmiting and action url for the location to going. -->
<form action="Cost%20of%20an%20Event.html" name="entranceform" method="GET">

<h2 align=center><u> Please fill out the following information to proceed to the festival: </u></h2>

<br><br>First Name:<input type="text" name="First Name" id="first">    Last Name:<input type="text" 
name="Last Name" id="last">

<br><br> age:<select name="age" id="age">
<option value="1"> below 10 </option>
<option value="2"> 10 </option>
<option value="3"> 11 </option>
<option value="4"> 12 </option>
<option value="5"> 13 </option>
<option value="6"> 14 </option>
<option value="7"> 15 </option>
<option value="8"> 16 </option>
<option value="9"> 17 </option>
<option value="10"> 18 </option>
<option value="11"> 19 </option>
<option value="12"> 20 </option>
<option value="13"> above 20 </option>

</select>

<br><br><br>

<p align="center"> <button type="submit" onclick="run(event)"> Submit </button> </p>

</form>

<p><p align=center><img src="oktoberfest(4).jpg" hight="600" width="1200" border="3"></p>


<a href="Cost%20of%20an%20Event.html" id="pass"> </a>
<a href="Cost%20of%20an%20Event%20Entrance%20page.html" id="block"> </a>

<p><p id="p1">  </p>

<script>
    
    var firstName = document.getElementById("first").value 
    var lastName = document.getElementById("last").value
    var age = +document.getElementById("age").value
    var isNum = " ";
    
    isNum = isNum + isNaN(firstName)

    function run(event) {
        //Prevent default behavior of submit event;
        event.preventDefault();
        var firstName = document.getElementById("first").value 
        var lastName = document.getElementById("last").value
        var age = +document.getElementById("age").value
        if (age < 10) {
        window.alert("your too young to enter in this event!")//go back to Entrance page
    } else if (age >= 10) {
        window.alert("welcome to the Oktoberfest website!");
        // submitting form to the new page 
        // age >=10
        document.entranceform.submit(); // submitting
        //window.location.replace("Cost%20of%20an%20Event.html");//go to main website
    } 
/*
        !! you do not need to that anymore
        else if (age == 10) {
        window.alert("lucky! you are just barely old enough to join!")
        window.location.replace("Cost%20of%20an%20Event.html");//go to main website
    }
    */
}

    
if (isNum == true) {
    window.alert("your name cannot be a number");    
}//go back to Entrance page

    
 /*   while (firstName.length ==0) {
        window.alert ("you didn't enter a first name ")
        document.getElementById("block").value//go back to Entrance page
        
    while (lastNamet.length ==0) {
        window.alert ("you didn't enter a last name ")
        document.getElementById("block").value//go back to Entrance page
   */     

</script>

</body>


</html>
Mukhtaar Aziz
  • 24
  • 2
-1

You may use:

<form onsubmit = "run()">

and declare your submit button as of type submit.

<button type="submit">Submit</button>
Ashenafi Semu
  • 149
  • 1
  • 1
  • 10
  • [Inline event handlers should not be used](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991) and you don't need JavaScript to submit form data. – Scott Marcus Feb 19 '21 at 20:18