Making multiple javascript functions work with the same HTML page

Question

I am attempting to code a website which has an online booking form. I have multiple text submit boxes which have a javascript function. However, when I enter multiple similar functions into javascript, the code does not run. It only works when there is one function entered in javascript. I don't know if this makes sense.

This is the HTML:

<!DOCTYPE html>``
<html>
    <head>
    <title> Book A Tour</title>
        <link rel="stylesheet" type="text/css" href="Style-2.css">
         <script src="java.js"></script>
    </head>
    
    <body>
        <div id="header">
         <h1>Book A Tour</h1>
            </div>
         <ul id="navigation">
            <li><a href="index.html">Home Page</a></li>
            <li><a href="contact.html">Our Tours</a></li>
            <li><a href="FAQ.html">FAQ's</a></li>
            <li><a href="https://www.instagram.com/welly2go_tours/?hl=en">Follow us on Instagram</a></li>
        </ul>
        <br>
        <br>
        <h2>Which Tour Would You Like To Book?</h2>
        <select name="Tour">
        <option value="Wellington In A Nutshell">Wellington In A Nutshell</option>
        <option value="Wine Me And Dine Me">Wine Me And Dine Me</option>
        <option value="Kia Ora, Wellington!">Kia Ora, Wellington!</option>
        <option value="Design-Your-Own E-Bike Tour">Design-Your-Own E-Bike Tour</option>
        </select>
        <h2>Which Day Would You Like To Book Your Tour On?</h2>
        <select name="Tourday">
        <option value="Monday">Monday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Saturday">Saturday</option>
        </select>
         <h2>How Many Adults Are In Your Group?</h2>
         <form name="confirm" onsubmit="return validateForm()" method="post">
            <input type="text" name="code">
            <input type="submit" value="Submit">
        </form>
           <h2>How Many Children Are In Your Group?</h2>
         <form name="confirm" onsubmit="return validateForm()" method="post">
            <input type="text" name="code">
            <input type="submit" value="Submit">
        </form>
        <h2>What Is Your E-Mail Address?</h2>
         <form name="email" onsubmit="return validateForm()" method="post">
            <input type="text" name="Email">
            <input type="submit" value="Submit">
        </form>
        <h2>What Is Your Credit Card Number?</h2>
        <form>
            <input type="password" name="creditcard"><br>
        </form>
        <br>
        <br>
        <button type="button">Buy Tickets</button>
        
        <h2>How Many Adults Are In Your Group?</h2>
        <p>Enter the number of adults below</p>
        <form name="practice" onsubmit="return performOp()" method="post">
        <input type="text" name="number">
            <input type="submit" name="submit">
        </form>
        
        <p id="demo"></p>
       
    </body>
    
</html>

This is the Javascript:

window.onload = function() {
    document.getElementById("demo").innerHTML = Date();
} 
function performOp() {
    var x = document.forms["practice"]["number"].value;
    var changedX = x * 40;
    alert(changedX);
}
function validateForm() {
    var x = document.forms["confirm"]["code"].value;
    if (x == "1") {
        alert("1 Adult Ticket Costs $40");
    }
    else if (x == "2") {
         alert("2 Adult Tickets Cost $80");
    }
      else if (x == "3") {
        alert("3 Adult Tickets Cost $120");
    }
      else if (x == "4") {
        alert("4 Adult Tickets Cost $160");
    }
      else if (x == "5") {
        alert("5 Adult Tickets Cost $200");
    }
      else if (x == "6") {
        alert("6 Adult Tickets Cost $240");
    }
      else if (x == "7") {
        alert("7 Adult Tickets Cost $280");
    }
      else if (x == "8") {
        alert("8 Adult Tickets Cost $320");
    }
      else if (x == "9") {
        alert("9 Adult Tickets Cost $360");
    }
      else if (x == "10") {
        alert("10 Adult Tickets Cost $400");
    }
    else {
        alert("Maximum booking number reached. Please book the rest of your group seperatley, or email us for [email protected]");
    }
}
function validateForm() {
    var y = document.forms["children"]["children"].value;
    if (y == "1") {
        alert("1 Child Ticket Costs $20");
    }
    else if (y == "2") {
        alert("2 Child Tickets Cost $40");
    }
      else if (y == "3") {
        alert("3 Child Tickets Cost $60");
    }
      else if (y == "4") {
        alert("4 Child Tickets Cost $80");
    }
      else if (y == "5") {
        alert("5 Child Tickets Cost $100");
    }
      else if (x == "6") {
        alert("6 Child Tickets Cost $120");
    }
      else if (y == "7") {
        alert("7 Child Tickets Cost $140");
    }
      else if (y == "8") {
        alert("8 Child Tickets Cost $160");
    }
      else if (y == "9") {
        alert("9 Child Tickets Cost $180");
    }
      else if (y == "10") {
        alert("10 Child Tickets Cost $200");
    }
    else {
        alert("maximum booking number reached. Please book the rest of your group seperatley, or email us for assistance.");
    }
}

