防止表单自动提交ajax laravel

Posted 2023-03-14

【中文标题】防止表单自动提交ajax laravel

【英文标题】：preventing form auto submit ajax laravel

【发布时间】：2015-12-20 06:38:58

【问题描述】：

我已经使用 ajax 从 database 获取数据，并使用 javascript confirm 对话框将其展示给用户。但即使在用户选择cancel 选项后，form 正在被提交，但我只想在用户想要通过在确认框中选择OK 进一步继续时提交表单。这是我的code

     <form class="form-horizontal form-bordered" method="post" id="ncell" action="formaction">
           <input type="hidden" name="_token" value="csrf_token()">

             <div class="form-group">
                <label class="col-md-3 control-label" for="inputSuccess">Amount</label>
                     <div class="col-md-6">
                         <select class="form-control mb-md" name="amount" id="amount">
                                 <option value="10">10</option>
                                 <option value="20">20</option>
                                 <option value="30">30</option>
                                 <option value="40">40</option>
                                 <option value="50">50</option>
                          </select>

                  </div>
               </div>

    <div class="input-group mb-md">                  
    <button type="submit" class="btn btn-warning btn-sm" id="sub">Submit</button>
     </div>
</form>

还有我的javascript

<script>
    $("#ncell").submit(function(e)
        var selectedVal= $("select option:selected").val();
        $.ajax(
            type:"GET",
            url: "/getdollarvalue",//put y
            data: value:selectedVal,
            contentType: "application/json; charset=utf-8",
            dataType: "Json",
            success: function(result)
                return confirm(result.nrs); // Note Send the Json Object from the server side
            

        );
        e.preventDefault();
    );
</script>

当用户单击submit 按钮时，我现在得到确认对话框。我只想在用户单击confirm 对话框中的OK 时继续进行。

【问题讨论】：

在按钮点击上添加preventDefault()e.preventDefault()

需要在ok按钮上绑定click事件才能提交表单。

【参考方案1】：

<script>
        $("#ncell").submit(function(e)
            var selectedVal= $("select option:selected").val();
            $.ajax(
                type:"GET",
                url: "/getdollarvalue",//put y
                data: value:selectedVal,
                contentType: "application/json; charset=utf-8",
                dataType: "Json",
                success: function(result)
                    if(confirm(result.nrs))
                         $("#ncell").submit();
                   
                

            );
            return false;
        );
    </script>

或者您可以使用e.preventDefault(); 代替return false。

【讨论】：

我尝试使用return false 并添加preventdefault，添加这些可以防止表单提交，即使我在确认对话框中单击OK。

当用户在确认框中点击确定时，您要提交此表单吗？

【参考方案2】：

您可以将按钮的按钮类型从提交更改为按钮，如

<input type="button" class="btn btn-warning btn-sm" id="sub"/>

避免自动提交

【参考方案3】：

如果你想在用户按下确定按钮时提交表单，你需要给确定按钮绑定一个点击事件来提交表单。 请参阅下面的示例。

$('.ok-btn').click(function()
    var data = $('form').serialize();
     // your ajax to submit the form and handle the response.
    $.ajax(

    )
);

希望对您有所帮助。

【参考方案4】：

您可以将 ajax 调用放入函数中，并从确认对话框函数中调用它 您还应该在提交点击时添加 return false 以防止默认的表单提交操作：

        $('#submit').on('click', function() 
              confirmFunction('Are you sure you want to...');
              return false;
            

            function confirmFunction(message) 
              //show confirm dialog ( ok - cancel )
              $('#confirm').show();
              $('#confirm p').innerhtml(message);
              $('.ok').on('click', function()
                ajaxSubmit();
                $('#confirm').hide();
              );
              $('.cancel').on('click', function()
                $('#confirm').hide();
              );
            

            function ajaxSubmit() 
              var selectedVal = $("select option:selected").val();
              $.ajax(
                type: "GET",
                url: "/getdollarvalue", //put y
                data: 
                  value: selectedVal
                ,
                contentType: "application/json; charset=utf-8",
                dataType: "Json",
                success: function(result) 
                  return confirm(result.nrs);
                

              );
            ;