防止表单自动提交ajax laravel答案

【问题标题】：preventing form auto submit ajax laravel防止表单自动提交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事件才能提交表单。

标签： javascript jquery ajax forms laravel

【解决方案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);
                }

              });
            };

【讨论】：