Jquery - parsing multiple values of one parameter from URL to HTML

Question

I want to parse values of parameters from URL generated by my contact form (GET method and forced to use JQuery instead of pure JS). It's working inside the console, values are read correctly. I have two problems that come from not being proficient in Jquery and JS.

I can't find a reliable method of putting the values I have into the webpage (for example, into table). I want to have a table so the user can see what they had entered in the contact form.
I have checkboxes inside my form and it's causing a problem with reading the values from the URL. If I check two of the four boxes, only one of them is read and printed into the console. I need to read all of the information that the user provided. I guess I need arrays but how to use them in this case?

An example of a generated URL.

localhost:63342/2018-11-13-html/form_sent.html?phone=4325325235&adress=testadress&order=book1&order=book2&deliverydate=datadostawy&deliverymethod=chinamail&agree=on

My current code for reading and logging the URL parameters:

<section>
    <script>
        $.urlParam = function (name) {
            var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                .exec(window.location.href);
            if (results == null) {
                return 0;
            }
            return results[1] || 0;
        };

        console.log($.urlParam('phone'));
        console.log($.urlParam('adress'));
        console.log($.urlParam('order'));
        console.log($.urlParam('deliverydate'));
        console.log($.urlParam('deliverymethod'));
    </script>
</section>

And my form:

<section>
    <header><h2>Contact</h2></header>
    <form style="width:500px" action="form_sent.html" method="get">
        <fieldset>
            <legend>Contact form:</legend>
            <fieldset>
                <legend>Contact info:</legend>
                <span class="label" style="width: 50px">Phone: </span>
                <input name="phone" type="tel" required="true"/><br/>
                <span class="label" style="width: 50px">Adress: </span>
                <input name="adress" type="text" required="true"/><br/>
            </fieldset>
            <fieldset>
                <legend>Order:</legend>
                <span class="label" style="width: 100px">Books:</span>
                <br>
                <input type="checkbox" name="order" value="book1"/>Book1<br/>
                <input type="checkbox" name="order" value="book2"/>Book2<br/>
                <input type="checkbox" name="order" value="book3"/>Book3<br/>
                <input type="checkbox" name="order" value="book4"/>Book4<br/>
            </fieldset>
            <fieldset>
                <legend>Delivery date:</legend>
                <span class="label" style="width: 50px">Date: </span>
                <input type="text" name="deliverydate" required="true"/><br/>
            </fieldset>
            <fieldset>
                <legend>Delivery method:</legend>
                <input type="radio" name="deliverymethod" value="fedx" />FEDx
                <input type="radio" name="deliverymethod" value="chinamail"/>China Mail
                <input type="radio" name="deliverymethod" value="personal" checked="true"/>In person<br/>
            </fieldset>
            <input name="agree" type="checkbox" required="true"/> I agree to contact terms<br/>
            <input type="reset" value="Reset form"/><input type="submit" value="Send form"/>
        </fieldset>
    </form>
</section>

Don't Panic · Accepted Answer · 2019-02-10 12:07:39Z

For the first part of your question, you haven't mentioned what you've tried, but if you're using jQuery, the .html() and .text() methods are the usual approach, and are very straightforward.

Use some CSS classes and IDs in your HTML, so that you can precisely select the elements you want to target. For example, say your form_sent.html page includes something like this:

<table>
    <tr>
        <td>Phone</td>
        <td>Address</td>
        ....
    </tr>
    <tr>
        <td class='phone'></td>
        <td class='address'></td>
        ....
</table>

Now in jQuery, you can target those cells and add content like this:

$('.phone').text($.urlParam('phone'));

As to the second part of your question, that's a bit trickier. First of all you'll need to add the g flag in your regular expression, to make sure you match all occurrences, not just the first:

RegExp('[\?&]' + name + '=([^&#]*)', 'g')

Next, with your current approach using .exec(), you'll need to iterate repeatedly to match multiple occurrences. The MDN docs have an example of exactly this.

Here's an updated version of your code, using their approach:

$.urlParam = function (name) {
    var reg = new RegExp('[\?&]' + name + '=([^&#]*)', 'g'),
        matches = [];

    while ((results = reg.exec(window.location.href)) !== null) {
        matches.push(results[1])
    }

    return matches;
};

// Now:
// console.dir($.urlParam('phone'));
// console.dir($.urlParam('order'));
//
// Array(1)
//   0: "4325325235"
//   
// Array(2)
//   0: "book1"
//   1: "book2"
//

$.urlParam now returns an array, possibly zero-sized, instead of a string as previously, so you you'll need to call it differently, but that's your next challenge :-) If this approach doesn't suit, maybe another option would be to run it (or a variation) once, on page load, looking for any URL parameters, rather than one specific named parameter. Those results could be stored in a variable that you can later use.

Also, side note - I noticed one of your parameters has a typo - adress instead of address, that will probably cause you confusion and headache at some point in the future :-)

Side-side note - use CSS! Get those inline styles out of there.

form {
    width: 500px;
}

.label {
    width: 50px;
}

.label-wide {
    width: 100px;
}

Rohit Mittal · Accepted Answer · 2019-02-10 04:58:10Z

1

To set values in HTML form, you can create a table having one row and 5 columns. For each column, you can define an id. Then you can set value by below syntax:

$("#table #firstColumn").text($.urlParam('phone'));// This is just for one, you can repeat the step for others.

For your radio button, you have define same name to all four radio button. You should provide them different name to get those values.

Hope it helps you.

answered Feb 10, 2019 at 4:58

Rohit Mittal

2,1142 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Jquery - parsing multiple values of one parameter from URL to HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related