How can I test a switch based on a different value?
I have an autoload button that should be selected based on what value the user gives. Suppose the user enters "male", the male radio button should be selected. Consider that the user enters a value in lowercase.
function check(){
var val = document.getElementById("inp").value;
if( val == "male"){
//select male radio button
}
if(val == "female"){
//select female radio button
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 0px;" value="M" type="radio" name="gender" />M</label>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 0px;" type="radio" value="F" name="gender" />F</label>
</div><br><br>
<input id="inp" type="text" onblur="check()"/>
+3
source to share
7 replies
You can use jquery's built-in Click () function for this task.
function check(){
var val = document.getElementById("inp").value;
if( val == "male"){
$('#male').click();
console.log(val);
}
if(val == "female"){
$('#female').click();
console.log(val);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="male" />M</label>
<label class="btn btn-default">
<input class="form-control input-sm" type="radio" value="F" name="gender" id="female" />F</label>
</div><br><br>
<input id="inp" type="text" onblur="check()"/>
+1
source to share
function check(){
var val = document.getElementById("inp").value;
if( val == "male"){
$("input[value='M']").click();
}
if(val == "female"){
$("input[value='F']").click();
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" />M</label>
<label class="btn btn-default">
<input class="form-control input-sm" type="radio" value="F" name="gender" />F</label>
</div><br><br>
<input id="inp" onKeyup="check()" type="text"/>
+4
source to share
You can just use JS to do document.getElementById("rdGenderElement").checked = {true|false};
Example
document.getElementById("btnChangeRdGenderM").addEventListener('click', function(){
document.getElementById("rdGenderM").checked = true;
});
document.getElementById("btnChangeRdGenderF").addEventListener('click', function(){
document.getElementById("rdGenderF").checked = true;
});
.gender{
width: 100%;
}
button{
padding: 10px 30px;
margin: 5px;
}
<button id="btnChangeRdGenderM">Select M</button>
<button id="btnChangeRdGenderF">Select F</button>
<hr/>
<div class="gender">
M <input id="rdGenderM" type="radio" name="gender" />
<br/>
F <input id="rdGenderF" type="radio" name="gender" />
</div>
+2
source to share
Try with attribute id
and use toLowerCase()
convert value to lowercase
function check(){
var val = document.getElementById("inp").value;
console.log(val)
document.getElementById(val.trim().toLowerCase()).click();
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="male" checked/>M</label>
<label class="btn btn-default">
<input class="form-control input-sm" id="female"type="radio" value="F" name="gender" />F</label>
</div><br><br>
<input id="inp" type="text" onblur="check()"/>
+1
source to share
Try below snippets,
function check(){
var val = document.getElementById("inp").value;
var label_male_ = document.getElementById('male');
var chk_male_ = document.getElementById('chk_male');
var label_female_ = document.getElementById('female');
var chk_female_ = document.getElementById('chk_female');
// Set default.
label_male_.className += 'btn btn-default';
chk_male_.checked = false;
// Set default.
label_female_.className += 'btn btn-default';
chk_female_.checked = false;
if( val == "male"){
//check male radio button
label_male_.className += ' active';
chk_male_.checked = true;
}
if(val == "female"){
//check female radio button
label_female_.className += ' active';
chk_male_.checked = true;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default" id="male">
<input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="chk_male" />M
</label>
<label class="btn btn-default" id="female">
<input class="form-control input-sm" type="radio" value="F" name="gender" id="chk_female" />F
</label>
</div><br /><br />
<input id="inp" type="text" onblur="check()"/>
+1
source to share
You have jquery included, so I am using that to replace your "check" function and bind it to the input. Instead of assuming the text is in lowercase letters, we will force it manually using toLowerCase (). Pay attention to the selectors for radio inputs with the corresponding value. Also notice that we are setting the "checked" property instead of the old methods.
// bind keyup events on the input textbox
$(document).on('keyup', '#inp', function(e) {
// get a lowercase version of the input text
var input = $(this).val().toLowerCase();
// do a comparison and set the appropriate radio
if (input == 'male')
$('input:radio[value=M]').prop('checked', true);
else if (input == 'female')
$('input:radio[value=F]').prop('checked', true);
});
I prefer to use .on () to add event handlers because it matches the .off () method to remove them. Binding to $ (document), as this ensures that event handlers are executed even if the form elements did not exist when the page was created - great for dynamically generated forms. Data aggregation provides excellent control for binding and unbinding event handlers based on need and focus.
+1
source to share
First of all, pay attention to the fact that you need to map the user input value to some element value so that it can be selected dynamically, otherwise you have to define it already by what element will be selected throughout the array of elements. So I changed my input values a bit to "men" and "women". Then it would be easy to perform validation of the operation based on user input and switch values.
function check()
{
var val = document.getElementById("inp").value;
var elements = document.getElementsByName("gender");
for(i of elements)
{
if(val == i.value)
{
i.checked= true;
i.parentNode.classList.add("active");
}
else
{
if(i.checked)
i.parentNode.classList.remove("active");
}
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<p>Gender <span>*</span></p>
<label class="btn btn-default">
<input class="form-control input-sm" style="width: 10px;" value="male" type="radio" name="gender" />M</label>
<label class="btn btn-default">
<input class="form-control input-sm" type="radio" value="female" name="gender" />F</label>
</div><br><br>
<input id="inp" type="text" onblur="check()"/>
+1
source to share