Add dynamic text to anchor link URL query

Question

I have a set of anchors which are generated by another system.

The anchors are toggle anchors so are true/false switches.

I need to add to this a custom text entered by the user. I imagined I could use JQuery to build this but the system is simply not responding and updating as expected.

I have searched extensively all over and I can't seem to find a similar issue; aside from this question about dynamically adding get parameter to url on form submit . But that is form forms and this should be for anchors.

For example:

Currently:

<table id='custRefTable'>
<tr>
    <td class="passed" title='Sunday, January  5, 2020 (date has passed)'><a href='toggle.php?date=2020-01-05'>05</td>
    <td class="passed" title='Monday, January  6, 2020 (date has passed)'><a href='toggle.php?date=2020-01-06'>06</td>
    <td class="passed" title='Tuesday, January  7, 2020 (date has passed)'><a href='toggle.php?date=2020-01-07'>07</td>
    <td class="passed" title='Wednesday, January  8, 2020 (date has passed)'><a href='toggle.php?date=2020-01-08'>08</td>
    <td class="passed" title='Thursday, January  9, 2020 (date has passed)'><a href='toggle.php?date=2020-01-09'>09</td>
    <td class="passed" title='Friday, January 10, 2020 (date has passed)'><a href='toggle.php?date=2020-01-10'>10</td>
    <td class="passed" title='Saturday, January 11, 2020 (date has passed)'><a href='toggle.php?date=2020-01-11'>11</td>
</tr>
</table>

With this HTML I want to add an INPUT:

    <div>
        <p>Reference will be saved with each new booking made on this page.</p>
        <label for='customerRef'>Customer Reference:</label>
        <input type='text' name='customerRef' maxlength='150' id='customerRef' value='' placeholder='Reference details'>
        <input type='button' id='cset' value='Set'>
    </div>

And my JS as I have at the moment:

$( document ).ready(function() {
    $("#cset").click(function () {
        var lister = $("#custRefTable").find("a");
        var customerData = $("#customerRef").value;
        customerData = encodeURIComponent(customerData);
        $(lister).each(function () {
            $(this).href = $(this).href + "&custNote=" + customerData;
        });
    });

});

I get no console errors, but also the anchors are not being updated; the reference id cset .

The intention is:

user enters text; the button input is pressed and the text value is converteed to URL safe and is appended to each anchor in the table above.

So for example in the text bot I write "great trees" and press "Set"; then when any anchor in the table is clicked; it goes to:

  toggle.php?date=2020-01-10&custNote=great%20trees

What am I missing or doing wrong?!

Answer 1

To my knowledge, href isn't a setter method but just a getter. You could do it in jQuery using attr as so:

$(this).attr('href', $(this).attr('href') + "&custNote=" + customerData);

or simply omit the jquery wrapper and use setAttribute

this.setAttribute(this.href, this.href + "&custNote=" + customerData);

How would I prevent my code from adding multiple &custNote= values? If I click "Set" twice the value is added twice:

 toggle.php?date=2020-01-22&custNote=Horses and cheese&custNote=fielding

For this you could split the href value on the ampersand, grab the first index of this newly formed array, and then append the rest like you did before:

$(this).attr('href', $(this).attr('href').split('&')[0] + "&custNote=" + customerData);