how to prevent redirect on form submit

Question

i am getting a form with user parameters when i make an AJAX call to a page which later on is submiited to a url so that i can create a session for the same user in advance and when that person goes to that site he sees his name there. i created one div tag with id "abc_session", assign that form (whose id is fm1) to it,and submitted the form.

now as per the requirement session is created but page automatically gets redirected to that site url to which form is submitted.i just don't wan't that to happen.

can anyone please suggest something..or some workaround

the form that AJAX returns looks something like this:

<html>
<body onload="document.fm1.submit();return false">
<form name = "fm1" method="post" action = "https://abcd.com/abc ">
<input type=hidden name ="name" value="xyz">
<input type=hidden name ="login_parameters" value="CDF5D71C5BDB942EE2FB6C285B8DEBFE4C5675137B615CD2276571813AAC872AC8942E26B71026414BED1FEA09427D0B20A50FE2F70032D2E5B382598EC3C71D73EAB4ECBF7273A73BEB98ACEA4A0B775E7772BDC7C6746C355">
</form></body>
</html>

and the script goes like this

 $(document).ready(function() {

            function callwebsite()
            {
                 $.ajax({
                      url: "/NASApp/benemain/website",
                      data: {},
                      type:"POST",
                      dataType: 'text',
                      cache: false,
                      success: function (data) {

                          alert("Call made to website.. ");

                            console.log(data);
                            document.getElementById("abc_session").innerHTML=data;
                            document.fm1.submit();


                    },
                    error : function(response){
                        console.log('ERROR');
                    },
                    statusCode : {
                        500 : function() {
                            console.log('500 error');
                            window.location.reload(true);
                        },
                        401 : function() {
                            console.log('401 error');
                            window.location.reload(true);
                        },
                        404 : function(){
                            console.log('400 error');
                        }
                    }
                });
            }
            callwebsite();

tried extracting the data and maiking another ajax call as suggested by quentin but getting this error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource.This can be fixed by moving the resource to the same domain or enabling CORS."

$.ajax({
                      url: lcAction,
                      data: {partner_id:lcPartner,login_parameters:lcLP },

                      type:"POST",
                      headers:{'Access-Control-Allow-Origin': '*'},
                      dataType: 'text',
                      //crossDomain: true,
                      //cache: false,
                      success: function(data)
                      {
                          alert("success");
                      },
                      error:function(response)
                      {
                          //alert("error");
                          console.log(response);
                      }
                });

score 0 · Answer 1 · answered Nov 05 '14 at 11:18

0

You should use e.preventDefault() as soon as you submit the form.

answered Nov 05 '14 at 11:18

Vinita Rathore

542
3
12

The event handler is being triggered by the ready event, not by a form submission. Prevent the default action won't do anything (because there isn't a default action for the ready event). – Quentin Nov 05 '14 at 11:22
My bad. Misunderstood it. Check this link for your refrence: http://stackoverflow.com/questions/24248576/prevent-form-submission-javascript – Vinita Rathore Nov 05 '14 at 12:04

score 0 · Accepted Answer · answered Nov 05 '14 at 11:21

0

You are submitting the form:

document.getElementById("abc_session").innerHTML=data;
document.fm1.submit(); // Here

Don't do that.

Extract the data from it and make another Ajax request.

answered Nov 05 '14 at 11:21

Quentin

914,110
126
1,211
1,335

can you please share any example how to extract data from a form that is retrieved through ajax at run-time. – akshay Nov 05 '14 at 11:46
i extracted the data and posted it using ajax but it is giving me this error ""Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource.This can be fixed by moving the resource to the same domain or enabling CORS". do you know what is the issue here? – akshay Nov 05 '14 at 14:40
http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – Quentin Nov 05 '14 at 15:09

how to prevent redirect on form submit

2 Answers2