vjdj
vjdj

Reputation: 95

jQuery submit when another function is ok

I using 2 jquery script, function in my form. How to do when the first function have error I can't submit form.

My actual code:

<script>
     $(document).ready(
            function () {
                $("form#eee").on('click',
                    function () {
                        if ($('input[name^="rr"]:checked').length>0) {
                            return true;
                        }
                        else {
                            alert("minimum one options!");
                            return false;
                        }
                    }
                );
            }
     );


     $("input[type=number]").on('click keydown keyup',function() {
            var min = $('input[name^="Min"]').val();
            var max = $('input[name^="Max"]').val();
            if (min < max) {
                $('.error').text("");
            } else {
                $('.error').text("min>max");
            }
     });
    </script>

    <script>
     $('#form').on('submit', function (e) {

            e.preventDefault();
            var formul = $('#form').serialize();
            $.ajax({
                type: 'POST',
                data: formul,
                url: 'action',
                success: function (html) {
                    $('.returner').html(html);
                },
                error: function () {
                    alert('error!!')
                }

            })
    })
    </script>

Now code working, but for example when I min>max i can press submit button. ho to do when min >max block submit button.

Upvotes: 0

Views: 67

Answers (2)

Michael
Michael

Reputation: 1089

Use some variable var error=0; and if has error stop script executoon if(error == 1) { alert('STOP'); return; };

 <script>
   var error=0;
         $(document).ready(
                function () {
                    $("form#eee").on('click',
                        function () {
                            if ($('input[name^="rr"]:checked').length>0) {
                                return true;
                            }
                            else {
                                alert("minimum one options!");
                                return false;
                                   error=1;
                            }
                        }
                    );
                }
         );


         $("input[type=number]").on('click keydown keyup',function() {
                var min = $('input[name^="Min"]').val();
                var max = $('input[name^="Max"]').val();
                if (min < max) {
                    $('.error').text("");
                } else {
                    $('.error').text("min>max");
                }
         });
        </script>

        <script>
         $('#form').on('submit', function (e) {

             if(error == 1) { alert('STOP'); return; };

                e.preventDefault();
                var formul = $('#form').serialize();
                $.ajax({
                    type: 'POST',
                    data: formul,
                    url: 'action',
                    success: function (html) {
                        $('.returner').html(html);
                    },
                    error: function () {
                        alert('error!!')
                    }

                })
        })
        </script>

Upvotes: 0

pinowthebird
pinowthebird

Reputation: 431

Disable or enable your input button in the first function, like this:

$("input[type=number]").on('click keydown keyup',function() {
    var min = $('input[name^="Min"]').val();
    var max = $('input[name^="Max"]').val();
    if (min < max) {
        $('.error').text("");
        $('input[type="submit"]').prop('disabled', true);

    } else {
        $('.error').text("min>max");
        $('input[type="submit"]').prop('disabled', false);
    }
});

If possible, then use the HTML ID of the submit button, instead of the selector I'm using.

Upvotes: 1

Related Questions