如何从URL获取参数并在HTML中使用它？

Question

I am trying to create a checkout flow for my app in which i get the products from the shopping as a url and i take the parameters from the url and add form parameters and together form another url and send it to a php file where i save the datas received. I just wanted to know whether the way i am doing it is correct or not. If not can you please help me by correcting it.

Here is the checkout.js

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

    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 
    var formData = {
        'fname'             : $('input[name=fname]').val(),
        'email'             : $('input[name=email]').val(),
        'phone'             : $('input[name=phone]').val(),
        'address'           : $('input[name=address]').val(),
        'zip'               : $('input[name=zip]').val(),
        'Product'           : location.search.substring(1)
    };
    $.ajax({
        type        : 'GET',
        url         : 'http://localhost/donotdel/process.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

            if ( ! data.success) {

                if (data.errors.fname) {
                    $('#fname-group').addClass('has-error');
                    $('#fname-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.phone) {
                    $('#telephone-group').addClass('has-error');
                    $('#telephone-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.address) {
                    $('#address-group').addClass('has-error');
                    $('#address-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.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();
   });
  }

so my doubt is can i use

'Product'           : location.search.substring(1)

for getting the product parameter from the url and add along with the form data and send like i have done in the code.

Answer 1

I think YES ... You are doing it right but to be more elegant and efficient way for multipurpose use small function below helps you to get parameters from url

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}    

an say now your url is

http://dummy.com/?product=someId&somemoreDetail=somethingelse

You can fetch it as below:

var pid = getUrlParameter('product');
var somedetail = getUrlParameter('somemoreDetail');

and below is how you can integrate in your code:

Assuming your url to be https://www.something.com?product=someID

$('form').submit(function(event) {
    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 

    var prod=getUrlParameter('product');
    //prod will now have the value someID
    var formData = {
        'fname'             : $('input[name=fname]').val(),
        'email'             : $('input[name=email]').val(),
        'phone'             : $('input[name=phone]').val(),
        'address'           : $('input[name=address]').val(),
        'zip'               : $('input[name=zip]').val(),
        'Product'           : prod
    };

    //Other ajax codes
});

SOURCE