Есть ли способ передать значение из кнопки в форму, когда пользователь нажимает кнопку «Отправить»?

Question

Я пытаюсь получить значение из 5 кнопок, в зависимости от того, что выберет пользователь, а затем, когда они заполнят форму, я хочу, чтобы выбранное значение кнопки отображалось на экране «сводки».

Есть ли способ получить значение кнопки вместе со всеми другими деталями формы, а затем отправить все эти детали на новый экран, на котором отображается вся информация, введенная пользователем? Что-то вроде экрана подтверждения для подтверждения всех деталей перед отправкой запроса.

То, что я пробовал:

Кнопки:

<div class="card">
  <h1 id="size">Select your size*</h1>
  <ul class="size-list">
    <li>
      <button class="size-link" id="size-button" value="Small">
        Small
      </button>
    </li>
    <li>
      <button class="size-link" id="size-button2" value="Medium">
        Medium
      </button>
    </li>
    <li>
      <button class="size-link" id="size-button3" value="Large">
        Large
      </button>
    </li>
    <li>
      <button class="size-link" id="size-button4" value="X Large">
        X Large
      </button>
    </li>
    <li>
      <button class="size-link" id="size-button5" value="XX Large">
        XX Large
      </button>
    </li>
  </ul>
</div>

Я хочу получить значение каждой кнопки выше, а также всю информацию из формы ниже и отправьте ее на экран «Сводка».

Форма:

<form method="GET" action="final.html" id="myform" class="contact-form">
    <label id="fullname">Full Name*</label> <br />
    <input name="name" id="name" class="txt-form name" type="text" />
    <label id="mail">Email*</label> <br />
    <input name="email" id="email" class="txt-form email" type="email" />
    <label id="cheap">Have you found this item cheaper on a competitor website?*</label>
    <br />
    <label> 
    <input id="radio1" type="radio" name="radio" value="Yes"> <label for="radio1">
    <span><span></span></span>Yes</label> 
    <input id="radio2" type="radio" name="radio" value="No"> <label for="radio2">
    <span><span></span></span>No</label> <br />
    </label> 
    <div id="url">
        <label>Competitor URL</label> 
        <input name="url_name" id="url-link" class="txt-form" type="url"> 
    </div>
    <label id="msg">Enquiry Message*
      <span id="characters">(0/200)</span></label>
    <textarea name="message" id="message" class="txt-form message" type="textarea"></textarea>
    <p id="asterisk">
        Fields marked with an *asterisk are compulsory
    </p>
    <input type="submit" class=" btn" id="submit" value="Submit your enquiry"> 
</form>

Экран сводки:

<div id="app" class="contact-main">
  <form id="myform" class="contact-form"></form>
</div>

Javascript:

const urlName = new URL(location.href);

document.getElementById('app').innerHTML = `
<label>Full Name: </label> ${urlName.searchParams.get("name") || "N/A"}
<br /><br />

<label>Email:</label> ${urlName.searchParams.get("email") || "N/A"}<br /><br />

<label>Size of item selected:</label> ${urlName.searchParams.get("sizes") || "N/A"} <br /><br />

<label>Have you found this item cheaper on a competitor
    website?
</label> ${urlName.searchParams.get("radio") || "N/A" } <br /><br />

<div>
    <label>Competitor URL:</label> ${urlName.searchParams.get("url-link") || "N/A"} <br /><br />
</div>

<label id="msg">Enquiry Message:</label> <br/> "${urlName.searchParams.get("message") || "N/A"}" <br /><br />
`;

Я могу получить все из формы, кроме «Размер выбранного элемента». Я знаю, что это потому, что я пытаюсь получить его из url.searchPram, однако кнопки не включены в форму, поэтому мне просто интересно, есть ли другой способ?

Answer 1

Относительно: «Есть ли способ получить значение кнопки»

Я предполагаю, что вы имеете в виду значение кнопки нажатой . Да, есть способ настроить прослушиватель щелчков.

Вместо того, чтобы настраивать прослушиватель щелчков для каждой кнопки, вы можете настроить только один для родительского элемента, который содержит кнопки. Чтобы упростить задачу, установите идентификатор для включающего <ul>:

<ul class="size-list" id="size-list">

Затем установите прослушиватель для этого <ul>:

document.getElementById('size-list').addEventListener('click', evt => {
  let clickedButton = evt.target;
  let btnValue = clickedButton.value;
}

Теперь у вас есть значение нажата кнопка.

Сохранение значения кнопки в элементе формы

Если вам нужно сохранить это значение в элементе формы, чтобы это значение было включено при отправке формы , это также можно сделать со скрытым вводом. Давайте создадим один с идентификатором и именем "size":

<form method="GET" action="final.html" id="myform" class="contact-form">

  <input type="hidden" id="size" name="size" value="" />

</form>

Затем, лишь небольшая модификация обработчика кликов сохранит значение кнопки в скрытом вводе:

document.getElementById('size-list').addEventListener('click', evt => {
  let clickedButton = evt.target;
  let btnValue = clickedButton.value;
  document.getElementById('size').value = btnValue;
}

Вот и все, значение "size" теперь будет отправлено при отправке формы.

Answer 2

РЕШЕНИЕ:
Добавьте скрытый ввод в форму для данных. На основе ваших HTML и JavaScript это будет:

<input type="hidden" id="sizes" name="sizes" value="Medium">

Обратите внимание, что я добавил атрибут значения Medium на тот случай, если пользователь нажимает кнопку «Отправить» в форме, не нажимая на размер пуговиц. Вы можете удалить это и добавить код в свой JavaScript, чтобы проверить, является ли sizes пустым / отсутствующим.

Затем вам нужно добавить прослушиватель событий щелчка для каждой кнопки, которая будет вызывать функцию при нажатии на них . Способ JavaScript:

// Way 1 using older JS.
var buttons = document.querySelectorAll('.size-link');
for( var x = 0; x < buttons.length; x++ ){
    buttons[x].addEventListener( 'click', recordButtonSize );
}

// Way 2 using newer JS without an arrow function.
var buttons = document.querySelectorAll('.size-link');
buttons.forEach( function( button ) {
    button.addEventListener( 'click', recordButtonSize );
} );

Или прямо в HTML добавьте onclick к каждой кнопке:

<button class="size-link" value="..." onclick="recordButtonSize">...</button>

Обратите внимание, что я удалил ваши идентификаторы. Они вам действительно не нужны независимо от того, какое решение вы выберете, JavaScript или HTML.

И теперь мы создаем функцию recordButtonSize, которая будет копировать данные из нажатой кнопки поверх к скрытому вводу:

function recordButtonSize(){
    // Get the element that was clicked on.
    var elem = event.target || event.srcElemnt;

    // Depending on browsers / where the user clicked we may not be on the button.
    if( elem.nodeName != 'BUTTON' ){
        elem = elem.closest('button');
    }

    // Now pull the value from the button and place in the hidden input.
    document.getElementById('sizes').value = elem.value;
}

ПРИМЕЧАНИЯ:

• Я не знаю, разрешено ли button элементам иметь атрибуты значений поэтому вам может потребоваться переключить его на dataset.
• Это решение получает размер, помещенный во входные данные в форме, но НЕ отправляет форму. Это несложно добавить, но я оставлю это в качестве упражнения, которое вам предстоит выяснить.
• В этом ответе используется сочетание старого и нового JavaScript, которое отлично работает в любом современном браузере, но IE 11. См. Здесь: ближайший