функция anoter ajax для другой формы не работает

Question

У меня есть 2 формы с разными идентификаторами (form_sign и form_login) и использовать AJAX для отправки его. form_sign работает хорошо, но другая форма не работает.

Я пытался показать предупреждение, когда функция для form_login, если форма была отправлена, и это работает, но когда я добавляю ajax-код для формы транзакции, ajax-код не работает. я проверял элемент кода, но браузер не отображал ошибку

$(document).ready(function() {
  checkSame('#_password');
  checkChar('#password');

  $("#form_sign").on('submit', function(e) { // form 1
    e.preventDefault();
    let post_url = $(this).attr("action"); //get form action url
    let request_method = $(this).attr("method"); //get form GET/POST method
    let form_data = $(this).serialize(); //Encode form elements for submission

    $.ajax({
      url: post_url,
      type: request_method,
      data: form_data,
      success: function(data) {
        if (data == "success") {
          reseter("#form_sign");
          $('#massage').html("Save data success! silahkan login");
          $("#divMassage").fadeOut(5000);

        }
      }
    })
  });

  $("#form_login").on('submit', function(ev) { //form 2
    ev.preventDefault();
    let post_url = $(this).attr("action"); //get form action url
    let request_method = $(this).attr("method"); //get form GET/POST method
    let form_data = $(this).serialize(); //Encode form elements for submission
    // i put alert here, the alert run
    $.ajax({
      url: post_url,
      type: request_method,
      data: form_data,
      success: function(data) {

        alert("eee"); // this alert not run
      }
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<section class="content">
  <div class="row">
    <div class="col-md-5 col-md-offset-3">
      <div class="nav-tabs-custom" style=" box-shadow: 10px 10px 5px 5px #888888;">
        <ul class="nav nav-tabs">
          <li class="active" id="link_1"><a href="#tab_1" data-toggle="tab" aria-expanded="true"><b>Creat an Account</b></a></li>
          <li class="" id="link_2"><a href="#tab_2" data-toggle="tab" aria-expanded="false"><b>Login</b></a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab_1">
            <form id="form_sign" role="form" action="<?php echo $see?>halaman/simaksi/creat-account.php" method="POST">
              <div class="box-body">
                <div class="form-group">
                  <label for="exampleInputEmail1">Username</label>
                  <input type="text" class="form-control" name="username" placeholder="Enter Username" required>
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" name="email" placeholder="Enter email" required>
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Password</label>
                  <input type="password" class="form-control" name="password" id="password" onkeyup="checkChar(this.id)" placeholder="Enter Magic Words" required>
                  <span id="mass1" class="text-red"></span>
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Retype Password</label>
                  <input type="password" class="form-control" name="_password" id="_password" onkeyup="checkSame(this.id)" placeholder="Retype Magic Words" required>
                  <span id="mass2" class="text-red"></span>
                </div>
                <div class="form-group">
                  <button type="submit" name="create" class="btn btn-lg btn-success btn-block" id="btn-submit" disabled>Create</button>
                  <button type="reset" class="btn btn-lg btn-warning btn-block">Clear</button>
                </div>
              </div>
            </form>
          </div>
          <!-- /.tab-pane -->
          <div class="tab-pane" id="tab_2">
            <form id="form_login" role="form" action="post" method="<?php echo $see?>halaman/simaksi/login-account.php">
              <div class="box-body">
                <div class="form-group">
                  <label for="exampleInputEmail1">Username</label>
                  <input type="text" class="form-control" name="user" placeholder="Enter Username" required>
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Password</label>
                  <input type="password" class="form-control" name="password" placeholder="Enter Magic Words" required>
                </div>
                <div class="form-group ">
                  <button type="submit" class="btn btn-lg btn-success btn-block" id="btn-login">Login</button>
                </div>
              </div>
            </form>
          </div>
          <!-- /.tab-pane -->
        </div>
        <!-- /.tab-content -->
      </div>
    </div>
  </div>
</section>

Я надеюсь, что 2 разные формы могут хорошо работать, даже если они находятся на одной странице

извините за мой плохой английский С уважением

Answer 1

Вы изменили свои действия и методы во второй форме action="post" method="<?php echo $see?>halaman/simaksi/login-account.php">

Answer 2

Вы используете тэг типа отправки и отправки формы с помощью функции jQuery. в этом случае форма отправляется 2 раза ajax и post методом. Чтобы отправить эту форму, вам нужно изменить тип кнопки «Отправить» только кнопкой. как показано ниже

<button type="button" name="create" class="btn btn-lg btn-success btn-block" id="btn-submit" disabled>Create</button>


<button type="submit" class="btn btn-lg btn-success btn-block" id="btn-login">Login</button>

код AJAX

<script>
    // use jquery-2.1.4
    $(document).ready(function(){
        checkSame('#_password');
        checkChar('#password');

        $("#form_sign").on('click', function(e){ // form 1
            e.preventDefault();
            let post_url = $(this).attr("action"); //get form action url
            let request_method = $(this).attr("method"); //get form GET/POST method
            let form_data = $(this).serialize();//Encode form elements for submission

            $.ajax({
                url:post_url,
                type:request_method,
                data:form_data,
                success:function(data){
                    if (data=="success") {
                        reseter("#form_sign");
                        $('#massage').html("Save data success! silahkan login");
                        $("#divMassage").fadeOut(5000);

                    }
                }
            })
        });

        $("#form_login").on('click', function(ev){ //form 2
            ev.preventDefault();
            let post_url = $(this).attr("action"); //get form action url
            let request_method = $(this).attr("method"); //get form GET/POST method
            let form_data = $(this).serialize();//Encode form elements for submission
// i put alert here, the alert run
            $.ajax({
                url:post_url,
                type:request_method,
                data:form_data,
                success:function(data){ 
                      alert("eee"); // this alert not run
                }
            })
        });
    });
    </script>