Ajax function reloads the page with some parameter on response

Question

I am working on an application where user submit his/her information in tabs...

After .onclick() function, data is submitted to action and saved correctly and returned "success" successfully redirect user to login page...

I have returned two responses so far, "success" and "fail"

But the problem really is, when returning "false"...console.log shows the response correctly, although the work i'd like to perform on "fail" isn't really working..and page reloads with some parameters(i will show it in snapshot)....

Html

     <form class="form-horizontal" id="default" name="myform">
     <fieldset title="Step1" class="step" id="default-step-0">

     <div class="form-group">
     <label class="col-lg-2 control-label">Email</label>
      <div class="col-lg-10">
      <input type="email" class="form-control" id="Email1" required>
      <label id="err1" class="col-lg-6 control-label" "></label>
       </div>
       </div>
       <div class="form-group">
        <label class="col-lg-2 control-label">Password</label>
        <div class="col-lg-10">
        <input type="password" name="password1" class="form-control" id="password1" required>
         </div>
          </div>
           <div class="form-group">
           <label class="col-lg-2 control-label">Confirm Password</label>
           <div class="col-lg-10">
<input type="password" name="confirmpassword1" class="form-control" id="confirmpassword1" required>
            <label id="passMatch" class="col-lg-6 control-label""></label>
           </div>
           </div>
           </fieldset>
           <fieldset title="Step 2" class="step" id="default-step-1">
             //some other input fields on 2nd tab
            </fieldset>
     <input type="button" class="finish btn btn-danger" value="Save" id="btnSubmitAll" />
             </form>

Ajax

<script>
        $("#btnSubmitAll").click(function (event) {
                event.preventDefault();
                var Email = $('#Email1').val();
                var password = $('#password1').val();
                var confirmpassword = $('#confirmpassword1').val();
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Submit", "Home")',
                    dataType: "JSon",
                    async: false,
                    data: {"Email": Email, "password": password, "confirmpassword": confirmpassword},
                    success: function (data) {
                        if (data == "success")
                            {
                            window.location.href = '@Url.Action("login","Home")';
                            console.log(data);
                        }
                        else {
                            $('#err1').html("Email Exist");
                            console.log(data);
                        }
                    },
                    error: function (data, jqXHR, exception) {
                        //some errors in if/else if/else
                        }
                    }
                });
    });
    </script>

Please remember, when data == "success", all things go right(returns success after successfull record insertion), but when "fail" returned, console shows it correctly but label not updated with the message and also the whole page reloads with some parameters from the form inputs as can be seen below...

enter image description here

InAction

 if (objIdHelper.IsUserExist(Email))
 {
 return this.Json ("fail");
 }
 else
 {
//some process
return this.Json ("success");
}

I am surely missing some logic or doing something stupid, please help.... Any kind of help will be appreciated...thanks for your time

It sounds like in both cases your `data` (or `data1` based on your below comment) equals success. You console.log is correct because it's outputting data regardless but since the page refreshes, that tells me that `data == 'success'` in both cases. Comment out the code in the `success` block and I bet it won't log anything nor refresh. — Leeish, Jun 30 '15 at 17:19
Whats I'm say is `$('#err1').html("Email Exist");console.log(data);` is not running because the value of `data` is success — Leeish, Jun 30 '15 at 17:42
You need to fix your action. It must be returning `success` every time for some reason. — Leeish, Jun 30 '15 at 17:59
i can fix action code(lots of i/else), but can i do it with exception,,,,i mean if i throw exception with message??? — Suhail Mumtaz Awan, Jun 30 '15 at 18:03

score 1 · Answer 1 · answered Jun 30 '15 at 17:11

1

Your if statement if (data == "success") uses data instead of data1 like the function specifies.

answered Jun 30 '15 at 17:11

d0nut

2,835
1
18
23

thanks for reply, +1 for effort, i have updated my question....reason for that because i was trying that out with data1 (some one mentioned in other answer that "data" conflicts with some browser)... i will stick with data, thats my mistake to not mention earlier – Suhail Mumtaz Awan Jun 30 '15 at 17:16
1

You still have to fix the success function. It's listed as data1. – d0nut Jun 30 '15 at 17:17

score 1 · Accepted Answer · answered Jun 30 '15 at 17:19

1

Check for the argumet passed in the success callback..Also note that you have wrong understanding for error callback. It wont execute if there are any errors in success callback conditions. It is to handle network errors.

answered Jun 30 '15 at 17:19

Rayon

36,219
4
49
76

yes i have wrong understanding, no i am returning json("fail") to the function.... – Suhail Mumtaz Awan Jun 30 '15 at 17:27
1

Yes, you can handle those kind of errors in there..[Refer this](http://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages) for other options. – Rayon Jun 30 '15 at 17:31

Ajax function reloads the page with some parameter on response

2 Answers2