jQuery - form prevent default then continue default

Question

I know this has been asked many times but my code not working after looking at similar questions.

Form

 <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
    <div class="form-group">

    <input type="file" name="file" id="fileToUpload" required="">
    </div>
    <input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
    <img src="authors/loading.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
    </form>

Script

<script type="text/javascript">
$('#form1').on('submit', function(e) {
    e.preventDefault();

        $('#submit').hide();
        $('#loading').show();

    this.submit(); 
});

</script>

I am trying to hide submit button on click and then show a loading gif but it is directly submitting.

jQuery library all included and no error is showing in the console.

it is directly submitting - how did you know this? Even after you commenting out the this.submit()? — King King
– King King, Commented Apr 10, 2017 at 5:03
after show your triggering submit so it's submitting suddenly if you want see the gif change you can comment this.submit and try it — JYoThI
– JYoThI, Commented Apr 10, 2017 at 5:03
Try Placing Loading Img Out of the form .. Just a suggestion .. — Pranav
– Pranav, Commented Apr 10, 2017 at 5:04
@KingKing Yes even I comment this.submit() it is directly submitting — Phoenix
– Phoenix, Commented Apr 10, 2017 at 5:14
that's impossible, just tried your code, e.preventDefault() should work. You must have something wrong elsewhere making you think that the form is submitted anyway. — King King
– King King, Commented Apr 10, 2017 at 6:17

Yogesh Mistry · Accepted Answer · 2017-04-10 06:59:51Z

4

You should hide your submit and show your loading when the #submit is clicked, not when the form is submitted. And check the required fields before submitting. (But, this will require manual validation too.)

Change this $('#form1').on('submit', function(e) {

to $('#submit').on('click', function(e) {.

Working snippet below showing how you can toggle loading text / submit button based on form's required fields.

$('#submit').on('click', function(e) {
  e.preventDefault();
  $('form .error').remove();
  if($('#fileToUpload').val()!=""){
    console.log("file selected. submit the form now!");
    $('#submit').hide();
    $('#loading').show();
    $('#form1').submit(); 
  } else {
    console.log("file not selected. don't submit the form!");
    $('form').append("<div class='error'>file not selected</div>");
    $('#submit').show();
    $('#loading').hide();
  }    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
  <div class="form-group">
    <input type="file" name="file" id="fileToUpload" required="">
  </div>
  <input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
  <img src="authors/loading.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
</form>

edited Apr 10, 2017 at 6:59

answered Apr 10, 2017 at 5:04

Yogesh Mistry

2,17017 silver badges20 bronze badges

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

4 Comments

Phoenix Over a year ago

Strangely its working here but when i copy page it it is still submitting. and no console output.

Yogesh Mistry Over a year ago

there must be something you are missing. are you sure it is the same as i've posted here?

Phoenix Over a year ago

Yes I even removed all my extra scripts and added yours and copied form and script from here but still its auto submitting.

Yogesh Mistry Over a year ago

try changing <input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info"> to <button type="button" id="submit" name="submit" class="btn btn-info">Upload Image</button>

Ganesh Putta · Accepted Answer · 2017-04-10 05:06:49Z

1

try this, may be this will help you

$('#form1').submit(function() {
    var pass = true;
    //some validations

    if(pass == false){
        return false;
    }
     $('#submit').hide();
    $('#loading').show();

    return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
    <div class="form-group">

    <input type="file" name="file" id="fileToUpload" required="">
    </div>
    <input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
    <img src="http://tour.century21mcmullen.com/tour/titan/images/houseSpinner.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
    </form>

answered Apr 10, 2017 at 5:06

Ganesh Putta

2,6872 gold badges23 silver badges27 bronze badges

1 Comment

Mahdi Over a year ago

returning «true or false» best solution if anyone want submit form again in function inner.

JYoThI · Accepted Answer · 2017-04-10 05:14:23Z

Now you can see the diffrents

After show your triggering submit so it's submitting suddenly if you want see the gif change you can comment this.submit and try it using setTimeout.

$('#form1').on('submit', function(e) {
    e.preventDefault();

        $('#submit').hide();
        $('#loading').show();
        
        setTimeout(function () {
                   // $(this).submit();
                    $('#loading').hide();
                     $('#submit').show();
                }, 5000); // in milliseconds
        
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
    <div class="form-group">

    <input type="file" name="file" id="fileToUpload" >
    </div>
    <input type="submit" value="Upload Image" id="submit" name="submit" class="btn btn-info">
    <img src="https://media4.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif" id="loading" style="max-height: 30px; width: auto; display: none;">
    </form>

Collectives™ on Stack Overflow

jQuery - form prevent default then continue default

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related