Hi I have coded a Grid view where we have one checkbox and two textbox. My need is that as we make any change in textbox like modify text from 0 to 1, the Checkbox should get automatically checked. This code is in asp.net and this can be done by javascript or Jquery.
Need code to do this activity.
Try this example
Html
<input type="text"/>
<input type="checkbox"/>
Script
$('input[type="text"]').keypress(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
Working demo
This will be Better answer of this question.. I initially debug by help of Manoj. Thanks again.
HTML
<input type="text" id="selector"/>
<input type="checkbox" id="myCheckbox"/>
SCRIPT
$('#selector').change(function () {
$('#myCheckbox').prop('checked', true); // Checks it
alert($('#selector').val());
});
Related
I am trying to design a simple web page for converting temperature into farenheit or celsius.After entering the value in first textbox andthen after clicking on one of the radio button I should get the result into separate textbox.
Plz help me.
Html
<input type="text" id="temp" />
<input type="text" id="fh" />
<input type="radio" id="radio"/>
Javascript
$('#radio').change( function() {
var temp=document.getElementById("temp").value;
temp=temp-1;
var fh=temp*1.8+33.8;
document.getElementById("fh").value=fh;
});
Note : Done proper validations , Include jquery library
DEMO
I have a html form in which I have four radio buttons and one text box. What I am trying to do is - Once I click Test4 radio button, I want to disable node textbox so that nobody can type anything in that. I don't want to hide it, I just want to disable it.
But if anybody clicks either Test1 or Test2 or Test3 then anybody can type anything into it.
Here is my jsfiddle
Is this possible to do using jquery?
Yes, this is possible; I'd suggest:
$('input[type="radio"]').change(function(){
$('#node').prop('disabled', this.value === 'test4');
});
JS Fiddle demo.
This sets the disabled property of the #node element to true (if the changed-element has the value of 'test4'), and to false if it does not.
Further to the discussion in comments (wherein, basically, the OP revealed that checking other input elements of type="radio" caused the #node element to become re-enabled), I've amended the HTML to offer a simple means of associating the appropriate inputs with the specific text-input, using data-affects. giving the following HTML:
<input type="radio" name="data" id="test1" value="test1" data-affects="nodes" />Test1
<input type="radio" name="data" id="test2" value="test2" data-affects="nodes" />Test2
<input type="radio" name="data" id="test3" value="test3" data-affects="nodes" />Test3
<input type="radio" name="data" id="test4" value="test4" data-affects="nodes" />Test4
Coupled with the amended jQuery:
$('input[type="radio"][data-affects]').change(function(){
$('#' + this.getAttribute('data-affects')).prop('disabled', this.value === 'test4');
});
JS Fiddle demo.
References:
change().
prop().
To your jsfiddle, add on the top of js this piece of code:
$("input:radio[name=data]").change(function () {
var checkedValue = $(this).val();
if (checkedValue == "test4") {
$("#node").prop("disabled", true);
} else {
$("#node").prop("disabled", false);
}
});
You can also call the radio group by id instead of name:
$("input:radio[id=data]").change(function () { //first line of code
Live example here: http://jsfiddle.net/pw9nZ/
Hope this helps you...
Theo.
I am trying to set focus on a textbox in a form that's a part of jQuery tree. Here is my code
$(document).ready(function() {
$("#search").focus();
});
HTML:
<div>
<form action="search" method="post" name="frmSearch>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="submit" name="button" value="Search" />
</form>
</div>
When I click on Search tab in the tree, it won't set focus on the textbox. Can someone let me know what's wrong in the code?
You're focusing the textbox on page load, however as soon as you click anywhere else on the page (such as a tab), the focus will be removed from the textbox and given to whatever you just clicked.
Instead of focusing on page load, attach a click listener to your tab so that when it is clicked the search textbox gets focus. Since I haven't seen all your markup, I'm using #mySearchTab as a placeholder for the ID of your search tab:
$(document).ready(function() {
$("#mySearchTab").on('click', function() {
$('#search').focus();
});
});
Also, don't forget to close your functions with a ).
I'm not sure what your tree looks like but here's a working demo using jQuery tabs.
try following:
$(function(){
$("input:first:text").focus();
});
working fiddle here: http://jsfiddle.net/8CTqN/2/
tested on chrome
I made some modification in your js codes
http://jsfiddle.net/8CTqN/5
$(document).ready(function(){
$(function(){
$("#search2").focus();
});
});
I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.
I used code from the following:
Fancy checkboxes
The demo appears to work but it seems that it does not really change the status of the checkbox. Rather it just makes it looked checked or not checked.
Here's the HTML:
<fieldset class="checkboxes">
<label for="checkbox-01" class="label_check c_on"><input type="checkbox" checked="" value="1" id="checkbox-01" name="sample-checkbox-01"> I agree to the terms & conditions.</label>
<label for="checkbox-02" class="label_check"><input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02"> Please send me regular updates.</label>
</fieldset>
Here's the javascript that is used:
<script type="text/javascript">
function setupLabel() {
if ($('.label_check input').length) {
$('.label_check').each(function () {
$(this).removeClass('c_on');
});
$('.label_check input:checked').each(function () {
$(this).parent('label').addClass('c_on');
});
};
};
var linkObj;
$(document).ready(function () {
$('.label_check, .label_radio').click(function () {
setupLabel();
});
setupLabel();
Can someone please confirm if there's a problem with the code. Seems to me that the author has missed making the code change the checkbox checked state.
Here's the code I use to check the status of the checkbox:
var action = $('#htmlEdit').is(":checked") ? "Editing HTML" : "Editing";
Am I doing the check wrongly or is the author's code just not changing the input element?
Not clear, but it works
http://jsfiddle.net/mplungjan/U4cLN/
When you click a label that uses
<label for="checkboxID" />, the box gets checked (and unchecked) in any browser without needing JavaScript. It is pure browser default behaviour
So
<LABEL class="label_check" for="checkbox-02"><INPUT name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox"> Please send me regular updates.</LABEL>
will check the box and the script styles the label