Question

我有2个具有不同ID（form_sign和form_login）的表单，并使用ajax提交。 form_sign工作正常，但另一种形式不工作。

我试图在form_login的函数提交（如果表单已提交）时显示警报，但是它起作用了，但是当我为事务表单添加ajax代码时，ajax代码未运行。我正在检查代码元素，但浏览器未显示错误

<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>

// use jquery-2.1.4
    $(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
                }
            })
        });
    });

我希望即使在同一页面上，也可以使用两种不同的表格

对不起，我英语不好问候

Answer 1

您以第二种格式action="post" method="<?php echo $see?>halaman/simaksi/login-account.php">

切换了操作和方法

Answer 2

您正在使用标记表单类型提交，并使用jQuery函数提交表单。在这种情况下，表单通过ajax和post方法提交了2次。要提交这些表格，您需要更改按钮类型，仅使用按钮提交。像下面的

<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>

anoter ajax函数用于另一种形式不起作用

2 个答案: