Using jQuery ajax method to pass GET parameters

Question

I want to use the jQuery ajax method to process a form. In the php script that I call (myScript.php) I'd like to use the GET value that is set by submitting the form within the php script but it is not passing through properly.

<script>
 $('#myForm').submit(function(event) {
        event.preventDefault();
         $.ajax ( {
            url: "myScript.php",
            success: function (data) {
               console.log(data);
            }
        } );
    });
</script>

My form has one field (username):

<form id='myForm' action="" method="get">
    Username: <input type="text" id="username" name="username" value="" />
    <button id='submitButton' name="">Search</button>
<form>

And finally, my php script will just return back the get value.

<?php 
$returnString = array();
$returnString['username'] = $_GET['username'];
echo json_encode($returnString);
?>

The console returns: {"username":null} regardless of what value you type in the input box.

You have to send the data the user has submitted using the data attribute of the .ajax() method. Search stackoverflow, there are tons of answers. — pmandell
– pmandell, Commented Mar 18, 2014 at 19:42

Josh · Accepted Answer · 2014-03-18 19:46:01Z

1

You just need to serialize the form data:

$('#myForm').submit(function(event) {
    event.preventDefault();

    var formData = $(this).serialize();

     $.ajax ( {
        url: "myScript.php",
        data: formData,
        success: function (data) {
           console.log(data);
        }
    } );
});

Anything in the data property will get appended to the end of the URL according to spec.

answered Mar 18, 2014 at 19:46

Josh

45k7 gold badges106 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:11:10Z

0

You can use the get feature of your ajax string:

type (default: 'GET')
Type: String
The type of request to make ("POST" or "GET"), default is "GET". 
Note: Other HTTP request methods, such as PUT and DELETE, can 
also be used here, but they are not supported by all browsers.

https://api.jquery.com/jQuery.ajax/

Or, you can just make the window redirect with the variable in the URL as a string: how do I pass Jquery value to a different page?

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 18, 2014 at 19:43

ntgCleaner

6,00510 gold badges54 silver badges87 bronze badges

Collectives™ on Stack Overflow

Using jQuery ajax method to pass GET parameters

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related