How to Append Querystrings to a Url on Submit of a Form

document.querySelector('form').addEventListener("submit", function (e) {
    e.preventDefault()
    
    let param = document.querySelector('input[name="myparam"]').value

    window.location.href = 'https://mywebsite.com/mypage/' + param
})

Ajax Form Submit appends query strings to url and reloads page

Don't forget to add an event.preventDefault() line to avoid having the browser perform the default behavior, which is reloading page on submit.

Try something like

$("#PostItemz").on('submit', function(event){
event.preventDefault()
var formData = new FormData(this);

    $.ajax({
        url: 'inc/modules/post_data.php',
        type: 'POST',
        data: formData,
        success: function (data) {
           alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

});

This should at least solve the reload issue. Also, if you want to target the form, use submit event: $("#form_id").on('submit', function() {//do stuff}) . If you want to target the button in itself, then you can do $("#button_id").on('click', function() {//do stuff}) but for a form I'd advise the first solution.

EDIT: If you place your code in the head, it loads before the rest of the page, thus tries to bind to an ID that does not exists (at the time of processing the script). To avoid this, you should either:

• place the code at the end of the body, just before the </body> tag

• use a $(function() {//stuff}) (shortened for of the
  $(document).on('ready', function() {//do stuff}) ) to wrap up your
  jquery code, essentially telling the browser: "wait for the full page
  to load before executing this script"

The later translates as the following code in your case:

$(function() {
$("#PostItemz").on('submit', function(event){
    event.preventDefault()
    var formData = new FormData(this);

        $.ajax({
            url: 'inc/modules/post_data.php',
            type: 'POST',
            data: formData,
            success: function (data) {
               alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

    });

});

Form submission with a ?key=val query string already in the action attribute ignores that query string

I know this is an old question, but the solution is actually pretty simple (and neat!).

All you have to do is sending the querystring with hidden input fields in the format name="key" and value="value".

?brandcode=JM&t=cat_items would "translate" into:

<input type="hidden" name="brandcode" value="JM" />
<input type="hidden" name="t" value="cat_items" />

Completely remove the querystring from your action.

Form appending values to URL

You apparently don't have the jQuery Validate plugin properly included and initialized (not in your OP), so you're simply submitting the form to the URL in the action attribute.

The reported issue describes the default behavior of a (non-ajax) form submit when you don't have the method="post" attribute within the form tag... a query string is appended to the URL by default.

This has nothing to do with the jQuery Validate plugin.

---

As far as this goes...

submitHandler: function () {
    var userName = $("#UserName").val();
    var password = $("#Password").val();
    var myObject = {UserName:userName, Password: password}  
    $.post('/MyAuthenticationUrl',myObject,function(){
        //Redirect to Home page on success
    });
}

The submitHandler is not coming into play since the plugin is broken (not included, JavaScript error, etc.). However, your intention seems to be to use ajax .post() to submit the form and "Redirect to Home page on success". I don't understand the point of this. If you want to redirect to another URL, then you don't need ajax... simply employ the URL of the action attribute and the form will submit and redirect to this URL automatically. Taking out the submitHandler entirely will revert to this default behavior.

Your markup...

<input type="text" id="UserName" />
<input type="password" id="Password"/>

To use the jQuery Validate plugin, you MUST have a name attribute on any field considered for validation.

<input type="text" name="UserName" id="UserName" />
<input type="password" name="Password" id="Password"/>

There is no exception or workaround for this; it's how the plugin internally keeps track of the various elements.

---

Finally, you have your question tagged with asp.net and asp.net-mvc. In ASP, the jQuery Validate plugin is automatically initialized by the included Unobtrusive Validation plugin. If that's the case then you cannot call the .validate() method directly since the Unobtrusive Validation plugin automatically constructs and calls .validate() based on the data attributes in the HTML markup. The jQuery Validate plugin will only use the first instance of .validate() and totally ignore any subsequent calls.

Remove your call to .validate() to verify this. If nothing changes then you'll know that either it was being over-ridden by ASP's built-in Unobtrusive Validation or that it was entirely broken in the first place.

append query string to any form of URL

<?php

$urls = array(
         'http://www.example.com',
         'http://www.example.com/a/',
         'http://www.example.com/a/?q1=one',
         'http://www.example.com/a.html',
         'http://www.example.com/a.html?q1=one'
        );

$query = 'q2=two';

foreach($urls as &$url) {
   $parsedUrl = parse_url($url);
   if ($parsedUrl['path'] == null) {
      $url .= '/';
   }
   $separator = ($parsedUrl['query'] == NULL) ? '?' : '&';
   $url .= $separator . $query;
}

var_dump($urls);

Output

array(5) {
  [0]=>
  string(29) "http://www.example.com/?q2=two"
  [1]=>
  string(32) "http://www.example.com/a/?q2=two"
  [2]=>
  string(39) "http://www.example.com/a/?q1=one&q2=two"
  [3]=>
  string(36) "http://www.example.com/a.html?q2=two"
  [4]=>
  &string(43) "http://www.example.com/a.html?q1=one&q2=two"
}

CodePad.

---

Related Topics