在表单中提交按钮数据

Question

I am trying to understand how to implement the following concept:

What I am trying to implement

A user can type in their username + room, and then click on a button to indicate the color they want.

So far I have the username + room part working, it is passed in the URL as parameters. But what if I wanted to pass (through URL params) which color button was pressed as well? Since the buttons aren't input elements, the data isn't passed through the URL, but I want it to be. Here is what the form looks like so far:

<form action="/reaction.html">
    <label>Choose a username:</label>
    <input type="text" name="username" placeholder="insert username" requried autocomplete="off">
    <label>Room name:</label>
    <input type="text" name='room' placeholder='insert room' required autocomplete="off">
    <label>Chose your color:</label>
    <div class="colors">
         <button type="button" class="buttonround buttonred" name="red"></button>
         <button type="button" class="buttonround buttonblue" name="blue"></button>
         <button type="button" class="buttonround buttongreen" name="green"></button>
         <button type="button" class="buttonround buttonyellow" name="yellow"></button>
    </div>
    <button class="submitbutton">Join</button> 
</form>

To make it clear right now I get something like: "http://localhost:3000/reaction.html?username=a&room=a" when submitting the form, I want to find a way to add a param at the end, maybe something like "?color=red".

I know I probably need to attach onclick listeners for each button, but what to do after listening for a click?

Answer 1

If you want to go with button approach only, try to create a hidden input and set the value on click event of color button

<form action="/reaction.html">
    <label>Choose a username:</label>
    <input type="text" name="username" placeholder="insert username" requried autocomplete="off">
    <label>Room name:</label>
    <input type="text" name='room' placeholder='insert room' required autocomplete="off">
    <label>Chose your color:</label>
    <input type="hidden" name="color" id="color">
    <div class="colors">
         <button type="button" class="buttonround buttonred" data-value="red">Red</button>
         <button type="button" class="buttonround buttonblue" data-value="blue">Blue</button>
         <button type="button" class="buttonround buttongreen" data-value="green">Green</button>
         <button type="button" class="buttonround buttonyellow" data-value="yellow">Yellow</button>
    </div>
    <button type="submit" class="submitbutton">Join</button> 
</form>

Script part

$('.buttonround').click(function(e) {
    $('#color').val($(this).data('value'));
});

Other possible way is to create a custom radio button. Please refer this code for radio button which looks like a button. https://codepen.io/salfx/pen/ZXOVjo

Answer 2

Here is a working snippet. You will need to remove the ev.preventDefault(); to actually allow the submission of the form after the join button is pressed.

 const frm=document.querySelector('form'); frm.addEventListener('click',function(ev){ if (ev.target.tagName=='BUTTON') { if (ev.target.className=='sbutton') { ev.preventDefault(); // for testing... console.log([...frm.querySelectorAll('input')].map(el=>[el.name,el.value])); } else frm.color.value=ev.target.name; } });

 input {display:block}.buttonround {width:40px; height:40px; border-radius:20px; border:none}.buttonred{background-color:red}.buttonblue{background-color:blue}.buttongreen{background-color:green}.buttonyellow{background-color:yellow}

 <form action="/reaction.html"> <label>Choose a username:</label> <input type="text" name="username" placeholder="insert username" requried autocomplete="off"> <label>Room name:</label> <input type="text" name='room' placeholder='insert room' required autocomplete="off"> <input type="hidden" name="color"> <label>Chose your color:</label> <div class="colors"> <button type="button" class="buttonround buttonred" name="red"></button> <button type="button" class="buttonround buttonblue" name="blue"></button> <button type="button" class="buttonround buttongreen" name="green"></button> <button type="button" class="buttonround buttonyellow" name="yellow"></button> </div> <button class="sbutton">Join</button> </form>