I am trying to understand how to implement the following concept:
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?
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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.