Добавить текст Dynami c к URL-адресу ссылки на ссылку - PullRequest
Новая
       7

Добавить текст Dynami c к URL-адресу ссылки на ссылку

1 голос
/ 28 января 2020

У меня есть набор якорей, которые генерируются другой системой.

Якоря - это якорные переключатели, равно как и переключатели «истина / ложь».

Мне нужно добавить к этому пользовательский текст, введенный пользователем. Я думал, что мог бы использовать JQuery, чтобы создать это, но система просто не отвечает и обновляется, как ожидалось.

Я много обыскивал и не могу найти похожую проблему; кроме этот вопрос о динамическом добавлении параметра get в URL в форме submit . Но это формы, и это должно быть для якорей.

Например:

В настоящее время: 

<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>

С этим HTML я хочу добавить 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>

И мои JS, как у меня сейчас: 

$( 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;
        });
    });

});

Я не получаю ошибок консоли, но якоря также не обновляются; ссылочный идентификатор cset.

Намерение:

пользователь вводит текст; нажата кнопка ввода, и текстовое значение преобразуется в безопасный URL-адрес и добавляется к каждому якорю в таблице выше.

Так, например, в текстовом боте я пишу "большие деревья" и нажимаю "Установить"; затем, когда щелкнет любой якорь в таблице; это идет к: 

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

Что я пропускаю или делаю неправильно?!

1 Ответ

5 голосов
/ 28 января 2020

Насколько мне известно, href не метод установки, а просто метод получения. Вы можете сделать это в jQuery, используя attr следующим образом: 

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

или просто опустить оболочку jquery и использовать setAttribute 

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

Как запретить добавлению в мой код нескольких значений & custNote =? Если я дважды нажму «Установить», значение будет добавлено дважды: 

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

. Для этого вы можете split значение href на амперсанде, получить первый индекс этого вновь сформированного массива и затем добавьте остальное, как вы делали раньше: 

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