<input type='checkbox' name='chk1' value='1'
onclick='enable_txtbox("item","item1")'>name<br>
<input type='text' name='name1' id='item' disabled='disabled'><input type='text'
name='name1' id='item1' disabled='disabled'><input type='text' name='name1' id='item2'
disabled='disabled'>
<script>
function enable_txtbox(id,id1)
{if(document.getElementById(id).disabled == true)
{
document.getElementById(id).disabled = false;
} else
{document.getElementById(id).disabled = true; }
return true;}
</script>
use this:
<script>
function enable_txtbox(id, id1) {
var a =(document.getElementsByName("name1"));
for(var i=0;i<a.length;i++){
var b=a[i].id;
if(document.getElementById(b).disabled == true)
{
document.getElementById(b).disabled = false;
}
else
{
document.getElementById(b).disabled = true;
}
}
return true;
}
</script>
Related
Why does this happen ? I am not using correct syntax here?
HTML is as below
<div id="tasks" value="1" class="1">
<input type="checkbox">
<label>Task has been added</label>
</div>
jQuery is as below
$("#cButton").click(function () {
var arr_id = [];
$(":checkbox:checked").each(function (i) {
arr_id[i] = $(this).val();
console.log("$(this).val() : " + $(this).val());
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
Console O/P is as below
$(this).val() : on
The best way to get a boolean value from a checkbox input with jQuery is using prop: $(this).prop("checked").
If the value attribute was omitted, the default value for the checkbox is on
MDN input type="checkbox"
If you need to use the value of the input you should be placing it inside the input tag. Because you didn't set a value it's taking the default "on" when calling val() on it.
$("#cButton").click(function () {
var arr_id = [];
$(":checkbox:checked").each(function (i) {
arr_id[i] = $(this).prop("checked");
console.log($(this).prop("checked"));
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" value="1" class="1">
<input type="checkbox">
<label>Task has been added</label>
</div>
<button id="cButton">Button</button>
You placed the value attribute on the parent <div>... A <div> does not have a value. It has to be on the input.
The elements which can have a value are ref:
<button>
<data>
<input>
<li>
<meter>
<option>
<progress>
<param>
$("#cButton").click(function() {
var arr_id = [];
$(":checkbox:checked").each(function(i) {
arr_id[i] = $(this).val();
console.log("$(this).val() : " + $(this).val());
})
if (arr_id.length == 0) {
alert("atleast check one");
} else {
for (var i = 0; i < arr_id.length; i++) {
$("." + arr_id[i]).remove();
console.log("Hello");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks" class="1">
<input type="checkbox" value="1">
<label>Task has been added</label>
</div>
<button id="cButton">Button</button>
I am working on a form to fill out my bank account number, so I want to put a tick. Automatically so that it can be viewed more easily
<input class="form-control" type="text" placeholder="" name="account_number">
Try this
$(document).ready(function () {
$("#txtPhoneNo").keyup(function (e) {
if($(this).val().length === 14) return;
if(e.keyCode === 8 || e.keyCode === 37 || e.keyCode === 39) return;
let newStr = '';
let groups = $(this).val().split('-');
for(let i in groups) {
if (groups[i].length % 4 === 0) {
newStr += groups[i] + "-"
} else {
newStr += groups[i];
}
}
$(this).val(newStr);
});
})
<input type='text' placeholder="please enter" id="txtPhoneNo" name='phone' maxlength='14'><BR>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How to make if I press the 'x' button, it will uncheck all that part and close it? according to my coding, I only just managed to make the top but at the bottom it's not uncheck, and the checkbox at the bottom is not closed, I want it unchecked and closed the bottom checkbox.
Example at the 'solving' checkbox. When I tick that, there will be another checkbox. When I press 'x' button, it will uncheck the 'solving' checkbox. How to uncheck all of that at the bottom 'solving' checkbox and close it when I press 'x' button.
<header>
<h3><b><label for="search">Search</label></b>
<input id="search" type="text" name="search" placeholder="Search.." onkeyup="filterWithSearch(event)" /></h3>
<script>
function fungsi() {
var a = document.getElementById("subSolving1").checked;
var b = document.getElementById("subSolving2").checked;
var c = document.getElementById("subSolving3").checked;
var d = document.getElementById("subConclusion1").checked;
var e = document.getElementById("subConclusion2").checked;
var f = document.getElementById("subRepeated1").checked;
var g = document.getElementById("subRepeated2").checked;
console.log(a, b, c, d, e, f, g);
if (c || d === true) {
document.getElementById("Status").innerHTML = "Problem1";
} else if (b || a || e) {
document.getElementById("Status").innerHTML = "Problem2";
} else if (f && g) {
document.getElementById("Status").innerHTML = "Problem5";
} else if (f) {
document.getElementById("Status").innerHTML = "Problem3";
} else if (g) {
document.getElementById("Status").innerHTML = "Problem4";
}
}
function filterWithSearch(e) {
console.log(e)
if (e.which === 13) {
var searchStr = e.target.value.toLowerCase();
var cxb = document.getElementById('subOptionsContainer').querySelectorAll("label")
var subSolving = document.getElementById("subSolving");
var subConclusion = document.getElementById("subConclusion");
var subRepeated = document.getElementById("subRepeated");
if (searchStr === '') {
subSolving.style.display = Solving.checked ? "block" : "none";
subConclusion.style.display = Conclusion.checked ? "block" : "none";
subRepeated.style.display = Repeated.checked ? "block" : "none";
} else {
subSolving.style.display = "block";
subConclusion.style.display = "block";
subRepeated.style.display = "block";
}
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (cxb[i].textContent.toLowerCase().indexOf(searchStr) !== -1) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
</script>
<body>
<b>Original:</b>
<div id="Alltry">
<script type="text/javascript">
function ShowHideDiv(Solving) {
var subSolving = document.getElementById("subSolving");
subSolving.style.display = Solving.checked ? "block" : "none";
var cxb = subSolving.getElementsByTagName('label');
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (Solving.checked) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
function uncheckAll(divid) {
var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = false;
}
}
}
</script>
<div style="float: left; max-width: 80%;"><label for="Solving"> <input type="checkbox" id="Solving" onclick="ShowHideDiv(this)" value="Solving"/>Solving</label>
</div>
</div>
<script type="text/javascript">
function ShowHideDiv2(Conclusion) {
var subConclusion = document.getElementById("subConclusion");
subConclusion.style.display = Conclusion.checked ? "block" : "none";
}
</script>
<label for="Conclusion"> <input type="checkbox" id="Conclusion" onclick="ShowHideDiv2(this)" value="Conclusion"/>Conclusion</label>
<script type="text/javascript">
function ShowHideDiv3(Repeated) {
var subRepeated = document.getElementById("subRepeated");
subRepeated.style.display = Repeated.checked ? "block" : "none";
}
</script>
<label for="Repeated"> <input type="checkbox" id="Repeated" onclick="ShowHideDiv3(this)" value="Repeated"/>
Repeated</label>
<div id="subOptionsContainer">
<div id="subSolving" style="display: none">
<input type="button" id="uncheckAll" onclick="uncheckAll('Alltry')" value="x"><br>
<p><label> <input type="checkbox" id="subSolving1" onclick="fungsi()"/>subSolving1
</label></p>
<p><label> <input type="checkbox" id="subSolving2" onclick="fungsi()"/>subSolving2</label></p>
<p><label> <input type="checkbox" id="subSolving3" onclick="fungsi()"/>subSolving3 </label></p>
</div>
<div id="subConclusion" style="display: none">
<p><label> <input type="checkbox" id="subConclusion1" onclick="fungsi()"/>subConclusion</label></p>
<p><label> <input type="checkbox" id="subConclusion2" onclick="fungsi()"/>subConclusion
</label></p>
</div>
<div id="subRepeated" style="display: none">
<p><label> <input type="checkbox" id="subRepeated1" onclick="fungsi()"/>subRepeated1</label></p>
<p><label> <input type="checkbox" id="subRepeated2" onclick="fungsi()"/>subRepeated2
</label></p>
</div>
</div>
<b><hr/><p id="Status"></p></b></header>
</div>
</div>
just modify this function uncheckAll(divid) like below
function uncheckAll(divid) {
var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = false;
ShowHideDiv(Solving);
ShowHideDiv(Solving);
ShowHideDiv2(this);
ShowHideDiv3(this);
var Conclusion = document.getElementById("Conclusion").checked = false;
document.getElementById("Repeated").checked = false;
}
}
}
<header>
<h3><b><label for="search">Search</label></b>
<input id="search" type="text" name="search" placeholder="Search.." onkeyup="filterWithSearch(event)" /></h3>
<script>
function fungsi() {
var a = document.getElementById("subSolving1").checked;
var b = document.getElementById("subSolving2").checked;
var c = document.getElementById("subSolving3").checked;
var d = document.getElementById("subConclusion1").checked;
var e = document.getElementById("subConclusion2").checked;
var f = document.getElementById("subRepeated1").checked;
var g = document.getElementById("subRepeated2").checked;
console.log(a, b, c, d, e, f, g);
if (c || d === true) {
document.getElementById("Status").innerHTML = "Problem1";
} else if (b || a || e) {
document.getElementById("Status").innerHTML = "Problem2";
} else if (f && g) {
document.getElementById("Status").innerHTML = "Problem5";
} else if (f) {
document.getElementById("Status").innerHTML = "Problem3";
} else if (g) {
document.getElementById("Status").innerHTML = "Problem4";
}
}
function filterWithSearch(e) {
console.log(e)
if (e.which === 13) {
var searchStr = e.target.value.toLowerCase();
var cxb = document.getElementById('subOptionsContainer').querySelectorAll("label")
var subSolving = document.getElementById("subSolving");
var subConclusion = document.getElementById("subConclusion");
var subRepeated = document.getElementById("subRepeated");
if (searchStr === '') {
subSolving.style.display = Solving.checked ? "block" : "none";
subConclusion.style.display = Conclusion.checked ? "block" : "none";
subRepeated.style.display = Repeated.checked ? "block" : "none";
} else {
subSolving.style.display = "block";
subConclusion.style.display = "block";
subRepeated.style.display = "block";
}
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (cxb[i].textContent.toLowerCase().indexOf(searchStr) !== -1) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
</script>
<body>
<b>Original:</b>
<div id="Alltry">
<script type="text/javascript">
function ShowHideDiv(Solving) {
var subSolving = document.getElementById("subSolving");
subSolving.style.display = Solving.checked ? "block" : "none";
var cxb = subSolving.getElementsByTagName('label');
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (Solving.checked) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
function uncheckAll(divid) {
var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = false;
ShowHideDiv(Solving);
ShowHideDiv2(this);
ShowHideDiv3(this);
document.getElementById("Conclusion").checked = false;
document.getElementById("Repeated").checked = false;
document.getElementById("subSolving1").checked = false;
document.getElementById("subSolving2").checked = false;
document.getElementById("subSolving3").checked = false;
document.getElementById("subConclusion1").checked = false;
document.getElementById("subConclusion2").checked = false;
document.getElementById("subRepeated1").checked = false;
document.getElementById("subRepeated2").checked = false;
}
}
}
</script>
<div style="float: left; max-width: 80%;"><label for="Solving"> <input type="checkbox" id="Solving" onclick="ShowHideDiv(this)" value="Solving"/>Solving</label>
</div>
</div>
<script type="text/javascript">
function ShowHideDiv2(Conclusion) {
var subConclusion = document.getElementById("subConclusion");
subConclusion.style.display = Conclusion.checked ? "block" : "none";
}
</script>
<label for="Conclusion"> <input type="checkbox" id="Conclusion" onclick="ShowHideDiv2(this)" value="Conclusion"/>Conclusion</label>
<script type="text/javascript">
function ShowHideDiv3(Repeated) {
var subRepeated = document.getElementById("subRepeated");
subRepeated.style.display = Repeated.checked ? "block" : "none";
}
</script>
<label for="Repeated"> <input type="checkbox" id="Repeated" onclick="ShowHideDiv3(this)" value="Repeated"/>
Repeated</label>
<div id="subOptionsContainer">
<div id="subSolving" style="display: none">
<input type="button" id="uncheckAll" onclick="uncheckAll('Alltry')" value="x"><br>
<p><label> <input type="checkbox" id="subSolving1" onclick="fungsi()"/>subSolving1
</label></p>
<p><label> <input type="checkbox" id="subSolving2" onclick="fungsi()"/>subSolving2</label></p>
<p><label> <input type="checkbox" id="subSolving3" onclick="fungsi()"/>subSolving3 </label></p>
</div>
<div id="subConclusion" style="display: none">
<p><label> <input type="checkbox" id="subConclusion1" onclick="fungsi()"/>subConclusion</label></p>
<p><label> <input type="checkbox" id="subConclusion2" onclick="fungsi()"/>subConclusion
</label></p>
</div>
<div id="subRepeated" style="display: none">
<p><label> <input type="checkbox" id="subRepeated1" onclick="fungsi()"/>subRepeated1</label></p>
<p><label> <input type="checkbox" id="subRepeated2" onclick="fungsi()"/>subRepeated2
</label></p>
</div>
</div>
<b><hr/><p id="Status"></p></b></header>
</div>
</div>
Here is my code
i have an input textbox where I get a new value
this line doesn't work,
$(document).on('click', '#af_cbms_add_depID', function()
{
var toclone=$("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
if((toclone!=='') && (toclone>0))
{
///here's the problem
$(".lahatkami").each(function()
{
input = $(this).val();
//i also tried the other
//if(this.value===toclone)
if(input===toclone)
{
alert("There is a duplicate value " + this.value);
$('#newdepID').val('');
$('#newdepID').focus();
return false;
}
else
{
$("#af_cbms_depIDset").append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
$('#newdepID').val('');
$('#newdepID').focus();
}
});
}
else
{
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="textbox" id="newdepID" value="3"/> sample we a number 3 value
<button id="af_cbms_add_depID">Submit</button> //submits the value
//here are the inputs
<input type="textbox" class="lahatkami" id="newdepID" value="3"/>
<input type="textbox" class="lahatkami" id="newdepID" value="5"/>
<input type="textbox" class="lahatkami" id="newdepID" value="4"/>
after clicking submit i already coded it if the text input is empty.
but inside that if not empty i check again if the value is already in the set of inputs
i put a console.log to check inside but not working
try to this..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$( "#af_cbms_add_depID" ).click(function()
{
var toclone= $("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
if((toclone!=='') && (toclone > 0)) {
$(".lahatkami").each(function() {
input = $(this).val();
//alert(input);
if(input===toclone)
{
alert("There is a duplicate value " + this.value);
$('#newdepID').val('');
$('#newdepID').focus();
return false;
}else {
$("#af_cbms_depIDset").append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
$('#newdepID').val('');
$('#newdepID').focus();
}
});
} else {
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});
</script>
i am not clear with you exact requirement but i think below is code whic you looking for.
$(document).on('click', '#af_cbms_add_depID', function(){
var toclone=$("#newdepID").val();
var torefer=$("#af_cbms_question_item").val();
$("#af_cbms_depIDset").html("");
if((toclone!=='') && (toclone>0)){
var $tmpdom = $("<span></span>");
$(".lahatkami").each(function(){
input = $(this).val();
if(input===toclone){
alert("There is a duplicate value " + this.value);
$(this).val('');
$(this).focus();
return;
}else {
$tmpdom.append('<input type="text" name="'+torefer+'" id="depID'+toclone+'" class="lahatkami" value="'+toclone+'" style="width:40px !important; text-align:center;" readonly />');
}
});
$("#af_cbms_depIDset").append($tmpdom.html());
}else{
alert('No dependent question item was set!');
$('#newdepID').focus();
}
});
Please anybody can help me I have been faced Placeholder related issue in my project.It's work in Mozilla,Chrome,safari..etc.But it's not work in IE.Advanced thanks.
Description :
<form class="">
<input type="text" value="Email" id="inviteEmail"/>
<input type="text" value="Password" id="invitePassword">
</form>
var defaultTextEmail = '&{"Email"}';
var defaultTextPassword = '&{"general.password"}';
$(document).ready(function() {
$('#inviteEmail').bind('focus', function() {
$('#inviteEmail').val(defaultTextEmail);
var currentValue = $.trim($(this).val());
if(currentValue == 'Email') $(this).val('');
});
$('#inviteEmail').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') $(this).val('Email');
});
$('#invitePassword').bind('focus', function() {
$('#invitePassword').val(defaultTextPassword);
var currentValue = $.trim($(this).val());
if(currentValue == 'Password') {
$(this).val('');
$(this).prop('type', 'password');
}
});
$('#invitePassword').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') {
$(this).val('Password');
$(this).attr('type', 'text');
}
});
});
Now it's show proper hint messages in text boxes on all browsers rather than IE.I should show hint messages under text boxes but my client requirement is hint messages should show with in text boxes(For better appearance).I tried with 'value' attribute but it show password hint message with dots but not text.Please help me.Advanced thanks.
You can fix that problem via jQuery. Here's a popular fix method:
https://github.com/mathiasbynens/jquery-placeholder
I made a working Fiddle for you HERE
HTML :
<form class="left push-bottom-px10 width-match-parent">
<input type="text" id="email" value="email"/>
<input type="text" id="password" value="password"/>
</form>
JQUERY :
$(document).ready(function() {
$('#email').bind('focus', function() {
var currentValue = $.trim($(this).val());
if(currentValue == 'email') $(this).val('');
});
$('#email').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') $(this).val('email');
});
$('#password').bind('focus', function() {
var currentValue = $.trim($(this).val());
if(currentValue == 'password') {
$(this).val('');
$(this).attr('type', 'password');
}
});
$('#password').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') {
$(this).val('password');
$(this).attr('type', 'text');
}
});
});
EDIT
Because of IE security on change type property, this way doesn't work... You can do a fakepassword to hide when user want to enter her password. Like this FIDDLE
HTML :
<form class="left push-bottom-px10 width-match-parent">
<input type="text" id="email" value="email"/>
<input type="text" id="fakepassword" value="password"/>
<input type="password" id="password" value=""/>
</form>
JQUERY :
$(document).ready(function() {
$('#password').hide();
$('#email').bind('focus', function() {
var currentValue = $.trim($(this).val());
if(currentValue == 'email') $(this).val('');
});
$('#email').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') $(this).val('email');
});
$('#fakepassword').bind('focus', function() {
$('#fakepassword').hide();
$('#password').show().focus();
});
$('#password').bind('blur', function() {
var currentValue = $.trim($(this).val());
if(currentValue == '') {
$('#fakepassword').show();
$('#password').hide();
}
});
});