CODEWITHSUNDEEP
javascriptjqueryajaxformslaravel
Sid
Sid

Reputation: 5833

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.

Upvotes: 1

Views: 3330

Answers (4)

Mahmoud Kassem
Mahmoud Kassem

Reputation: 429

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);
                }

              });
            };

Upvotes: 0

guradio
guradio

Reputation: 15555

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

Upvotes: 1

mdamia
mdamia

Reputation: 4557

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.

Upvotes: 0

Amit Garg
Amit Garg

Reputation: 3907

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

Upvotes: 2

Related Questions