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

Question

I am trying to get the value from 5 buttons, whichever the user selects, and then once they fill the form out, I want the button value that they selected to be shown on the "summary" screen.

Is there a way to get the value of the button, along with all the other form details, and then send all those details to a new screen that shows all the information the user has entered? Something like a confirmation screen to confirm all details before they send their enquiry.

What I've been trying:

Buttons:

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

I want to get the value from each button above as well as all the information from the form below and send it to the "Summary" screen.

Form:

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

Summary Screen:

<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 />
`;

I am able to get everything from the form but the "Size of item selected". I know this is because I am trying to retrieve it from the url.searchPram, however the buttons are not included on the form so I am just wondering if there's any other way?

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

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

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>

Then, just a slight modification of the click handler will store the button's value into the hidden input:

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

That's all, the "size" value will now be sent when the form is submitted.

Answer 2

SOLUTION:
Add a hidden input on your form for the data. Based on your HTML and JavaScript it would be:

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

Notice that I added a value attribute of Medium just in case the user hits submit on the form without actually pressing on of the size buttons. You could remove this and add code in your JavaScript to check if sizes is empty/ missing.

Next you need to add a click event listener to each button that will call a function when they are clicked. The JavaScript way:

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

Or directly in the HTML add an onclick to each button:

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

Notice that I removed your ID's. You don't really need them regardless of which solution you choose to use, the JavaScript or HTML.

And now we make the recordButtonSize function that will copy the data from the pressed button over to the hidden input:

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

NOTES:

• I don't know if button elements care allowed to have value attributes so you may need to switch that to a dataset .
• This solution gets the size placed into an input on the form but DOES NOT submit the form. That isn't hard to add but I will leave it as an exercise for you to figure out.
• This answer uses a mix of older and newer JavaScript which will work fine on any modern browser but IE 11. See here: closest