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

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>设置一个 id：

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

然后在该<ul>上设置一个侦听器：

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

您现在具有单击按钮的值。

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

如果您需要将该值存储到表单元素中，以便在提交表单时包含该值，也可以使用隐藏输入来完成。 让我们创建一个 id 和名称为“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;
}

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

Answer 2

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

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

请注意，我添加了Medium的 value 属性，以防用户在没有实际按下尺寸按钮的情况下点击表单提交。 您可以删除它并在 JavaScript 中添加代码以检查sizes是否为空/缺失。

接下来，您需要为每个按钮添加一个单击事件侦听器，当它们被单击时将调用 function。 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>

请注意，我删除了您的 ID。 无论您选择使用哪种解决方案，JavaScript 或 HTML，您都不需要它们。

现在我们创建recordButtonSize function ，它将数据从按下的按钮复制到隐藏的输入：

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元素是否允许具有 value 属性，因此您可能需要将其切换到dataset 。
• 此解决方案将尺寸放入表单的输入中，但不提交表单。 这并不难添加，但我将把它留作练习让你弄清楚。
• 此答案混合使用较旧和较新的 JavaScript，它可以在除 IE 11 之外的任何现代浏览器上正常工作。请参见此处：最近