Making multiple javascript functions work with the same HTML page

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 ammount 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 assistance.welly2gotours@gmail.com");
    }
}
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;
}

2 answers

  • answered 2020-06-07 03:42 diacode

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

     function validateForm1() {
     ...
     }
    
     function validateForm2() {
      ...
       }
    

    And so on..

  • answered 2020-06-07 03:49 user120242

    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 assistance.welly2gotours@gmail.com");
        }
    }
    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 ammount 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>