I'm having issues with my code not submitting a checkbox value when checked on form.
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</form>
When I click the checkbox then Register I get this in the address bar:
codetest.php?register=Register
Can't find any thing wrong with my code.
I'm also using bootstrap 4 for my css.
Just give your checkbox a name, say, name = "checkbox".
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" name="checkbox" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</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>
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 \")
I have 3 different sets of radio buttons on the same page. The problem I am experiencing with them is that when a button in another btn-group is pressed it will toggle the state of the buttons in the previous or next btn-group. They don't seem to be independent. Here's the code:
<div id="file1" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>
<div id="file2" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>
When a button within div file1 is clicked it toggles the state of a button in div id file2
I've tried using button.js with this, but no luck.
I've tried various different variations of data-toggle="button"
Any ideas?
Demo
Your HTML structure for bootstrap radio buttons is wrong.
<div id="file1" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option1" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option1" /> No
</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option2" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option2" /> No
</label>
</div>
Aside:
You're using jQuery; Please don't use onClick in your HTML. You would set up those events like this (though there is a way that involves less code).
$(function(){
$('.btn').button(); // this is for the radio buttons.
// this replaces your inline JS
$('#file1 .btn-danger').on('click', function(){
$('#mandatory1').val('no');
});
$('#file2 .btn-danger').on('click', function(){
$('#mandatory2').val('no');
});
});
Demo
this should fix your problem:
<div id="file1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
<label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
<label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>
hi all i am try to apply bootstrap css in my mvc application
i want reconstruct this example http://getbootstrap.com/examples/signin/ in my application
i code my login page like
<form id="loginform" method="post" class="form-signin" role="form">
<h3 class="form-signin-heading">Login</h3>
<input type="text" name="user_NA" class="form-control" placeholder="User ID" />
<input type="password" name="user_pwd" class="form-control" placeholder="Password" />
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-primary btn-block" />
</form>
but i got the output like
i am not done any changes in bootstrap.css
i want tha black header(default). but here shows a button. please someon help me
You can try this..
Fiddle here
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
Good Luck..