CODEWITHSUNDEEP
javascriptjquerycss
Tuz
Tuz

Reputation: 1980

submit button from hidden form refresh the page

I have a form , after validate I take data and update the hidden form that I popup or just need to be hidden and need to be posted to the action.

from hidden I do manual submit from code the bug is that always post by submit lead to refresh the page instead. redirecting

my js code:(could be typo) . - form validate

form.validate({
    ignoreTitle: true,
    onfocusout: function (element) {
        if (!this.checkable(element)) {
            this.element(element);
        }
    },
    onkeyup: false,
    rules: {
        firstName: {required: true, minlength: 2, maxlength: 45},
        lastName: {required: function () {
            return checkField("lastName")
        }, minlength: 2, maxlength: 45},

    },
    messages: {
        firstName: {required: FieldRequiredStr, minlength: invalidFirstName, maxlength: invalidFirstName},
        lastName: {required: FieldRequiredStr, minlength: invalidLastName, maxlength: invalidLastName},

    },
    onsubmit: true,
    submitHandler: function (frm) {
        if(!form.valid())return;

        $("#send",form).attr('disabled', 'disabled');
        $("#send",form).addClass('sent');

        form.ajaxSubmit(
            {
                url: "api.php",
                dataType: 'xml',
                success: function (response) {
                    var xml;

                    if (typeof response == 'string') {
                        xml = new ActiveXObject("Microsoft.XMLDOM");
                        xml.async = false;
                        xml.loadXML(response);
                    }


                        var url = "https://url/login"
                        console.log(url);
                        $('#frm2').attr('action', url );
                        $('#email').val($("#email",frm).val());
                        $('#password').val($("#password",frm).val());
                       // $.fancybox({href: '#make-deposit'});
                        //$("#frm2").submit();
                        //
                        setTimeout(function () {
                            $("#frm2").submit();

                        }, 2000);


                    }
                }
            });

    },
    errorPlacement: function (error, element) {

            //this is working good
        // A bit ugly.


    }

my hidden form (even if it is not hidden click on submit will casue refresh)

          <div style="display:none;">

                    <form id="frm2" method="post" action="https://url/login" target="">
        <input type="hidden" id="email" name="email" value="" />
         <input type="hidden" id="password" name="password" value="" /> 
           <input class="dbtn" type="submit" name="btn" id="btn" value="btn" />

                    </form>
            </div>

It's working without slash at the end in the url on action But the post data is not send in that case

Upvotes: 0

Views: 370

Answers (2)

Sarvagya Saxena
Sarvagya Saxena

Reputation: 229

in submit handler function, use 

e.preventDefault();
e.stopPropogation();

where e being the event passed.

Upvotes: 1

Poul Bak
Poul Bak

Reputation: 10930

It happens because the form IS submitted. You need to return false in your submithandler, like this:

submitHandler: function (frm) {
 //Your code here
return false;
}

Upvotes: 1

Related Questions