How to add parameters to the URL along with the form data?

Question

I am trying to send some data using the form to a php file, where I will be saving the parameters to the database. Here I am able to send the form datas but not the parameters, which are what I want to send.

Here is the JavaScript code that I wrote

function formload() {
$('form').submit(function(event) {

    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 
    var formData = {
        'firstname'         : $('input[name=firstname]').val(),
        'lastname'          : $('input[name=lastname]').val(),
        'email'             : $('input[name=email]').val(),
        'telephone'         : $('input[name=telephone]').val(),
        'address1'          : $('input[name=address1]').val(),
        'address2'          : $('input[name=address2]').val(),
        'city'              : $('input[name=city]').val(),
        'zip'               : $('input[name=zip]').val(),
        'state'             : $('input[name=state]').val(),
        'country'           : $('input[name=country]').val(),
        'Product'           : '&model=1&quantity=3&model=2&quantity=2'
    };
    $.ajax({
        type        : 'GET',
        url         : 'http://localhost/test/www/checkout.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

            if ( ! data.success) {

                if (data.errors.fname) {
                    $('#firstname-group').addClass('has-error');
                    $('#firstname-group').append('<div class="help-block">' + data.errors.name + '</div>');
                }

                if (data.errors.fname) {
                    $('#lastname-group').addClass('has-error');
                    $('#lastname-group').append('<div class="help-block">' + data.errors.name + '</div>');
                }

                if (data.errors.email) {
                    $('#email-group').addClass('has-error');
                    $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.telephone) {
                    $('#telephone-group').addClass('has-error');
                    $('#telephone-group').append('<div class="help-block">' + data.errors.name + '</div>');
                }

                if (data.errors.address1) {
                    $('#address1-group').addClass('has-error');
                    $('#address1-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.city) {
                    $('#city-group').addClass('has-error');
                    $('#city-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.zip) {
                    $('#Zip-group').addClass('has-error');
                    $('#Zip-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.state) {
                    $('#state-group').addClass('has-error');
                    $('#state-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.country) {
                    $('#country-group').addClass('has-error');
                    $('#country-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }
                if (data.errors.products) {
                    $('#Product-group').addClass('has-error');
                    $('#Product-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

            } else {

                $('form').append('<div class="alert alert-success">' + data.message + '</div>');

                window.location = 'http://www.dekhodaily.com';

            }
        })

        .fail(function(data) {
            console.log(data);
        });
    event.preventDefault();
 });
}

Here the formdata is what I want to send, and along with it I want to send the product parameter also.

score 0 · Answer 1 · answered Jun 11 '15 at 08:38

0

Since you have more than one set of same names, model and quantity is repeated, so I assume it as an array. Just simply change it to this:

var formData = {
    'firstname'         : $('input[name=firstname]').val(),
    'lastname'          : $('input[name=lastname]').val(),
    'email'             : $('input[name=email]').val(),
    'telephone'         : $('input[name=telephone]').val(),
    'address1'          : $('input[name=address1]').val(),
    'address2'          : $('input[name=address2]').val(),
    'city'              : $('input[name=city]').val(),
    'zip'               : $('input[name=zip]').val(),
    'state'             : $('input[name=state]').val(),
    'country'           : $('input[name=country]').val(),
    'Product'           : [{
            "model": 1,
            "quantity": 3
        },
        {
            "model": 2,
            "quantity": 2
        }
    ]
};

answered Jun 11 '15 at 08:38

Praveen Kumar Purushothaman

164,888
24
203
252

just in case i do not know the size of array. how can i include all the models – Susan Williams Jun 11 '15 at 08:49
and if i send it as an array how to get the same array into individual values in the php file? – Susan Williams Jun 11 '15 at 08:49
another thing. If i had taken the product data from another url using **location.search** then how will i add that to my present url – Susan Williams Jun 11 '15 at 08:53
For not knowing the size only you have to do this way... Check out the `var_dump($_POST)` in PHP and see how it gets rendered. – Praveen Kumar Purushothaman Jun 11 '15 at 08:57

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

Actually, you can get this with two functions :

Encoding your JSON object with this method :

jquery.param

This code :

var params = { width:1680, height:1050 };
var str = jQuery.param( params );
$( "#results" ).text( str );

will return width=1680&height=1050

And decoding the url to JSON with this one :

jquery.getJSON

with this code :

$.getJSON('http://yoururl.com/index.html?param1=value1&param2=value2', function(data) {
    // the JSON is in the data variable
});

(code from : How to get JSON from URL in Javascript?)

edited May 23 '17 at 12:30

Community

1
1

answered Jun 11 '15 at 08:41

Seblor

6,947
1
25
46

If i had taken the product data from another url using location.search then how will i add that to my present url – Susan Williams Jun 11 '15 at 08:53
(I corrected the code in my post). I don't really understand what you want. if you just need to add parameters, add `param : value` in your `formData` var. – Seblor Jun 11 '15 at 08:55
I totally changed my answer to fit what you want. – Seblor Jun 11 '15 at 09:06
the parameter that i want to pass in this url is of two kinds..1) it is the form data 2) it is the data that i got from another parameter..i have developed an checkout flow in which i get the product details through the url from the shopping cart. I take out the products parameter from the url and add it along with the form data and send it to a php file where all the datas are extracted and are saved. Now my doubt is how to get the parameters from the url from the shopping cart, add it with form data in the checkout and forward it to the php file. – Susan Williams Jun 11 '15 at 10:12
Them use the second function (`jquery.getJSON`) to retrieve the parameters in the URL, or use PHP code like that : `` in the javascript code. – Seblor Jun 11 '15 at 10:52
can you explain me the method of how to get it using the jquery.getJSON in a little more detailed way – Susan Williams Jun 11 '15 at 10:54
If you click on the link, you will be redirected to the jQuery manual... I don't know how to get more explicit with my comment `// the JSON is in the data variable` – Seblor Jun 11 '15 at 10:55

How to add parameters to the URL along with the form data?

2 Answers2