im trying to make a form with a title, paragraph and a score out of 10. I would like make to make only one button go into database. How can i do that and conserve the current style of my buttons ?
example
User selects a button
button 1
button 2 //user chooses this button on click
User change selected button
button 1 //user changes the selected button on click
button 2
.
And when i click submit it sends button 1 into database
code:
<form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
<div id="scores">
<input class="score" type="button" name="options" style="color:red;" value="1" id="option1">
<input class="score" type="button" name="options" style="color:red;" value="2"id="option2">
<input class="score" type="button" name="options" style="color:red;" value="3"id="option3">
<input class="score" type="button" name="options" style="color:orange;" value="4" id="option4">
<input class="score" type="button" name="options" style="color:orange;"value="5"id="option5">
<input class="score" type="button" name="options" style="color:orange;" value="6"id="option6">
<input class="score" type="button" name="options" style="color:orange;" value="7"id="option7">
<input class="score"type="button" name="options" style="color:green;" value="8"id="option8">
<input class="score" type="button" name="options" style="color:green;" value="9" id="option9">
<input class="score" type="button" name="options" style="color:green;" value="10" id="option10">
</div>
<input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
<textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
<input type="submit" value="Publish" name="review" class="publish">
</form>
How it looks like
You can put your value in a hidden input. On submit of the form you can get this value by the name of the hidden field.
See below example, It will post userScore as a user selected score.
$(".score").click(function(){
var btnId = $(this).val();
$("#userScore").val(btnId);
console.log($("#userScore").val());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="index.php?action=sendReview" class="redaction" enctype="multipart/form-data">
<div id="scores">
<input class="score" type="button" name="options" style="color:red;" value="1" id="option1">
<input class="score" type="button" name="options" style="color:red;" value="2"id="option2">
<input class="score" type="button" name="options" style="color:red;" value="3"id="option3">
<input class="score" type="button" name="options" style="color:orange;" value="4" id="option4">
<input class="score" type="button" name="options" style="color:orange;"value="5"id="option5">
<input class="score" type="button" name="options" style="color:orange;" value="6"id="option6">
<input class="score" type="button" name="options" style="color:orange;" value="7"id="option7">
<input class="score"type="button" name="options" style="color:green;" value="8"id="option8">
<input class="score" type="button" name="options" style="color:green;" value="9" id="option9">
<input class="score" type="button" name="options" style="color:green;" value="10" id="option10">
</div>
<input type="hidden" name="userScore" id="userScore">
<input type="text"name="nameReview" class="nameReview"placeholder="Review Title">
<textarea id="story" name="review-content"rows="5" cols="33" placeholder="Write your Review here"></textarea>
<input type="submit" value="Publish" name="review" class="publish">
</form>
Related
I am using Bootstrap checkbox button group (link) with thymeleaf.
The Bootstrap checkbox button requires <label> tag to be right below <input> in order to highlight the correct checkbox button.
The issue is whenever I add the th:field="*{property_name}" in the input field as below:
<input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="text">Text</label>
Thymeleaf adds a hidden input element
<input type="hidden" name="_formats" value="on">
just below my <input type = "checkbox"> element
Therefore, the checkbox button fails to get highlighted although it gets selected.
HTML code snippet
<form method="POST" th:action="#{/submitCourse}" th:object="${coursePost}">
<div class="mb-3">
<label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
<div class= "btn-group" role="group">
<input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="text">Text</label>
<input value="Video" type="checkbox" class = "btn-check" id="video" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="video">Video</label>
<input value="Quiz" type="checkbox" class = "btn-check" id="quiz" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="quiz">Quiz</label>
<input value="Certificated" type="checkbox" class = "btn-check" id="certificated" autocomplete="off" name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="certificated">Certificated</label>
</div>
</div>
</form>
Thymeleaf generated HTML
<form method="POST" action="/submitCourse">
<div class="mb-3">
<label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
<div class="btn-group" role="group">
<input value="Text" type="checkbox" class="btn-check" id="text" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on"> <!-- generated by thymeleaf which is causing the issue(which is the checkbox button not getting highlighted -->
<label class="btn btn-outline-info" for="text">Text</label>
<input value="Video" type="checkbox" class="btn-check" id="video" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="video">Video</label>
<input value="Quiz" type="checkbox" class="btn-check" id="quiz" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="quiz">Quiz</label>
<input value="Certificated" type="checkbox" class="btn-check" id="certificated" autocomplete="off" name="formats">
<input type="hidden" name="_formats" value="on">
<label class="btn btn-outline-info" for="certificated">Certificated</label>
</div>
</div>
</form>
I am trying to provide a block of multiple choice buttons to the user: five choices, plus an "other" dropdown with a list of 30+ more options. I want to return the value of the selection for the same form element. Currently, the buttons display correctly but selecting from the dropdown is not mutually exclusive to selecting from the first five choices.
<input type="radio" id="Image1_${Cat1}" name="Image1_Category" value="${Cat1}">
${Cat1}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat2}" name="Image1_Category" value="${Cat2}">
${Cat2}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat3}" name="Image1_Category" value="${Cat3}">
${Cat3}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat4}" name="Image1_Category" value="${Cat4}">
${Cat4}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat5}" name="Image1_Category" value="${Cat5}">
${Cat5}
</label>
<select class="btn btn-secondary form-control"><label>Other</label>
<option>Other</option>
<option>Option1</option>
<option>Option2</option>
</select>
</div>
</div>
How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
I'm trying to code an onscreen keyboard but can't see why the keys when clicked do not insert the values, instead nothing happens. Sorry if this is a obvious problem, I am trying to learn.
<tr>
<td colspan="3"> <B>Search</B>
<div id="keyboard">
<br>
<input id="searchbox" type="text">
<br>
<input id="qkey" type="button" value="q" onClick="document.getElementById("searchbox").value+='q';"/>
<input id="wkey" type="button" value="w" onClick="document.getElementById("searchbox").value+='w';"/>
<input id="ekey" type="button" value="e" onClick="document.getElementById("searchbox").value+='e';"/>
<input id="rkey" type="button" value="r" onClick="document.getElementById("searchbox").value+='r';"/>
<input id="tkey" type="button" value="t" onClick="document.getElementById("searchbox").value+='t';"/>
<input id="ykey" type="button" value="y" onClick="document.getElementById("searchbox").value+='y';"/>
<input id="ukey" type="button" value="u" onClick="document.getElementById("searchbox").value+='u';"/>
<input id="ikey" type="button" value="i" onClick="document.getElementById("searchbox").value+='i';"/>
<input id="okey" type="button" value="o" onClick="document.getElementById("searchbox").value+='o';"/>
<input id="pkey" type="button" value="p" onClick="document.getElementById("searchbox").value+='p';"/>
<input id="backkey" type="button" value="Bckspc" onclick='bckspc'>
<br>
<input id="akey" type="button" value="a" onClick="document.getElementById("searchbox").value+='a';"/>
<input id="skey" type="button" value="s" onClick="document.getElementById("searchbox").value+='s';"/>
<input id="dkey" type="button" value="d" onClick="document.getElementById("searchbox").value+='d';"/>
<input id="fkey" type="button" value="f" onClick="document.getElementById("searchbox").value+='f';"/>
<input id="gkey" type="button" value="g" onClick="document.getElementById("searchbox").value+='g';"/>
<input id="hkey" type="button" value="h" onClick="document.getElementById("searchbox").value+='h';"/>
<input id="jkey" type="button" value="j" onClick="document.getElementById("searchbox").value+='j';"/>
<input id="kkey" type="button" value="k" onClick="document.getElementById("searchbox").value+='k';"/>
<input id="lkey" type="button" value="l" onClick="document.getElementById("searchbox").value+='l';"/>
<br>
<input id="zkey" type="button" value="z" onClick="document.getElementById("searchbox").value+='z';"/>
<input id="xkey" type="button" value="x" onClick="document.getElementById("searchbox").value+='x';"/>
<input id="ckey" type="button" value="c" onClick="document.getElementById("searchbox").value+='c';"/>
<input id="vkey" type="button" value="v" onClick="document.getElementById("searchbox").value+='v';"/>
<input id="bkey" type="button" value="b" onClick="document.getElementById("searchbox").value+='b';"/>
<input id="nkey" type="button" value="n" onClick="document.getElementById("searchbox").value+='n';"/>
<input id="mkey" type="button" value="m" onClick="document.getElementById("searchbox").value+='m';"/>
<br>
<input id="spacekey" type="button" value=" space " onClick="document.getElementById("searchbox").value+=' ';"/>
</center>
</div>
</tr>
You've used the wrong quotation marks in the onclick. Instead, use
<input id="qkey" type="button" value="q" onClick="document.getElementById('searchbox').value+='q';"/>
Use simple quotes, i.e. 'searchbox' in place of "searchbox". You are specifying a quoted text in another quoted text, thus you need either to use different quotes or use escaping (like \")
HI I am trying to draw a list of radio button using bootstrap 3.2, I have enclosed by buttons in a toolbar, I assumed this would draw the buttons next to each othe, with no gaps between the buttons.
Instead it draws a line of buttons with rounded edges with a gap between each button
My bowser is "Version 39.0.2171.65 Ubuntu 14.04 (64-bit)", so I assume that I have a modern layout engine. I assumed this would work 'out of the box'
There is a reference in my code to bootstrap.css
Have I missed something ?
Code is
<div class='btn-toolbar' role='toolbar' aria-label='...'>
<h2>Buttons</h2>
<div id='btn-group btn-group-justified' role='group' data-toggle='buttons' aria-label='...'>
<label class="btn btn-primary">
<input type='radio' id='layer1Button' autocomplete='off' name='options' >Fee
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer2Button' autocomplete='off' name='options' >Fie
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer3Button' autocomplete='off' name='options' >Foe
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer4Button' autocomplete='off' name='options' >Foo
</label>
</div>
</div>
Try this:
Jsfiddle
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" id="layer1Button" autocomplete="off" name="options" > Fee
</label>
<label class="btn btn-primary">
<input type="radio" id="layer2Button" autocomplete="off" name="options" >Fie
</label>
<label class="btn btn-primary">
<input type="radio" id="layer3Button" autocomplete="off" name="options" >Foe
</label>
<label class="btn btn-primary">
<input type="radio" id="layer4Button" autocomplete="off" name="options" >Foo
</label>
</div>