Hi i have two check boxes PlanA AND AndroidApps and one textbox when i checked check box then text box enable and when i unchecked thrn text dox disabled but problem is when tex box is enable and i write something in text box and then unchecked my checkbox then my textbox disabled but that text which i typed it does not delete and text box does not clear
Here is my code
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#main_box').on('change',function(e) {
console.log("dfsd");
$("#a2").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
});
});
</script>
</head>
<body>
<input id="main_box"type="checkbox" name="PlanA" value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
<input type="checkbox" name="AndroidApps" id="a2" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
<input type="text" name="emailid"id="emailid"disabled="disabled" required size="45" >
</body>
</html>
How can i achieve this
Thanks in advance
You can use val() to set the value of your input:
$("#emailid").val('');
Updated Fiddle
Add a condition
$(document).ready(function () {
$('#main_box').on('change', function (e) {
$("#a2").prop("checked", this.checked);
$("#emailid").prop("disabled", !this.checked);
if(!this.checked){
$("#emailid").val('');
}
});
});
Demo: Fiddle
Use this Link::
http://jsfiddle.net/rjha999/DM9b9/
contains code for checkbox check ::
$("#chk").click(function(){
if($("#chk").is(":checked"))
{
$("#txt").val('');
}
})
You can use val() to set the value of your input:
$("#emailid").val('');
and if your are retrieving values, you use:
$(selector).val()
Don't get confused with those two
Hope this helps..
Related
What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.
I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.
I need one help .I need to check radio button and set the value using Jquery/Javascript.I did something but its not working.
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
document.getElementById('btn').onclick=function(){
var condata='123';
$("input[name=con][value=" + condata+ "]").prop('checked', true).trigger('click');
}
Here when user will click on check button it can not check the check box and can not set the value.Please help me.
try this, it can help:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var condata = '123';
$("#btn").click(function(){
$('#con').val(condata).prop('checked', true).trigger("click");
});
});
function checkCon()
{
alert($('#con').val());
}
</script>
</head>
<body>
<input type="radio" name="con" id="con" value="" onClick="checkCon();">Country
<button type="button" id="btn">Check</button>
</body>
</html>
this code is working I've checked this, you can also try
its probably because you are mixing up javascript and jQuery , either you should use jQuery or JavaScript. Hope the above code help. and make sure you have added jQuery library before using this code
You have to use the cotes.
Reference
$("input[name='con'][value='" + condata+ "']").prop('checked', true).trigger('click');
It's clear that there's no radio button with value '123'.
Note 1 : You don't need to prop and trigger at the same time, just prop or trigger the click events.
$("input[name=con][value=" + condata+ "]").trigger('click');
Note 2 : Click trigger automatically change the radio button properties. If you want to force it checked, do something like this.
$("input[name=con][value=" + condata+ "]").on('click', function(e) {
e.preventDefault();
$(this).prop('checked', true);
});
<input type="radio" name="con" id="con" value="" onClick="checkCon();">
Your radio button don't have value="123"
That is why it's not getting checked.
This is the corrected tag
<input type="radio" name="con" id="con" value="123" onClick="checkCon();">
and it will work as intended
I'm coding a form which gets the value for some search process .. I'm coding two text fields for the user to give the input on any one of them.But only one of them would enable at a time .. user can chose the option by checking check box. by default one of the field should b enable, when the check-box is checked it(the one which was initially enable) gets disabled and other gets enabled, and vice versa when the check-box is unchecked.
Here is the fiddle:
http://jsfiddle.net/awBvq/224/
This will fix your problem
HTML :
<input type="text" name="" />
<input type="checkbox" name="" />
<input type="text" name="" disabled="'disabled'"/>
JS :
$(':checkbox').change(function(){
if ($(this).is(':checked')) {
$(this).prev().attr('disabled','disabled');
$(this).next().removeAttr('disabled');
} else {
$(this).next().attr('disabled','disabled');
$(this).prev().removeAttr('disabled');
}
});
It could have been done simpler, but this is just a hint:
if($("#CheckBox").is(":checked"))
{
$("#Field1").attr("disabled","disabled");
$("#Field2").removeAttr("disabled");
}
else
{
$("#Field1").removeAttr("disabled");
$("#Field2").attr("disabled","disabled");
}
Simple logic:
(1) By default disable any one of the textbox.
(2) Using .prev() or .next(), check whether anyone is disabled.
(3) if so, enable it and disable the other else vice versa.
HTML:
<input type="text" name="" disabled/> <!--By default it is disabled-->
<input type="checkbox" name="" />
<input type="text" name="" />
Javascript:
$(':checkbox').change(function () {
if ($(this).prev().is(':disabled')) {
$(this).prev().removeAttr('disabled');
$(this).next().attr('disabled', 'disabled');
} else {
$(this).next().removeAttr('disabled');
$(this).prev().attr('disabled', 'disabled');
}
});
Check this JSFiddle
I am trying to run this code.
the code should take a string as input and put that input to a div and calculate the width of the div.
here is code i have used.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" value="" name="input">
<input type="submit" value="submit" name="submit">
<script>
var elem = '<div id="divitem" style="width:auto;"></div>';
$('body').append($(elem));
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
</script>
</body>
</html>
but i am not getting any output. how to do this?
please help me.
Try this paps!
Demo
This is similar to your problem.
HTML
<div id="container">
<input type="text" value="" id="inputtext">
<input type="button" value="submit" id="submit">
</div>
Script
$(function(){
var elem = '<span id="divitem"></span>';
$('#container').append($(elem));
$("#submit").click(function () {
$('#divitem').html($('#inputtext').val());
alert($('#divitem').width());
});
});
Here's a fiddle
To obtain value from a text field you need to use this,
$('input[name="input"]').val();
and not .text()
To answer your second question, you need to use this
$('#divitem').attr('style');
or
$('#divitem').attr('width');
The problem is here:
$("submit").click(function () {
var text = $(this).text();
value= $("input").val(text);
alert(value);
});
$(this) refers to the element that you select, which is the submit button.
You should replace the first line of the function with
$('input[name="input"]').text();
Finally, setting the html content of the div, will be done this way:
elem.html(test);
Hope this helps. Have a great day.
I have created a jsFiddle for your question http://jsfiddle.net/N4zFZ/ in JavaScript
You can calculate width by
`var width = $('#divId').attr('width');`