2

I'm working on a webpage where the user has to fill up the required fields.

I have this sample form:

<form action="mypage.php">
  First name:<br>
  <input type="text" name="firstname" required> 
  <br>
  Last name:<br>
  <input type="text" name="lastname" required>
  <br><br>
  <input type="submit" value="Submit">
</form>

The validation works for the required fields. If fields are not blank, the form can be submitted succesffully. While if blank, fields are highlighted and the user can't submit the form.

Now, I added a spinner on button's click event using javascript:

 <script type="text/javascript">
    $(function () {
        $("#Update").click(function () {

             $("#loading").fadeIn(); 

        });
    });
</script>

The spinner shows and works fine once the button is clicked. But the problem is it shows regardless if the form was submitted or not. It shows even if the fields are blank and since the form wasn't submitted and no function to run, the spinner just keeps spinning.

How can I show the spinner only after the fields validation?

Please help. Thank you in advance.

theo
  • 279
  • 1
  • 3
  • 17

5 Answers5

4

Try to use this instead of .click()

$(document).ready(function(){
    $('form').on("submit",function(){
        console.log("Loading...");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="mypage.php">
        First name:<br>
        <input type="text" name="firstname" required> 
        <br>
        Last name:<br>
        <input type="text" name="lastname" required>
        <br><br>
        <input type="submit" value="Submit">
</form>
Carl Sare
  • 191
  • 1
  • 14
2

If you want the loader spinner after the default form validations are done, then I suggest to do that in form submit event. 

<form action="mypage.php" id="updateForm">
  First name:<br>
  <input type="text" name="firstname" required> 
  <br>
  Last name:<br>
  <input type="text" name="lastname" required>
  <br><br>
  <input type="submit" value="Submit" id="Update">
</form> 

<script type="text/javascript">
    $(function () {
        $("#updateForm").submit(function () {
            $("#loading").fadeIn(); 
        });
    });
</script>
Vineesh
  • 3,762
  • 20
  • 37
1

Make sure your submission button has update as ID. Then, it will work.

apaderno
  • 28,547
  • 16
  • 75
  • 90
Meera
  • 170
  • 7
0

In JavaScript you must have to give Id or function to submit button then call this id in javascript function.

Invoking JavaScript function on form submission:

In our example, we call ValidationEvent() function on form submission.

That will first validate the form fields and will return a boolean value either true or false. Depending upon the returned value the form will submit if it will be true.

JavaScript Function:

// Below Function Executes On Form Submit function ValidationEvent() { ...... return true; // Returns Value }

Prathmesh Nikam
  • 11
  • 3
0

if your page only one form and use jquery, you can follow this code:

<form action="mypage.php" id="updateForm">
  First name:<br>
  <input type="text" name="firstname" required> 
  <br>
  Last name:<br>
  <input type="text" name="lastname" required>
  <br><br>
  <input type="submit1" value="Submit" id="Update">
</form> 



<script type="text/javascript">
    $(function () {
            $(":submit1").click(function () {

             // your page should have a spinner dom with id loading
             // but I think you should not hide loading here because your page with auto reloads after submit, only your page cannot pass form.checkValidity, you need to hide loading element
             var flag = $("input[name='firstname']").checkValidity() && $("input[name='firstname']").checkValidity()
             if (flag) $("#loading").fadeIn(); 
             this.submit();

        });
    });
</script>

why your code not works:

yours submit button without id, so you can not listen to the click event. your code will never work.

Carson
  • 152
  • 11