CODEWITHSUNDEEP
javascriptjqueryajaxforms
Lukas_T
Lukas_T

Reputation: 299

jQuery submit requires two clicks to work

Trying to submit an Ajax form that if successful returns a popup however it seem to only need two clicks?

Snippet: 

$(document).ready(function(){

  (function($){
      function processForm( e ){
          $.ajax({
              url: 'https://httpbin.org/get',
              dataType: 'text',
              type: 'get',
              contentType: 'application/x-www-form-urlencoded',
              data: $(this).serialize(),
              success: function( data, textStatus, jQxhr ){
                console.log('success' + data)
                $('.join').click(function() {
                  $('.overlay').show();
                });
                $('#video').html( data );
              },
              error: function( jqXhr, textStatus, errorThrown ){
                  console.log( errorThrown );
              }
          });

          e.preventDefault();
      }

      $('#form').submit( processForm );
  })(jQuery);

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay" style="display: none;"> <!-- START OVERLAY -->

    <div class="overlay_cont">
      <div class="logo_white"></div>
      <!-- <div class="share_link">
        <input type="hidden" id="input-url" value="Copied!">
       <button class="btn-copy">Share link</button>
     </div> -->
      <div class="video">
        <video  id="v1" width="960" height="420" controls="controls"></video>
      </div>
    </div>
</div>

<div class="container">
<div id="main">
  <div class="title">
    <h1> </br> Amazing </br>live streaming</h1>
  </div>
  <div id="login">
    <h2>Join Call</h2>
    <form id="form">
      <label for="callid">Call ID:</label> </br>
      <input type="callid" name="callid"> </br>
       </br>
      <label for="passcode">Passscode:</label> </br>
      <input type="passcode" name="passcode">
      </br>
      <button class="join" type="submit">Join</button>
    </form>


  </div>
</div>

Codepen: https://codepen.io/LukaDadiani/pen/wjqXXY

Upvotes: 0

Views: 77

Answers (4)

n1md7
n1md7

Reputation: 3451

You need to take click event outside AJAX like this

$(document).ready(function(){
  $('.join').click(function() {
   $('.overlay').show();
  });
  (function($){
      function processForm( e ){
          $.ajax({
              url: 'https://httpbin.org/get',
              dataType: 'text',
              type: 'get',
              contentType: 'application/x-www-form-urlencoded',
              data: $(this).serialize(),
              success: function( data, textStatus, jQxhr ){
                console.log('success' + data)

                $('#video').html( data );
              },
              error: function( jqXhr, textStatus, errorThrown ){
                  console.log( errorThrown );
              }
          });

          e.preventDefault();
      }

      $('#form').submit( processForm );
  })(jQuery);

})

Upvotes: 0

Joshua Akande
Joshua Akande

Reputation: 68

The code should look like this

 $(document).ready(function(){
     Function submitForm(){
           Write Ajax function here
     }
      $(#formid).on("submit", function (event){
              event.preventDefault();
               submitFunction()
      });
 }):

Upvotes: 0

Raphael M.
Raphael M.

Reputation: 140

Well, you can do the following:

Change this:

$('#form').submit( processForm );

to this:

$('#form').click(function() { 
    processForm();
});

And your button must be:

<button class="join" type="button">Join</button>

instead of type="submit".

Upvotes: 0

Liora Haydont
Liora Haydont

Reputation: 1283

When you click the 1st time, the processForm function is ran, so the ajax is sent, but in your success listener, you have 

console.log('success' + data)    
$('.join').click(function() {
    $('.overlay').show();
});
$('#video').html( data );

so you have to click another time on join to show the overlay. You should juste remove you click event:

console.log('success' + data)    
$('.overlay').show();
$('#video').html( data );

Upvotes: 2

Related Questions