click function is not working in javascript

Question

I have a modal for signup and signin . In signup modal when I click to signin button then signup modal will hide and signin modal will appear. From same procedure happen to signin modal.

But here these signin or signup button inside the modal didn't work.

I didn't find out the script problem since I am not good in JS.

Here is the modal

<form class="form-horizontal" id="signin_form">
                                        <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                                        <fieldset>
                                        <!-- Sign In Form -->

                                        <!-- Email input-->
                                        <div class="control-group">
                                          <div class="controls">
                                            <input required="" id="signin_email" name="email" class="col-ld-12 col-md-12 col-sm-12" type="email" placeholder="Email" class="input-medium">
                                          </div>
                                        </div>

                                        <div class="control-group">
                                          <div class="controls">
                                            <input required="" id="signin_password" name="password" class="col-ld-12 col-md-12 col-sm-12" type="password" placeholder="Password" class="input-medium">
                                          </div>
                                        </div>

                                        <!-- Button -->
                                        <div class="control-group">
                                          <div class="controls modal_submit_button">
                                            <button type="button" class="btn btn-success" id="signin_form_submit_button">Sign In</button>
                                          </div>
                                        </div>

                                         <div class="control-group">
                                          <div class="controls modal_submit_button">
                                            Don't have an account ! Click here to 
                                            <a href="#" class="signup_from_signin_modal">Sign Up</a>
                                          </div>
                                        </div>
                                        </fieldset>
                                    </form>

script

$(document).ready(function(){
$('.signup_from_signin_modal').on("click", function() {
  $('#signin_Modal').modal('hide');
  $('#myModal').modal('show');
});
$('.signin_from_signup_modal').on("click", function() {
  $('#myModal').modal('hide');
  $('#signin_Modal').modal('show');
});
});

Further more no error is shown into console .

Anybody help please? Thanks in advance

Answer 1

First of all in the handler function of the click you should prevent the default action of the <a> tag. Like so:

  $(document).ready(function(){
   $('.signup_from_signin_modal').on("click", function(e) {
   e.preventDefault();
   $('#signin_Modal').modal('hide');
   $('#myModal').modal('show');
  });

Please let me know if this helps and apply this principle to other HTML tags that already have a default event associated. Like forms with button of type submit for instance. Don't forget to prevent this default event so that you can use your specified event. Hope this helps.

Answer 2

There are missing places in the code. That's why I didn't understand the problem. Can you try that?

  $(document).ready(function(){

$('.signup_from_signin_modal').click(function(e) {
  e.preventDefault()
  $('#signin_Modal').hide();
  $('#myModal').show()
})
  });

Where is #myModal ?