Submit Button Not working but if I remove its JavaScript it works

Question

This is my index.html file. It has JavaScript but when JavaScript validation works >Submit button doesn't perform any action. But when I remove JavaScript code it submits the data to the database. I need to understand where my code has faults or mistakes and why this is happening. How to validate that the arrival date should be smaller than the departure date.

<!DOCTYPE html>
<head>
    <title>Book Accomodations</title>
    <link rel="stylesheet" href="style.css">

    <script>
     
      function validate(){  
    
    var x =document.forms["myform"]["fname"].value;
    var y =document.forms["myform"]["lname"].value;
    var email =document.forms["myform"]["email"].value;
  
    var filter = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    var getSelectedValue = document.querySelector( 'input[name="payment"]:checked');  
    
    
  
  if (x == "" || x == null) {
    alert("First Name must be filled out");
    return false;
    
    
   
  } else if (y == "" || y == null) {
    alert(" Last Name must be filled out");
    return false;
    
  }
  else if (!email.match(filter)) {
    alert(" Enter Proper Email ID");
    return false;
   
  }
   else if(document.getElementById("country").value == "")
   {
      alert("Please select a country"); 
      return false;
     
     
   } else if(getSelectedValue == null) {   
        alert("Select Payment Mode")
        return false;

      
   }
  
  return false;
  } 
    
  
    </script>  

</head>
<body>
    <div class="form">
<form name ="myform" action="function.php" onsubmit="return validate();" id="form" method="POST" >
  
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" /><br>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" /><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" /><br>
    <label for="arrival">Arrival Date:</label>
    <input type="date" id="arrival " name="adate" ><br>
    <label for="departure">Departure Date:</label>
    <input type="date" id="departure " name="ddate" />
   
    <br>

    <label for="country">Choose a Country:</label>
   <select id="country" name="country" form="myform" >
    <option disabled selected value> -- select an option -- </option>
    <option value="India">India</option>
    <option value="U.S.A.">U.S.A.</option>
    <option value="Nepal">Nepal</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Germany">Germany</option>
    <option value="Spain">Spain</option>
    <option value="Italy">Italy</option>
    <option value="Sri Lanka">Sri Lanka</option>
    <option value="China">China</option>
     </select>
    <p>Payment Mode:</p>
   
    <input type="radio" id="deb"
     name="payment" value="Debit" />
    <label for="deb">Debit Card</label>

    <input type="radio" id="cred"
     name="payment" value="Credit"/>
    <label for="Credit">Credit Card</label>

  

<br>

   <input  type="submit" id="submit" name="submit" value="submit" style="width: 100px;"/>
   <input type="reset" value="Reset" style="width: 100px; "/>

</form> </div>





</body>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 24 '21 at 13:53

score 0 · Answer 1 · answered Oct 24 '21 at 13:32

0

You should return true at the end of your validate() function if your validation was successful. Right now you always return false. Thats why the button doesn´t seams to work.

answered Oct 24 '21 at 13:32

Willi Pasternak

456
2
12

vyshnovka · Answer 2 · 2021-11-11T15:05:29.460

Seems like you missed something. You should return true after succesfull validation.

    if (x == "" || x == null) {
        alert("First Name must be filled out");
        return false;
    } else if (y == "" || y == null) {
        alert("Last Name must be filled out");
        return false;
    } else if (!email.match(filter)) {
        alert("Enter Proper Email ID");
        return false;
    } else if (document.getElementById("country").value == "") {
        alert("Please select a country");
        return false;
    } else if (getSelectedValue == null) {
        alert("Select Payment Mode")
        return false;
    } else {
      return true;
    }

Or just return true after if-else statement.

Submit Button Not working but if I remove its JavaScript it works

2 Answers2