function validateForm() {
    var z = document.forms["email"]["Email"].value;
    if (z != "") {
        alert("Thank You For Entering Your Email Address");
    }
    else {
        alert("Please Enter Your Email Address");
    }
}

This is the CSS:

body{
   background-color: #B2D8EB;
     font-family: optima;
}
h1{
    color: #619196;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
}
#header {
    background-color: #E0C7C0;
    margin: 40px;
    border-radius: 15px;
}
#images {
    float: right;
    position:absolute;
    margin-left: 180px;
    margin-top: 280px;
}
p{
    font-style: italic;
    font-size: 20px;
}
   #values{
        text-decoration: italic;
        display: block;
    width: 350px;
    background-color: #E0C7C0;
       font-size: 30px;
       color: #619196;
       border-radius: 15px;
     position: absolute;
       margin-left: 150px;
    }
#navigation {
    list-style-type: none;
    margin-left: 115px;
    text-align: center;
      position:absolute;
}
#navigation a {
    display: block;
    width: 280px;
    background-color: #E0C7C0;
        color: #619196;
     font-size: 20px;
    text-decoration: none;
    border-radius: 15px;
}
#navigation li {
    float:left;
}
/*unvisited link*/
#navigation a:link {
    color: #619196;
}
/*link when it has been clicked on*/
#navigation a:visited {
   color: #619196;
}
/*mouse over the link*/
#navigation a:hover {
    color: #82B5CA;
}
/*link while selected*/
#navigation a:active {
color: #82B5CA;
}
/*link when hovered on*/
#navigation li a:hover {
    background-color: #F5DCD5;
}
h2{
    background-color: #E0C7C0;
    margin: 40px;
    border-radius: 15px;
       color: #619196;
    font-weight: bold;
    font-size: 30px;
}
input[type=text], select {
 width: 50%; 
color: #619196;
background-color: #E0C7C0;
    border-radius: 15px;
    margin-left: 40px;
    font-size: 25px;
     font-family: optima;
    font-weight: bold;
}
input[type=password], select {
 width: 50%; 
color: #619196;
background-color: #E0C7C0;
    border-radius: 15px;
    margin-left: 40px;
    font-size: 25px;
}

If you defined more than one function with the same name the last function you defined will actually run. For more information, you can visit the thread from where you can get more info on JavaScript functions stackoverflow.com/a/2911750/10118242 . — Debashis Nandy
– Debashis Nandy, Commented Jun 7, 2020 at 3:31

diacode · Accepted Answer · 2020-06-07 03:42:39Z

0

According to Debashis Nandy, try different names for different functions:

 function validateForm1() {
 ...
 }

 function validateForm2() {
  ...
   }

And so on..

answered Jun 7, 2020 at 3:42

diacode

3113 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2020-12-20 11:35:15Z

As @Debashis Nandy has pointed out. You need separate names for the functions. The value of validateForm is being overwritten each time a function with that name is declared.

You are using the wrong name for the children form. I've renamed it. If you want the formdata for adult and children to be sent in an array, you can change it back. But, your JS code needs to be adjusted to take it from the right element.

You may want to return false or pass event to validateForm and call event.preventDefault() to stop the default submit behavior from causing navigation.

window.onload = function() {
    document.getElementById("demo").innerHTML = Date();
} 
function performOp() {
    var x = document.forms["practice"]["number"].value;
    var changedX = x * 40;
    alert(changedX);
}
function validateFormAdult() {
    var x = document.forms["confirm"]["code"].value;
    if (x == "1") {
        alert("1 Adult Ticket Costs $40");
    }
    else if (x == "2") {
         alert("2 Adult Tickets Cost $80");
    }
      else if (x == "3") {
        alert("3 Adult Tickets Cost $120");
    }
      else if (x == "4") {
        alert("4 Adult Tickets Cost $160");
    }
      else if (x == "5") {
        alert("5 Adult Tickets Cost $200");
    }
      else if (x == "6") {
        alert("6 Adult Tickets Cost $240");
    }
      else if (x == "7") {
        alert("7 Adult Tickets Cost $280");
    }
      else if (x == "8") {
        alert("8 Adult Tickets Cost $320");
    }
      else if (x == "9") {
        alert("9 Adult Tickets Cost $360");
    }
      else if (x == "10") {
        alert("10 Adult Tickets Cost $400");
    }
    else {
        alert("Maximum booking number reached. Please book the rest of your group seperatley, or email us for [email protected]");
    }
}
function validateFormChild() {
    var y = document.forms["children"]["code"].value;
    if (y == "1") {
        alert("1 Child Ticket Costs $20");
    }
    else if (y == "2") {
        alert("2 Child Tickets Cost $40");
    }
      else if (y == "3") {
        alert("3 Child Tickets Cost $60");
    }
      else if (y == "4") {
        alert("4 Child Tickets Cost $80");
    }
      else if (y == "5") {
        alert("5 Child Tickets Cost $100");
    }
      else if (x == "6") {
        alert("6 Child Tickets Cost $120");
    }
      else if (y == "7") {
        alert("7 Child Tickets Cost $140");
    }
      else if (y == "8") {
        alert("8 Child Tickets Cost $160");
    }
      else if (y == "9") {
        alert("9 Child Tickets Cost $180");
    }
      else if (y == "10") {
        alert("10 Child Tickets Cost $200");
    }
    else {
        alert("maximum booking number reached. Please book the rest of your group seperatley, or email us for assistance.");
    }
}

