CODEWITHSUNDEEP
jquery
Phoenix
Phoenix

Reputation: 322

jQuery - form prevent default then continue default

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.

Upvotes: 0

Views: 10722

Answers (3)

Yogesh Mistry
Yogesh Mistry

Reputation: 2152

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>

Upvotes: 4

JYoThI
JYoThI

Reputation: 12085

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>

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2681

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>

Upvotes: 1

Related Questions