javascript - PHP-jQuery : Form with 2 buttons and 2 actions. 第二个按钮正在调用第一个按钮的操作

Question

我有一个包含两个操作的表单，每当我尝试执行第二个操作时，第一个操作就会由于某种原因被调用。

第一个操作是搜索并使用从数据库检索的一些数据填充表单。这部分有效。

第二个操作是在手动将一些附加数据输入表单后提交表单。由于某种原因，每当我单击第二个按钮时，第一个按钮的功能就会执行，但第二个按钮的功能不会执行。

我将每个点击函数放在单独的脚本中。

第一个功能:

<script>
$('document').ready(function()
{
    $('#register-submit-btn').attr('disabled', 'disabled');
    $("#find-details-btn").click(function(){
     /* validation */
    $("#register-form").validate({
      rules:
      {
            id: {
            required: true,
            minlength: 11,
            },
            second_id: {
            required: true,
            minlength: 6,
            },
            enter_date: {
            required: true,
            },
       },
       messages:
       {
            id:{
                      required: "Message Here.",
                      minlength: "Message Here",
                     },
            second_id:{
                      required: "Message Here.",
                      minlength: "Message Here",
                     },
            enter_date:{
                      required: "Message Here.",
                     },
       },
       submitHandler: checkGetData
       });

   function checkGetData()
   {
        var data = $("#register-form").serialize();
        $.ajax({
        type : 'POST',
        url  : 'validate_get_data.php',
        data : data,
        cache: false,
        beforeSend: function()
        {
            $("#detailsmsg").fadeOut();
            $("#find-details-btn").html('<img src="include/btn-ajax-loader.gif" /> &nbsp; Searching...');
            $('#find-details-btn').attr('disabled', 'disabled');
        },

        success :  function()
           {
                //some actions go here to populate data into proper fields.
           }
        });
        return false;
      } 
   });
});
</script>

第二个脚本

<script>
$('document').ready(function()
{
    $("#register-submit-btn").click(function(){

            var data = $("#register-form").serialize();

            $.ajax({
            type : 'POST',
            url  : 'update_data.php',
            data : data,
            cache: false,
            beforeSend: function()
            {
                $("#detailsmsg").fadeOut();
                $("#register-submit-btn").html('<img src="include/btn-ajax-loader.gif" /> &nbsp; Sending...');
                $('#register-submit-btn').attr('disabled', 'disabled');
                $('#find-details-btn').attr('disabled', 'disabled');
            },
            success :  function(data)
               {
//Actions to display a success message after data is inserted goes here.
                    }
                });
                    return false;
            //}
        }
    });
});
</script>

点击“register-submit-btn”。我得到的是当我单击 find-details-btn 时应触发的第一个脚本的操作。事实上，当我点击 register-submit-btn 时，甚至 find-details-btn 的动画也会执行。

知道为什么第二个按钮像第一个按钮一样工作吗？

提前致谢，

编辑:添加每个请求的表单结构。

    <form class="register-form" id="register-form" action="" method="POST">             
        <div class="form-group">
            <label class="control-label bold">ID</label>
            <input class="form-control placeholder-no-fix" type="text" maxlength="11" placeholder="Cedula Number" id="first_id" name="first_id" /> 
        </div>

        <div class="form-actions">
        <button type="submit" name="find-details-btn" id="find-details-btn" class="btn btn-success uppercase">Find Details</button>
        </div>

        <div class="alert alert-danger display-hide" id="detailsmsg">
            <!-- messages goes here -->
        </div>

        <div id="details_found" class="hidden">
        <p class="font-blue bold"> Details Found </p>
        <div class="form-group">
            <label class="control-label">Name</label>
            <input class="form-control placeholder-no-fix" type="text" value="" id="f_name" name="f_name" readonly /> </div>
            <div class="form-group">
            <label class="control-label">Second ID</label>
            <input class="form-control placeholder-no-fix" type="text" value="" id="second_id" name="second_id" readonly /> 
        </div>
        <p class="font-blue bold"> Enter your details below: </p>
        <div class="form-group">
            <label class="control-label">Details 1</label>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_1" name="details_1" />
        </div>
        <div class="form-group">
            <label class="control-label">Details 2</label>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_2" name="details_2" /> 
        </div>
        <div class="form-group">
            <label class="control-label">Details 3</label>
            <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="" id="details_3" name="details_3" /> 
        </div>

        </div>
        <div class="form-actions">
            <button type="button" id="register-back-btn" name="register-back-btn" class="btn green btn-outline">Back</button>
            <button type="submit" id="register-submit-btn" name="register-submit-btn" class="btn btn-success uppercase pull-right">Submit</button>
        </div>
    </form>

Answer 1

从你的第二个脚本中我可以看到，你正在调用 AJAX 请求并希望显示成功消息。但您并没有阻止表单提交。

这可能是导致您出现问题的原因。当您尝试进行 AJAX 调用时，请阻止其他重定向页面以实际查看响应的事件。您的代码应如下所示。

<script>
$('document').ready(function()

{
    $("#register-submit-btn").click(function(e){

            e.preventDefault();

            var data = $("#register-form").serialize();

            $.ajax({
            type : 'POST',
            url  : 'update_data.php',
            data : data,
            cache: false,
            beforeSend: function()
            {
                $("#detailsmsg").fadeOut();
                $("#register-submit-btn").html('<img src="include/btn-ajax-loader.gif" /> &nbsp; Sending...');
                $('#register-submit-btn').attr('disabled', 'disabled');
                $('#find-details-btn').attr('disabled', 'disabled');
            },
            success :  function(data)
               {
//Actions to display a success message after data is inserted goes here.
                    }
                });
                    return false;
            //}
        }
    });
});
</script>

这会阻止它提交，并且只会将请求发送到 URL。

现在，如果您的数据没有更新，则可能是您的 PHP 脚本出现了这种情况。如果您仍然无法更新记录，请调试您的 PHP 脚本或发布您的 PHP 脚本 block 以获取更多信息。

祝你编码愉快^_^