Search code examples
javascriptphphtmlformsajaxform

Submitting form using Javascript with conditions, have to press submit twice


I have created a form in which I want that if there are some specific entries, the form should not get submitted, and some functions should be executed. But for every other entry, the form should get submitted and work as normal.

    function checkuser() {
        let name = document.forms[0].name.value;
        let email = document.forms[0].email.value;
        let message = document.forms[0].message.value;
        if ((name == "admin") && (email == "[email protected]") && message == ("admin")) {
            alert("hey"); //SOME FUNCTION
        } else {
            document.forms[0].setAttribute("action", "login.php");
            document.forms[0].setAttribute("onsubmit", " ");
            document.forms[0].submit();
        }
      }
    <form method="post" onsubmit="event.preventDefault(); return checkuser(this)" id="form">
    
         <table align="center">
    
             <tr>
                 <th><label for="name"> Name : </label></th>
                 <td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
    
             </tr>
    
             <tr>
                 <th><label for="email"> Email : </label> </th>
                 <td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
             </tr>
    
             <tr>
                 <th><label for="phone"> Phone Number : </label> </th>
                 <td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
             </tr>
    
             <tr>
                 <th><label for="message"> Message : </label> </th>
                 <td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
             </tr>
    
         </table>
    
         <div class="buttons">
             <input type="submit" value="Submit" name="submit">
             <input type="reset" value="Reset" name="reset">
         </div>
    </form>

It works just fine, but the problem is just that, for normal values, I have to press SUBMIT button twice to redirect the form to "login.php" and submit it. I think, when I press it once, it removes the "submit" method and adds the "action" to the form, and on pressing it twice, it is submitted.

I need it to work with just one click. If I input special values, it should execute the following function, and for normal values, it should directly submit the form using "login.php" as an action.

Any help would be appreciated.


Solution

  • I did it like this...

        function checkuser() {
            let name = document.forms[0].name.value;
            let email = document.forms[0].email.value;
            let message = document.forms[0].message.value;
            if ((name == "admin") && (email == "[email protected]") && message == ("admin")) {
                alert("hey"); //SOME FUNCTION
            } else {
                document.forms[0].submit();
            }
          }
        <form method="post" action="login.php" id="form">
        
             <table align="center">
        
                 <tr>
                     <th><label for="name"> Name : </label></th>
                     <td> <input type="text" height=100px id="name" name="name" placeholder="Enter your Name..." required> </td>
        
                 </tr>
        
                 <tr>
                     <th><label for="email"> Email : </label> </th>
                     <td><input type="email" id="email" name="email" placeholder="Enter your Email ID..." required></td>
                 </tr>
        
                 <tr>
                     <th><label for="phone"> Phone Number : </label> </th>
                     <td><input type="tel" id="phone" name="phone" placeholder="Enter your Phone no..." pattern="[0-9]{10}"></td>
                 </tr>
        
                 <tr>
                     <th><label for="message"> Message : </label> </th>
                     <td><textarea id="message" name="message" placeholder="Enter Message..." required></textarea></td>
                 </tr>
        
             </table>
        
             <div class="buttons">
                 <input type="button" value="Submit" onclick="checkuser();">
                 <input type="reset" value="Reset" name="reset">
             </div>
        </form>