I'm having some checkboxes and text inputs. The Text inputs are disabled when the pages loads. If a checkbox is checked, the corresponding input should be fillable. Here's my current code
For some reason I can't seem to get it right, I'm pretty new to JS and Jquery.
When I click the checkboxes, nothing happens, and when I load the page I get 6 times the text "false"
var c1 = $('#check1');
var c2 = $('#check2');
var c3 = $('#check3');
var f1 = $('#field1');
var f2 = $('#field2');
var f3 = $('#field3');
$(function() {
enable_cb(c1, f1);
enable_cb(c2, f2);
enable_cb(c3, f3);
c1.click(enable_cb(c1, f1));
c2.click(enable_cb(c2, f2));
c3.click(enable_cb(c3, f3));
});
function enable_cb(checkbox, field) {
if (checkbox.checked) {
console.log('if');
field.removeAttr("disabled");
} else {
console.log('else');
field.attr("disabled", true);
}
}
Here's a piece of html, the other parts look the same as this one:
<div class="form-group" >
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect customcheckbox" for="check1">
{{ Form::checkbox('check', 1, null, ['class' => 'mdl-checkbox__input', 'id' => 'check1']) }}
<span class="mdl-checkbox__label">test</span>
</label>
</div>
<div class="form-group" >
<label for="field1">test<br></label>
<select id="field1" name="field1" disabled class="searchselect searchselectstyle">
</select>
#if ($errors->has('field1'))
<span class="help-block">
<strong>{{ $errors->first('field1') }}</strong>
</span>
#endif
</div>
You have several issues.
You should use the change event when dealing with checkboxes so that people who navigate with the keyboard can use them.
You should provide an anonymous function to the event handler. You current code is immediately executing the enable_cb() function and then ignoring any further events.
The checkbox parameter passed to the function is a jQuery object which has no checked property. You should use is(':checked') instead.
You should use prop() over attr() and removeAttr() where possible.
Try this:
$(function() {
enable_cb(c1, f1);
enable_cb(c2, f2);
enable_cb(c3, f3);
c1.change(function() {
enable_cb(c1, f1)
});
c2.change(function() {
enable_cb(c2, f2)
});
c3.change(function() {
enable_cb(c3, f3)
});
});
function enable_cb(checkbox, field) {
if (checkbox.is(':checked')) {
console.log('if');
field.prop("disabled", false);
} else {
console.log('else');
field.prop("disabled", true);
}
}
Working example
That said, you should really look to DRY up your code to reduce repetition. Exactly how you do this depends on your HTML structure, but here's an example.
<div class="checkbox-group">
<input type="checkbox" id="check" />
<input type="text" id="subcomplex"/>
</div>
<div class="checkbox-group">
<input type="checkbox" id="yearlymanagermaintainancedayscheck" />
<input type="text" id="yearlymanagermaintainancedays" />
</div>
<div class="checkbox-group">
<input type="checkbox" id="yearlysuppliermaintainancedayscheck" />
<input type="text" id="yearlysuppliermaintainancedays" />
</div>
$('.checkbox-group :checkbox').change(function() {
$(this).siblings('input').prop('disabled', !this.checked);
}).change();
Working example
Note how much simpler the code is for the latter version, and how the JS will require no updates or maintenance no matter how many input elements you add to the HTML.
If you need to toggle a property using jQuery, you can use the prop() function, which you could use to toggle the disabled property :
$(yourElement).prop('disabled',!checkbox.checked);
which in your case might look something like :
function enable_cb(checkbox, field) {
$(field).prop('disabled',!checkbox.checked);
}
Related
I have a form with a price calculator and while I am able to set all text fields and such using a jQuery script, I can't figure out how to simply set a variable in that jQuery script that is used in a price calculator in another Javascript on the page.
There is a text field with an id of #price_draftarticles that I set a value to - that works but I also have a variable called price_draftarticles that is being added to other variables to create a total. I referenced my Form_Calculator() function but it's still not updating the total.
Relevant form code
<div class="col-sm-8">
<div class="radio">
<label>
<input class="structype" type="radio" name="CorpStructure" id="price_structureop3" value="I want to provide my own structure" onClick="checkRadioCS(); Form_Calculator();"><strong>I want to provide my own structure</strong>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="checkbox">
<label>
<input name="DraftArticles" type="checkbox" id="DraftArticles" onClick="checkRadioTF(); Form_Calculator();" value="Yes">DETAILS
</label>
</div>
</div>
<div class="col-xs-4 col-sm-2">
<input name="price_draftarticles" type="text" class="form-control fcalc" id="price_draftarticles" value="" readonly>
</div>
</div>
My jquery function
<script>
$(function () {
$('.structype').change(function () {
if ($(this).val() === 'I want to provide my own structure')
{
$("#DraftArticles").prop("checked", true);
$("#price_draftarticles").val('$25.00');
$("price_draftarticles").val('25.00');
$('#CustomStructureDetail').show('500');
}
if ($(this).val() == 'Standard structure template one class of shares') {
$('#CustomStructureDetail').hide('500');
}
if ($(this).val() == 'Two classes of shares') {
$('#CustomStructureDetail').hide('500');
}
});
checkRadioTF();
checkCheckBox();
Form_Calculator();
checkeFileJur();
});
</script>
Looks like you forgot the '#' character in
$("price_draftarticles").val('25.00');
This should be
$("#price_draftarticles").val('25.00');
As what #BYates said the selector missed '#' for price_draftarticles.
$("#price_draftarticles").val('25.00');
But if you're trying to get/set value of the input using it's name. The selector should be like this:
$('input[name="price_draftarticles"]').val('25.00')
I want to hide and show div according to radio buttons value.
HTML code is,
<div id="share_to_others">
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>
And jquery code that i tried is,
$("#share_to_others input[name='fx_sharepl_type']").click(function () {
alert("test");
});
$("#share_to_others input[name='fx_sharepl_type']").change(function () {
alert("test");
});
$("#fx_sharepl_type").change(function () {
alert("asdas");
});
$("input[name=fx_sharepl_type]:radio").change(function () {
alert("click fired");
});
$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
alert("click fired");
});
Many of them from jsfiddle working demo, But not working for me, i dont know why.
Am i doing anything wrong?
You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {
$(function() { // DOM loaded event handler
var show_duration = 0;
var content_33 = $("#content_33");
var content_22 = $("#content_22");
var content_11 = $("#content_11");
var bloc_radio_share = $("#share_to_others");
// Take an html element in parameter and show it
function show_content(content_id) {
content_id.show(show_duration);
}
// Take an html element in parameter and hide it
function hide_content(content_id) {
content_id.hide(0);
}
hide_content(content_22);
hide_content(content_11);
bloc_radio_share.change(function() {
var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
if (radio_checked_val == 33) {
hide_content(content_22);
hide_content(content_11);
show_content(content_33);
}
else if (radio_checked_val == 22) {
hide_content(content_33);
hide_content(content_11);
show_content(content_22);
}
else { // case content == 11
hide_content(content_33);
hide_content(content_22);
show_content(content_11);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
<label>
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
33
</label>
<label>
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
22
</label>
<label>
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
11
</label>
</div>
<div id="content_33">
This div is displayed because of click on radio button 33
</div>
<div id="content_22">
Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
If you click on radio button 11 you'll see me, like now
</div>
Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.
Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window.
Selecting any version of JQuery will make your code work.
I understand that this question may get closed for being duplicate (sorry if it is), but in my particular case, there may be a different problem for the functionality not working as desired, then it was in other similar questions.
Suppose we have a markup:
<div>
<label for="IsRecurring">Is Recurring</label>
</div>
<div>
<input id="IsRecurring" name="IsRecurring" type="checkbox" value="true">
<input name="IsRecurring" type="hidden" value="false" />
</div>
<div id="schedulerTypesList" style="display:none">
<div>
<label for="ScheduleTypeId">Schedule</label>
</div>
<div class="editor-field">
<input type="hidden" name="ScheduleTypeId" id="ScheduleTypeId" value="" />
<ul id="ScheduleTypeIdlist" >
<li>Once a weel</li>
</ul>
</div>
</div>
And a JS attached in the document.ready event:
$(document).ready(function() {
$('#IsRecurring').click(function () {
var thisCheck = $(this);
if (thischeck.is(':checked'))
$('#schedulerTypesList').show();
}
else {
$('#schedulerTypesList').hide();
})
});
Demo in JSFiddle.
Why checkbox click event isn't toggling the display of a div?
A few issues !!
$(document).ready(function() {
$('#IsRecurring').click(function() {
var thisCheck = $(this);
if (thisCheck.is(':checked')) { // added this closing bracket
$('#schedulerTypesList').show();
}
else {
$('#schedulerTypesList').hide();
} // added this closing bracket
});
});
Missing bracket after the if and thischeck instead of thisCheck and added correct closing brackets. Working demo : http://jsfiddle.net/manseuk/4DqXv/18/
I'm new to JavaScript. Here's my code:
<script>
function text_input_type(type)
{
if(type=='list'){
document.getElementById("note_input").innerHTML="<input type=\"text\" name=\"body\">";
}
else{
document.getElementById("note_input").innerHTML="<textarea id=\"note_input\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
}
}
</script>
<textarea id="note_input" name="body" cols="27" rows="5"></textarea>
<input type="radio" name="type" value="text" onclick=text_input_type('list') />
<input type="radio" name="type" value="list" onclick=text_input_type('text') />
I want it so that depending on which radio button you press it changes from a textarea to a input text type. The problem is instead of changing the input from a textbox to a smaller text input it just prints the code inside the box.
Hope this helps you in solving your problem.
<script>
function text_input_type(type)
{
if(type=='list'){
document.getElementById("note_input").innerHTML="<input type=\"text\" id=\"note_input1\" name=\"body\">";
}
else{
document.getElementById("note_input").innerHTML="<textarea id=\"note_input1\" name=\"body\" cols=\"27\" rows=\"5\"></textarea>";
}
}
</script>
<div id="note_input"><textarea id="note_input1" name="body" cols="27" rows="5"></textarea></div>
<input type="radio" name="type" value="text" onclick=text_input_type('list') />
<input type="radio" name="type" value="list" onclick=text_input_type('text') />
Try this code, you will get what you want.
Your code is correct, except for a small change.
<html>
<body>
<input type="radio" name="type" value="text" onclick="text_input_type('list');" />
<input type="radio" name="type" value="list" onclick="text_input_type('text');" />
<div id="note_input">
</body>
</html>
Should work fine
Bind the click handlers with Javascript too—inline Javascript isn't really necessary:
var elems = [].slice.call( document.getElementsByTagName("input") );
elems.forEach( function( elem ){
elem.onclick = function(){
var type = this.value;
if( type === 'list' ){
alert("type is list");
} else {
alert("type is not list");
}
};
});
Example.
I'm aware that this can be a little complicated. What we're simply doing is attaching a click function to each of the input tags on the page. We set the value of the clicked input tot he type variable and check if that variable is equal to the string list. If it is, then we fire the code in the if. If not, we fire the code in the else.
Essentially what this does is make it easier for you. You just put this code in your JS file and you don't have to worry about assigning the onclick on the elements themselves (and it looks you were doing it for two of them).
However, your code will work if you surround the onclick with quotes, like so:
onclick="text_input_type('list');"
How do I call onclick on a radiobutton list using javascript?
How are you generating the radio button list? If you're just using HTML:
<input type="radio" onclick="alert('hello');"/>
If you're generating these via something like ASP.NET, you can add that as an attribute to each element in the list. You can run this after you populate your list, or inline it if you build up your list one by one:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
More info: http://www.w3schools.com/jsref/event_onclick.asp
To trigger the onClick event on a radio button, invoke the click() method on its DOM element:
document.getElementById("radioButton").click()
using jQuery:
$("#radioButton").click()
AngularJs:
angular.element('#radioButton').trigger('click')
I agree with #annakata that this question needs some more clarification, but here is a very, very basic example of how to set up an onclick event handler for the radio buttons:
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>
The problem here is that the rendering of a RadioButtonList wraps the individual radio buttons (ListItems) in span tags and even when you assign a client-side event handler to the list item directly using Attributes it assigns the event to the span. Assigning the event to the RadioButtonList assigns it to the table it renders in.
The trick here is to add the ListItems on the aspx page and not from the code behind. You can then assign the JavaScript function to the onClick property. This blog post; attaching client-side event handler to radio button list by Juri Strumpflohner explains it all.
This only works if you know the ListItems in advance and does not help where the items in the RadioButtonList need to be dynamically added using the code behind.
I think all of the above might work. In case what you need is simple, I used:
function checkRadio(name) {
if (name == "one") {
console.log("Choice: ", name);
document.getElementById("one-variable-equations").checked = true;
document.getElementById("multiple-variable-equations").checked = false;
} else if (name == "multiple") {
console.log("Choice: ", name);
document.getElementById("multiple-variable-equations").checked = true;
document.getElementById("one-variable-equations").checked = false;
}
}
<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
<input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
<input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>
Try the following solution
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
</div>
The other answers did not work for me, so I checked Telerik's official documentation it says you need to find the button and call the click() function:
function KeyPressed(sender, eventArgs) {
var button = $find("<%= RadButton1.ClientID %>");
button.click();
}