Javascript 当用户单击submit时，是否有方法将值从按钮传递到表单？

我试图从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>

我想从上面的每个按钮以及下面表单中获取所有信息的值，并将其发送到摘要屏幕

表格：

摘要屏幕：

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

Javascript:

const urlName=new urlocation.href； document.getElementById'app'.innerHTML=` 全名：${urlName.searchParams.getname | | N/A} 电子邮件：${urlName.searchParams.getemail | | N/A} 所选项目的大小：${urlName.searchParams.getsizes | | N/A} 你觉得这个东西比竞争对手便宜吗 网站 ${urlName.searchParams.getradio | | N/A} 竞争对手URL:${urlName.searchParams.geturl-link | | N/A} 查询信息：${urlName.searchParams.getmessage | | N/A} `;

---

我可以从表格中获取所有信息，但所选项目的大小除外。我知道这是因为我试图从url.searchPram中检索它，但是表单中没有按钮，所以我只是想知道是否还有其他方法？

关于：是否有方法获取按钮的值

我想你是指点击按钮的值。是的，有一种方法，通过设置单击侦听器

您可以在包含按钮的父级上只设置一个按钮，而不是为每个按钮设置单击侦听器。为了简化操作，请为封装设置一个id：

您现在拥有单击按钮的值

将按钮的值存储到表单元素中

如果需要将该值存储到表单元素中，以便在提交表单时包含该值，也可以通过隐藏输入来完成。让我们创建一个id和名称为size的：

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

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

</form>

---

仅此而已，提交表单时将发送大小值。

关于：是否有方法获取按钮的值

我想你是指点击按钮的值。是的，有一种方法，通过设置单击侦听器

您可以在包含按钮的父级上只设置一个按钮，而不是为每个按钮设置单击侦听器。为了简化操作，请为封装设置一个id：

您现在拥有单击按钮的值

将按钮的值存储到表单元素中

如果需要将该值存储到表单元素中，以便在提交表单时包含该值，也可以通过隐藏输入来完成。让我们创建一个id和名称为size的：

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

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

</form>

仅此而已，提交表单时将发送大小值。

解决方案： 在表单上为数据添加隐藏输入。根据您的HTML和JavaScript，它将是：

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

或者直接在HTML中为每个按钮添加一个onclick：

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

注:

我不知道按钮元素是否允许有值属性，所以您可能需要将其切换到数据集。 此解决方案获取放置在表单输入中的大小，但不提交表单。这并不难添加，但我将把它作为一个练习留给你们去理解。 这个答案使用了旧的和新的JavaScript的混合，除了IE 11之外，它在任何现代浏览器上都能正常工作。请看这里： 解决方案： 在表单上为数据添加隐藏输入。根据您的HTML和JavaScript，它将是：

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

或者直接在HTML中为每个按钮添加一个onclick：

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

注:

我不知道按钮元素是否允许有值属性，所以您可能需要将其切换到数据集。 此解决方案获取放置在表单输入中的大小，但不提交表单。这并不难添加，但我将把它作为一个练习留给你们去理解。 这个答案使用了旧的和新的JavaScript的混合，除了IE 11之外，它在任何现代浏览器上都能正常工作。请看这里：

---

谢谢你的回复。为了将单击按钮的值发送到HTML表单，您是否知道如何执行此操作？@ehsaanali我已更新了有关如何将按钮值传递到表单的信息。感谢您的帮助，Terry，非常感谢。感谢您的回复。为了将单击按钮的值发送到HTML表单，您是否知道如何执行此操作？@ehsaanali我已更新了有关如何将按钮值传递到表单的信息。非常感谢您的帮助，Terry，非常感谢。

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