jquery submit form and query string issue

Question

I have some values on the query string of the form page. When I submit the form using the submit button it self I can get the query string values but when I submit the form using jquery as below. I don't see the query string values anymore. Am I messing something?

      $('#PasswordResetForm').submit(function () {

         if (some conditions) {
            $('#PasswordResetForm').submit();
         }
         else {             
            return false;
         }
      });

the link is something like this:

 http://websitename/Account/PasswordReset/?username=username&token=ZnsHnVh3oIOwOR2GUaGfsA2

html code is as below:

@using (Html.BeginForm("PasswordReset","Account",FormMethod.Post,new        
                                                      {id="PasswordResetForm"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary("", new { id = "validation" })

    <fieldset>
        <legend ">Enter your User Name</legend>

        <br />

        <table id="MainTable" border="0">
            <tr class="MainTr">
                <td class="FirstTd">
                    @Html.Label("User Name")
                </td>
                <td class="SecondTd">

                </td>

            </tr>
            <tr class="MainTr">
                <td class="FirstTd">
                    New Password
                </td>
                <td class="SecondTd">
                    @Html.Password("newPassword")
                </td>

            </tr>
            <tr class="MainTr">
                <td class="FirstTd">
                    Confirm New Password
                </td>
                <td class="SecondTd">
                    @Html.Password("confirmNewPassword")
                </td>

            </tr>                
            <tr class="MainTr">                                        
                <td colspan="2">
                    <input type="submit" id="submitBt" value="Recover Password" />
                </td>                    
            </tr>
        </table>
    </fieldset>
}

I can't see the token on the server anymore. when I use jquery to submit the form. I'm using mvc 4 and jquery 2.0.0

Answer 1

Try This

$(function()
{

    function  ValidateData() {
             if (some conditions) {
                return true;
             }
             else {             
                return false;
             }
          }
});

HTML Changes

 <input type="submit" id="submitBt" value="Recover Password" onClick="return ValidateData();" />

Answer 2

Use the following code:

$('#PasswordResetForm').submit(function () {
    if (some conditions) {
        this.submit();
    }
    else {             
        return false;
    }
});

Calling $('#PasswordResetForm').submit(); calls the same function again. Don't wrap it as a jquery object.

Preserve the query strings setting the query strings as hidden elements:

@Html.Hidden("username", Request.QueryString["username"])
@Html.Hidden("token", Request.QueryString["token"])

Answer 3

$('#PasswordResetForm').submit(function (e) {
    e.preventDefault();
    if (some conditions) {
        this.submit();
    }
    else {             
        return false;
    }
});

Answer 4

Use also the .on click event listener of jquery like

$('#PasswordResetForm').on('click', function() { 
   //code here.....
});

Additional knowledge. :)

Answer 5

Querystring parameters are available using JavaScript's location object's search property, i.e. location.search. From there you can work with that in your submit function.

e.g. http://somesite.com/?querystringParam1=someVal&querystringParam2=someOtherVal

location.search will equal ?querystringParam1=someVal&querystringParam2=someOtherVal

If you need the querystring in a .NET like NameValueCollection, I wrote a quick JSFiddle, http://jsfiddle.net/nickyt/NnyV2/5/

(function() {
    function getQuerystringAsNameValueCollection(querystring) {
       var querystringKeyValuePairs = querystring.split('&');
       var querystringHashTable = {};

       for (var index = 0; index < querystringKeyValuePairs.length; index++) {
           var keyValue = querystringKeyValuePairs[index].split('=');
           querystringHashTable[keyValue[0]] = keyValue[1];
       }
    }

    $('#PasswordResetForm').submit(function (e) {
             var querystring = getQuerystringAsNameValueCollection(location.search.substring(1));

             if ("token" in querystring) { // Do more checks on the token if necessary
                $('#PasswordResetForm').submit();
             }
             else {             
                e.preventDefault();
             }
          });
})();

Answer 6

This makes no sense:

$('#PasswordResetForm').submit(function () {
   $('#PasswordResetForm').submit();
}

Because you are raising the event again.

You just need to return true, i.e.:

$('#PasswordResetForm').submit(function () {
   if (cond)
      return true;
   return false;
}

http://api.jquery.com/submit/