当用户单击“提交”时，有没有办法将值从按钮传递到表单？

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：

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

我可以从表单中获取除“所选项目的大小”之外的所有内容。我知道这是因为我试图从 url.searchPram 检索它，但是按钮不包含在表单中，所以我只是想知道是否还有其他方法？

Answer 1

Regarding: "Is there a way to get the value of the button"

I assume you mean the value of the clicked button. Yes, there is a way, by setting up a click listener.

Rather than setting up a click listener for each button, you can set up just one on the parent that contains the buttons. To make things easy, set an id for the enclosing <ul>:

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

Then set a listener on that <ul>:

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

You now have the value of the clicked button.

Storing Button's Value into a Form Element

If you need to store that value into a form element, so that value is included when the form is submitted, this can also be done with a hidden input. Let's create one with an id and name of "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;
}

就这样，现在提交表单时将发送“大小”值。