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

what "query strings" are you expecting on the server that you are not receiving? token value is the one you are expecting right? Is this view called "PasswordReset"? — sergioadh, Aug 05 '13 at 02:34
yes... I'm expecting to get token from query string. but request.querystring.count is 0. — Daniel, Aug 05 '13 at 02:38

sergioadh · Answer 1 · 2013-08-05T02:46:16.673

1

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"])

edited Aug 05 '13 at 02:46

answered Aug 05 '13 at 01:45

sergioadh

1,461
1
16
24

I'm going to test this and I'll back to you. – Daniel Aug 05 '13 at 02:13
Sorry... no use. I still can't see the querystring parameters. – Daniel Aug 05 '13 at 02:21
If i remove the form parameter how can I call the form in jquery? – Daniel Aug 05 '13 at 02:49
1

Just add the query strings as hidden elements – sergioadh Aug 05 '13 at 02:51
there should be a way to get the querystring parameters in the server side without extra work in the client side, but if I couldn't find any other way I think I have to add a hidden field as you said. – Daniel Aug 05 '13 at 02:53
The query string parameters that I've seen are preserved are the ones that are part of your route ... – sergioadh Aug 05 '13 at 02:57
thanks for your answers. not that it doesn't look good. It's working as well but I'm going with AKA answer. – Daniel Aug 05 '13 at 03:01
I didn't have to put any hidden control to the form, but in your answer I need to add hidden control to the form. Imagine if I had 5 or 10 query string values. Then I had to add 10 hidden controls. – Daniel Aug 05 '13 at 03:04

nickytonline · Answer 2 · 2013-08-05T03:12:41.593

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();
             }
          });
})();

Thanks nichyt for your answer, but I already found my answer from AKA. sorry — Daniel, Aug 05 '13 at 03:21
@Daniel, I know it was already answered, but it's better to bind events for separation of concerns, but as well ,multiple binds can be done on an element. And this can all be done without modifying markup. You could do all this in an external JS file. Some more here http://stackoverflow.com/questions/6941483/onclick-vs-event-handler or just Google "unobtrusive javascript" — nickytonline, Aug 05 '13 at 03:31

score 1 · Accepted Answer · answered Aug 05 '13 at 02:46

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();" />

answered Aug 05 '13 at 02:46

Amit

15,217
8
46
68

I'm going to test this and I'll back to you. – Daniel Aug 05 '13 at 02:51
it's working now... I really don't understand why the query string are removed when we call a specific action. – Daniel Aug 05 '13 at 03:02

score 0 · Answer 4 · answered Aug 05 '13 at 01:57

0

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

answered Aug 05 '13 at 01:57

chamara

12,649
32
134
210

I'm going to test this and I'll back to you. – Daniel Aug 05 '13 at 02:13
Sorry... no use. I still can't see the querystring parameters. – Daniel Aug 05 '13 at 02:22

score 0 · Answer 5 · answered Aug 05 '13 at 02:04

0

Use also the .on click event listener of jquery like

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

Additional knowledge. :)

answered Aug 05 '13 at 02:04

HTTP

1,674
3
17
22

score -1 · Answer 6 · answered Aug 05 '13 at 02:43

-1

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/

answered Aug 05 '13 at 02:43

thepirat000

12,362
4
46
72

the form is being submitted and I can see all the FormCollections in the server side. All I need is to be able to get the QueryStrings as well. – Daniel Aug 05 '13 at 02:45

jquery submit form and query string issue

6 Answers6