当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - preventing form auto submit ajax laravel

问题描述:

I have fetched the data from database using ajax and i am showing it to the user using javascript confirm dialog. But even after user selects cancel option, form is being submitted, but I want to submit a form only when user wants to proceed further by selecting OK in confirm box. Here is my 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>

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

I am now getting the confirm dialog when user clicks the submit button. I just want to proceed further only when user clicks OK in confirm dialog.

网友答案:
<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>

or you can use e.preventDefault(); in place of return false.

网友答案:

If you want to submit the form when the user presses the ok button, you will need to bind a click event to the ok button to submit the form. See example below.

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

    })
});

hope this help.

网友答案:

You can change the button type of your button from submit to button like

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

to avoid automatic submit

网友答案:

You can put ajax call in function and call it from confirm dialog function also you should add return false on submit click to prevent the default form submit action:

        $('#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);
                }

              });
            };
分享给朋友:
您可能感兴趣的文章:
随机阅读: