當用戶單擊提交時，有沒有辦法將值從按鈕傳遞到表單？

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 之外的任何現代瀏覽器上正常工作。請參見此處：最近