I have two radio buttons like this,
<table name="">
<tr><input type="radio" name="passwordissues" value="forgetpassword"/>Forget Password</tr>
<tr><input type="radio" name="passwordissues" value="resetpassword"/>Change Password</tr>
</table>
I may can put this inside a form but i am not supposed to add any buttons to submit the form.
My problem is when ever i click on one of the radio button it has to perform some action or has to display something. How can achieve it..
You have to write JavaScript handler (event function) for radio buttons that invokes the form.submit().
Sample:
<script type="text/javascript">
window.onload=function(){
var radios=document.getElementsByName("passwordissues");
var form1=document.getElementById("form1");
for(i=0;i<radios.length;i++){
radios[i].onclick=function() { form1.submit(); };
}
};
</script>
<form method="post" action="action_here" id="form1">
<input type="radio"
name="passwordissues"
value="forgetpassword"/>Forget Password
<input type="radio"
name="passwordissues"
value="resetpassword"/>Change Password
</form>
Related
I have a bootstrap modal which contains a form, there are two radio style buttons inside that have been created based on the example for normal button styled radio options:
<form id="changePlanForm" action="/change_plan_submit.php" method="post">
<div class="btn-group-toggle active" data-toggle="buttons">
<label class="btn btn-outline-info active" for="1">
<input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
</label>
<label class="btn btn-outline-info" for="2">
<input type="radio" name="cycle" value="2" id="2" autocomplete="off">
</label> Button 2
</div>
</form>
However, when selecting a radio option the button will only appear "active" but will not become "checked". This is confirmed on submission of the form.
I had initially tried adding some JQuery as suggested here:
<script>
$('form').click (function() {
alert("clicked");
$('form').find("input[name='cycle']:checked").prop('checked', false);
$(this).find("input[name='cycle']").prop('checked', true);
});
</script>
but this script only removes the currently selected checked attribute and does not apply it to the new button.
Am I missing something in the script, or is there an easier way to create Bootstrap form buttons that behave like radio buttons?
Thanks in advance!
-- Update 1 --
After doing some debugging it appears that when clicking on the label $(this) is not being defined and so there is nothing to set the checked property to true on.
Is there another way to identify the label that has been clicked on?
You can simply use an onchange function to determine which radio button was checked and get its value using .val()
There is no need to set prop or attr for checked radio button to false or true on each click.
Run snippet below to see which radio button is checked on each click with a change function.
$('form').on('change', function() {
//Get the checked radio button value
var getCheckedValue = $('input[name=cycle]:checked').val()
//console.log
console.log('Radio ' +getCheckedValue+ ' is checked');
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<form id="changePlanForm" action="/change_plan_submit.php" method="post">
<div class="btn-group-toggle active" data-toggle="buttons">
<label class="btn btn-outline-info active" for="1">
<input type="radio" name="cycle" value="1" id="1" autocomplete="off" checked> Button 1
</label>
<label class="btn btn-outline-info" for="2">
<input type="radio" name="cycle" value="2" id="2" autocomplete="off"> Button 2
</label>
</div>
</form>
When a radio button (or a label containing a radio button) is clicked, it's checked property is automatically changed to true. Your current JQuery function, sets the the clicked radio button's checked property to false upon clicking, thus virtually making it impossible to be set to true.
If you just need to find out which radio button was clicked, the following JQuery code will work:
<script>
$('form').click (function() {
alert("clicked");
let checkedOption = $('form').find("input[name='cycle']:checked");
//checkedOption contains the radio that was just clicked
//all other radios with the same 'name' will automatically turn false
});
</script>
I've got a very large grid of buttons that a user will use to set their availability. Currently, the user must click each button one at a time, which works, but can get really repetitive.
I was hoping to create a grid of button-like objects where the user can select multiple buttons by holding down their mouse button and dragging.
Is there any sort of equivalent to a button in HTML, React or Bootstrap where the click does not need to be released?
If not, would anyone here have any sort of suggestion?
Thank you
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Monday<br/>
<input type="checkbox" name="foo" value="bar2"> Tuesday<br/>
<input type="checkbox" name="foo" value="bar3"> Everyday<br/>
<input type="checkbox" name="foo" value="bar4"> Days that don't end in 'Y'<br/>
Source
This question already has answers here:
Multiple submit buttons in an HTML form
(27 answers)
Closed 9 years ago.
I have two submit buttons, a back submit button and a next submit button, when the user is in a text input and press enter, it takes them backwards... I think this is because enter evokes the back submit button instead of the next submit button.
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" />
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" />
</form>
So when you are instead of the text field, and press enter it executes the first submit button, how can I change that...
Go the jQuery route...(untested).
// Prevent default on form on page load
// or on "enter"
$('form').disable();
// OR....
// Disable the ENTER key altogether on the form inputs
$('form').find('.input').keypress(function(e){
if (e.which == 13) // Enter key is keycode 13
{
return false;
}
});
$('input[type="submit"]').on('click', function() {
var btn = $(this).val();
if(btn == 'back')
{
// do this to go back, code here
}
else
{
// do this to go to next, code here
}
return false;
});
very simple workaround
<script>
function myFunction()
{
}
function myFunction2()
{
}
</script>
</head>
<body>
<form action="" method="post">
<input type="submit" name="GOTO1" value="back" onclick="myFunction2()"/>
<input type="text" name="value1" />
<input type="submit" name="GOTO3" value="next" onclick="myFunction()" />
</form>
Not neat but it works on the onclick number reference.
Hope this helps...
Use
<input type="button" ... >
You should not have more than one submit per form, since ENTER should trigger it.
To know more about it, you can take a look at this: https://stackoverflow.com/a/469084/955143
I would like to build something like this: at start an empty page with only two radiobuttons. Lets say
<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two
There are also two forms
<form name="form1" action="..." method="post">
<input.../>
<input type ="submit"/>
</form>
<form name="form2" action="..." method="post">
<input.../>
<input type ="submit"/>
</form>
But at the start I dont want to show them! Only if the user is selecting one the radiobuttons. If the user goes "one" then show up form1 if the user is on "two" show up form2. Any ideas?
Ahm there is something else. If the user is changing between the two form, can I add some "cool" effects? You know not only make the on invisible and show up the other one. Something with more effects. Maybe at change make the one slowly invisible and then show up the other one slowly too? Some CSS3 options for that? Thank you
For starters, hide one of the forms with style='display:none'
Then write a script toggles the visibility of the forms on the onChange event of the radio buttons. I agree jQuery would make this very easy:
jQuery toggle div with radio buttons
Also, with jQuery its easy to make those 'cool' effects.
Without jQuery, check this example, not the most beautiful way, but functional:
<script type="text/javascript">
function toggle(theform) {
document.getElementById("form1").style.display = "none";
document.getElementById("form2").style.display = "none";
document.getElementById(theform).style.display = "block";
}
</script>
<body>
<form name="form1" id='form1' action="..." method="post" >
<input />
<input type ="submit"/>
</form>
<form name="form2" action="..." method="post" style="display: none;">
<input />
<input type ="submit"/>
</form>
<input type="radio" name="myradio" value="1" onclick="toggle('form1');"/>one
<input type="radio" name="myradio" value="2" onclick="toggle('form2');" />two
Do you understand how this works or do you need some explanation?
Use onclick with a toggle javascript. The onclick will toggle the visibility. The javascript will actually perform the toggle, and the style="display: none;" actually hides it until the toggle is performed.
so for instance the html
<input type="radio" name=myradio value="1" onclick="toggle_visibility('form1');">one
<input type="radio" name=myradio value="2" onclick="toggle_visibility('form2');">two
<form id="form1" action="..." method="post" style="display: none;">
<input.../>
<input type ="submit"/>
</form>
<form id="form2" action="..." method="post" style="display: none;">
<input.../>
<input type ="submit"/>
</form>
and the javascript in the header
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
I am trying to associate a radio input with a specified text input. As you can see in the picture, there are two options. I know I can use for="" to associate the label to the radio input, but how can I also associate it to the text input underneath, and vise versa so when I focus on the text input, if focuses the correct radio button?
NOTE: The amount entered will be inserted into the database, so that's the most important part of this form. Currently if I click on $Off, I can still enter a number in %Off. I don't want this to happen, so the user does not get confused.
My markup:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
<script type="text/javascript">
$(function (){
$("form input[type=radio]").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest("form").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
</script>
You can't use a single <label> element to label two separate inputs. I would suggest associating the labels to the radio buttons, since the radio button is such a small click target and the label expands that target.
Choose one of the radios to be selected by default, perhaps "$ Off". Disable the other text field by default:
<div class="row-fluid control-group">
<div class="span7 pull-left">
<label class="radio" for="discount-dollars">
<input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
$ Off
</label>
<div class="input-append">
<input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
<span class="add-on">.00</span>
</div>
</div><!-- .span7 .pull-left -->
<div class="span5">
<label class="radio" for="discount-percent">
<input type="radio" name="discount" id="discount-percent" value="percent">
% Off
</label>
<input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
</div>
</div><!-- .row-fluid .control-group -->
Then use jQuery to do something like this:
$(function (){
$("#discount-dollars, #discount-percent").click(function (){
// get the value of this radio button ("dollars" or "percent")
var value = $(this).val();
// find all text fields...
$(this).closest(".control-group").find("input[type=text]")
// ...and disable them...
.attr("disabled", "disabled")
// ...then find the text field whose class name matches
// the value of this radio button ("dollars" or "percent")...
.end().find("." + value)
// ...and enable that text field
.removeAttr("disabled")
.end();
});
});
Basically, this listens for click events on both radio buttons. When you click one radio, it enables its associated text field (i.e., the text field with a CSS class name matching the value of the radio button) and disables the other text field. That way, you can't enter text into either text field unless its associated radio button is checked.
use image radio button with 2 states, selected and not selected, when you click the radio image just set focus to the textbox and swap to your selected radio image, and vice versa.
You cannot focus on two elements, it will be either the input text field or the radio button.
But you should use JavaScript or jQuery, when you click on the radio button to focus on the field below, or when you enter value in the field below to check the radio button above.
This can help you if you want to use jquery : http://api.jquery.com/val/ and http://api.jquery.com/focus/
This is a VERY rough sketch to help you out, but you could do something like this (giving you follow a certain naming convention):
<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>
<script>
function changeMe(inField) {
var fieldId = inField.id;
var type = fieldId.substring(0, 4);
if(type == 'text') {
var name = fieldId.substring(4);
var radioButton = document.getElementById("radio" + name);
radioButton.checked = true;
}else {
var name = fieldId.substring(5);
var textField = document.getElementById("text" + name);
textField.focus();
}
}
</script>
jQuery is what you want. Assuming your elements had IDs as follows:
$ radio button: money-radio
$ text box: money-text
% radio button: percent-radio
% text box: percent-text
...the code might look something like this. This will take care of disabling text boxes and focusing input properly.
<form>
<table>
<tr>
<td>
<input type="radio" id="money-radio" name="unit" value="money" />
<label for="money-radio">$ Off</label>
</td>
<td>
<input type="radio" id="percent-radio" name="unit" value="percent" />
<label for="percent-radio">% Off</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="money-text" name="money-off" />
</td>
<td>
<input type="text" id="percent-text" name="percent-off" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
$('#percent-radio, #money-radio').change(function() {
if ($('#percent-radio').val() == true) {
$('#percent-text').removeAttr('disabled').focus();
} else {
$('#percent-text').attr('disabled', 'disabled');
}
if ($('#money-radio').val() == true) {
$('#money-text').removeAttr('disabled').focus();
} else {
$('#money-text').attr('disabled', 'disabled');
}
}).change();
});
</script>