I have a problem in my code, I wanna show input text form when I click one of radio button.
Ajax code :
<script type="text/javascript">
$(document).ready(function(){
$('#macam').click( function() {
var value = $(this).val();
if(value == "0"){
$("#hilang").html("<input name='' value='tes' type='text' />");
}
else{
$("#hilang").html("");
}
});
});
</script>
HTML code :
<input id="macam" type="radio" name="radio" value="1" checked></input>
<input id="macam" type="radio" name="radio" value="0"></input>
<div id="hilang"></div>
Don't reuse ids
JS
$(document).ready(function(){
$('input[name="radio"]').click( function() {
var value = $(this).val();
if(value == "0"){
$("#hilang").html("<input name='' value='tes' type='text' />");
}
else{
$("#hilang").html("");
}
});
});
HTML
<input id="macam1" type="radio" name="radio" value="1" checked></input>
<input id="macam0" type="radio" name="radio" value="0"></input>
<div id="hilang"></div>
First problem that jumps out is that you have two identical ID's. Declare your two radios class="macam" instead of id="macam" and use $(".macam") to select those classes instead of $("#.maca")
Use this instead
var value = $('input[name="radio"]:checked').val();
use this
<script type="text/javascript">
$(document).ready(function(){
$('.macam').click( function() {
var value = $('input[name="radio"]:checked').val();
if(value === "0"){
$("#hilang").html("<input name='' value='tes' type='text' />");
}
else{
$("#hilang").html("");
}
});
});
</script>
<input class="macam" type="radio" name="radio" value="1" checked></input>
<input class="macam" type="radio" name="radio" value="0"></input>
<div id="hilang"></div>
Id should be unique. Change it to class.
HTML
<input class="macam" type="radio" name="radio" value="1" checked></input>
<input class="macam" type="radio" name="radio" value="0"></input>
<div id="hilang"></div>
jQuery
$('.macam').click( function() {
var value = $(this).val();
if(value == 0){
$("#hilang").html("<input name='' value='tes' type='text' />");
}
else{
$("#hilang").html("");
}
});
Related
How can I toggle a checkbox by using a text input check and check automatically if it exists in the list?
For example :
if you write 222 in the input with id=222 will be checked
if already checked it will be unchecked
if is not found an alert will be shown
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
//if value exsit in the list -> checked
//if value checked -> dechecked
//if value not exist -> alert not exist
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
You can check if your result collection has elements in it by using .length.
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
target = $(`#${Scan}`);
if (target.length) {
target.prop('checked', !target.prop('checked'));
} else {
alert("Not found");
}
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
Reference for template literals, just in case.
Here is an example using your conditions specified in question.
My alert is not a true js alert as that will halt any further input changes, so i've created an alert function to show if [name="scan"] input value exists in your checkbox input ids.
See comments in my script...
// create input ids array
let input_ids = [];
// for each checkbox type input id
$('[type="checkbox"]').each(function() {
// get the input id
let input_id = $(this).attr('id');
// add input id to input ids array
input_ids.push(input_id);
});
// on input change in doc for elem [name="scan"]
$(document).on('input', '[name="scan"]', function(e) {
// [name="scan"] current input val
let val = e.target.value;
// if val exist in input ids array
if ($.inArray(val, input_ids) >= 0) {
// get this input by id
let $input = $('#' + e.target.value);
// if input is checked
if ($input.prop('checked')) {
// uncheck input
$input.prop('checked', false);
} else {
// else check input
$input.prop('checked', true);
}
} else {
// run alert
alert(e);
}
// stop propagation
e.stopPropagation();
});
// not found alert
function alert(e) {
// activate alert class
$('.alert').addClass('active');
// time out to hide
setTimeout(function() {
// remove class
$('.alert').removeClass('active');
}, 1000);
}
.alert {
position: fixed;
top: 10px;
right: 10px;
background: red;
padding: .25rem .5rem;
opacity: 0;
transition: all .5s ease;
color: #fff;
}
.alert.active {
opacity: 1
}
<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>
<div class="alert">Not found</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I wouldn't use jQuery, but if you insist:
$(function(){
const scan = $('#Scan'), cci = $('.custom-control-input');
let scanVal;
scan.on('input', ()=>{
let scanVal = scan.val(), good;
cci.each((i, n)=>{
if(scanVal === $(n).val()){
n.checked = !n.checked; good = true;
}
});
if(good === undefined && scanVal.length > 2){
alert('Never use Alert');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
These are my Radio Buttons:
<input type="radio" name="qualitative" value="qualitative1" ng-model="showDiv">Show
<input type="radio" name="qualitative" value="qualitative2" ng-model="hideDiv">Hide
This is the div to be hide and show:
<div id="mark_me_visible">
<h1>I am Visible</h1>
</div>
Please help me with this
Thanks in advance.
<input type="radio" name="qualitative" value="show" ng-model="showDiv">Show
<input type="radio" name="qualitative" value="hide" ng-model="showDiv">Hide
<div id="mark_me_visible" ng-show="showDiv === 'show'">
<h1>I am Visible</h1>
</div>
and in controller:
$scope.showDiv = true;
<input type="radio" name="qualitative" value="qualitative1" ng-model="showDiv" ng-click="show()">Show
<input type="radio" name="qualitative" value="qualitative2" ng-model="hideDiv" ng-click="hide()">Hide
In the controller
$scope.show = function(){
$scope.show_div = true
}
$scope.hide = function(){
$scope.show_div = false
}
In the div
<div id="mark_me_visible" ng-if=!show_div>
<h1>I am Visible</h1>
</div>
Try this. Since we are using angularjs you have to define module and controller as I have done below.
var app = angular.module('IApp', []);
app.controller('formCtrl', function($scope) {
});
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="IApp" ng-controller="formCtrl">
<input type="radio" name="qualitative" ng-init="showDiv=true" checked="true" ng-click="showDiv = !showDiv">Show
<input type="radio" name="qualitative" ng-init="showDiv=true" ng-click="showDiv = !showDiv">Hide
<div id="Div1" ng-model="showDiv" ng-init="showDiv=true" ng-show="showDiv">
<h1>I am Visible {{showDiv}}</h1>
</div>
</div>
I have two radio buttons:
yes and
no
When I select 'yes',it should ask "Enter your requirements" and When I select 'no', nothing should happen.
I have tried this:
<form>
<input type="radio" name="question" value="yes">YES
<input type="radio" name="question" value="no">NO
<input type="button" name="submit" value="submit onclick="getValue('question')">
</form>
<script>
function getvalue(question) {
for (var i = 0; i < question.length; i++) {
var button = question[i];
if (button.checked) {
return button;
}
}
print getValue(question)
HTML
<input type="radio" id="radio1" name="radio" value='Yes' /><label for="radio1">Yes</label>
<input type="radio" id="radio2" name="radio" value='No'/><label for="radio2">No</label>
JS
$(function () {
$("input[name='radio']").on("change", function () {
if($("input[name='radio']:checked").val() == "Yes"){
alert("Enter your requirements");
}
});
});
JSFiddle try this
One div should select only one radio button and if one div selects test radio than other div should select taining radio.
<div><label>Test1<input type="radio" value="test" name="test" /></label>
<label>Training<input type="radio" value="training" name="training" /></label>
</div><hr />
<div>
<label>Test<input type="radio" value="test" name="test" /></label>
<label>Training<input type="radio" value="training" name="training" /></label>
</div>
here is the fiddle
Is this what you were looking for?
var rad = document.myForm1.myRadios;
var rad2 = document.myForm2.myRadios;
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
if(this.value==1){
document.getElementById('f2v2').checked = true;
} else {
document.getElementById('f2v1').checked = true;
}
}
}
for(var i = 0; i < rad2.length; i++) {
rad2[i].onclick = function() {
if(this.value==1){
document.getElementById('f1v2').checked = true;
} else {
document.getElementById('f1v1').checked = true;
}
}
}
<form name="myForm1">
Testing<input type="radio" name="myRadios" value="1" id="f1v1"/>
Training<input type="radio" name="myRadios" value="2" id="f1v2"/>
</form>
<form name="myForm2">
Testing<input type="radio" name="myRadios" value="1" id="f2v1"/>
Training<input type="radio" name="myRadios" value="2" id="f2v2"/>
</form>
I want to validate a form that have a controlgroup with inputs of type="radio" like this:
<form id="sendMessageFormContainer" action="#">
#Html.ValidationSummary()
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>To:</legend>
<div id="messageToContainer">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>
</div>
</fieldset>
</div>
//...
<input id="sendMsgBtn" name="sendMsgBtnName" type="submit" value="Send" />
</form>
I'm using validate() method to validate the rest of the elements, but I don't know which rule should I use to check that at least one radio button should be selected:
$(document).on("pageshow", function () {
$("#sendMessageFormContainer").validate({
rules: {
//???
},
messages: {
//...
},
submitHandler: function (form) {
alert("Call Send Action");
}
});
});
Solution 1
You need to add at least one class="required" to anyone of your radio inputs, like this:
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1" class="required" />
<label for="radio-choice-1">foo</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="2" />
<label for="radio-choice-2">bar</label>
Working example: http://jsfiddle.net/Gajotres/a8cJA/
Solution 2
Or you can do it like this:
$(document).on('pagebeforeshow', '#index', function(){
$("#sendMessageFormContainer").validate({
rules : {
"radio-choice-1" : { required : true }
},
messages : {
"radio-choice-1" : "Please select radio button"
},
submitHandler: function (form) {
alert("Call Send Action");
}
});
$(document).on('click', '#sendMsgBtn', function(){
$("#sendMessageFormContainer").validate().form();
});
});
Working example: http://jsfiddle.net/Gajotres/HwQeY/