function validateFormEmail() {
    var z = document.forms["email"]["Email"].value;
    if (z != "") {
        alert("Thank You For Entering Your Email Address");
    }
    else {
        alert("Please Enter Your Email Address");
    }
}

body{
   background-color: #B2D8EB;
     font-family: optima;
}
h1{
    color: #619196;
    font-weight: bold;
    font-size: 50px;
    text-align: center;
}
#header {
    background-color: #E0C7C0;
    margin: 40px;
    border-radius: 15px;
}
#images {
    float: right;
    position:absolute;
    margin-left: 180px;
    margin-top: 280px;
}
p{
    font-style: italic;
    font-size: 20px;
}
   #values{
        text-decoration: italic;
        display: block;
    width: 350px;
    background-color: #E0C7C0;
       font-size: 30px;
       color: #619196;
       border-radius: 15px;
     position: absolute;
       margin-left: 150px;
    }
#navigation {
    list-style-type: none;
    margin-left: 115px;
    text-align: center;
      position:absolute;
}
#navigation a {
    display: block;
    width: 280px;
    background-color: #E0C7C0;
        color: #619196;
     font-size: 20px;
    text-decoration: none;
    border-radius: 15px;
}
#navigation li {
    float:left;
}
/*unvisited link*/
#navigation a:link {
    color: #619196;
}
/*link when it has been clicked on*/
#navigation a:visited {
   color: #619196;
}
/*mouse over the link*/
#navigation a:hover {
    color: #82B5CA;
}
/*link while selected*/
#navigation a:active {
color: #82B5CA;
}
/*link when hovered on*/
#navigation li a:hover {
    background-color: #F5DCD5;
}

<!DOCTYPE html>``
<html>
    <head>
    <title> Book A Tour</title>
        <link rel="stylesheet" type="text/css" href="Style-2.css">
         <script src="java.js"></script>
    </head>

    <body>
        <div id="header">
         <h1>Book A Tour</h1>
            </div>
         <ul id="navigation">
            <li><a href="index.html">Home Page</a></li>
            <li><a href="contact.html">Our Tours</a></li>
            <li><a href="FAQ.html">FAQ's</a></li>
            <li><a href="https://www.instagram.com/welly2go_tours/?hl=en">Follow us on Instagram</a></li>
        </ul>
        <br>
        <br>
        <h2>Which Tour Would You Like To Book?</h2>
        <select name="Tour">
        <option value="Wellington In A Nutshell">Wellington In A Nutshell</option>
        <option value="Wine Me And Dine Me">Wine Me And Dine Me</option>
        <option value="Kia Ora, Wellington!">Kia Ora, Wellington!</option>
        <option value="Design-Your-Own E-Bike Tour">Design-Your-Own E-Bike Tour</option>
        </select>
        <h2>Which Day Would You Like To Book Your Tour On?</h2>
        <select name="Tourday">
        <option value="Monday">Monday</option>
        <option value="Wednesday">Wednesday</option>
        <option value="Saturday">Saturday</option>
        </select>
         <h2>How Many Adults Are In Your Group?</h2>
         <form name="confirm" onsubmit="return validateFormAdult()" method="post">
            <input type="text" name="code">
            <input type="submit" value="Submit">
        </form>
           <h2>How Many Children Are In Your Group?</h2>
         <form name="children" onsubmit="return validateFormChild()" method="post">
            <input type="text" name="code">
            <input type="submit" value="Submit">
        </form>
        <h2>What Is Your E-Mail Address?</h2>
         <form name="email" onsubmit="return validateFormEmail()" method="post">
            <input type="text" name="Email">
            <input type="submit" value="Submit">
        </form>
        <h2>What Is Your Credit Card Number?</h2>
        <form>
            <input type="password" name="creditcard"><br>
        </form>
        <br>
        <br>
        <button type="button">Buy Tickets</button>

        <h2>How Many Adults Are In Your Group?</h2>
        <p>Enter the number of adults below</p>
        <form name="practice" onsubmit="return performOp()" method="post">
        <input type="text" name="number">
            <input type="submit" name="submit">
        </form>

        <p id="demo"></p>

    </body>

</html>

Collectives™ on Stack Overflow

Making multiple javascript functions work with the same HTML page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related