Placeholder related issue in IE - html

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();
}
});
});

Related

Input[type=number] without multiple decimals

I would like to make an input[type=number] which disallows multiple decimals and all non-numbers including the letter e. The trouble is, regex that work for input[type=text] don't work for input[type=number].
When I log to console the value of a number input with multiple decimals, the value is empty.
Here is Codepen :
https://codepen.io/btn-ninja/pen/oNxRoJN?editors=1111
HTML
<input type="number"
class="isDecimal"
placeholder="Type 2.3.4 and watch console"
maxlength="20">
JS
$('.isDecimal').on("input", function(e) {
var num = $(this).val().toString();
console.log(num);
});
let lastValidInputValue;
let selectedDot = false;
const onKeypress = (e) => {
if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault();
selectedDot = false;
if (e.key === "e") e.preventDefault();
};
const onInput = (e) => {
if (
e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 &&
e.target.value.indexOf(".") !== -1
) {
let newValue;
newValue = e.target.value.slice(
0,
e.target.value.indexOf(".") +
parseInt(e.target.getAttribute("data-toFixed")) +
1
);
newValue = parseFloat(newValue);
e.target.value = newValue;
}
if (e.target.value !== "") {
lastValidInputValue = e.target.value;
} else if (e.inputType.match(/delete/g)) {
lastValidInputValue = "";
} else {
e.target.value = lastValidInputValue;
}
};
const onSelect = (e) => {
if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true;
}
<input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">
this original posted in this question

How to make if I press the 'x' button, it will uncheck all that part and close it?

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>

Placeholder doesn't show

Guys I've read everything here about that topic already, but I still can't figure out why my Placeholder is not showing up. Hope you can share your expertise and tell what I'm doing wrong.
<input type="text" name="search" class="input-block-level search-query" placeholder="Enter your name" required="">
It's just not showing up in any browser. Thanks is advance!
You can try use this code to your placeholder show on this input.
$(document).ready(function() {
function add() {if($(this).val() == ''){$(this).val($(this).attr('placeholder')).addClass('placeholder');}}
function remove() {if($(this).val() == $(this).attr('placeholder')){$(this).val('').removeClass('placeholder');}}
if (!('placeholder' in $('<input>')[0])) {
$('input[placeholder]').blur(add).focus(remove).each(add);
$('div').submit(function(){$(this).find('input[placeholder]').each(remove);});
}
});
<div>
<input type="text" name="search" class="input-block-level search-query" placeholder="Enter your name" required>
</div>
I found this link which will give us a good idea about how we fix placeholder problem it will use jquery and it will be a good solution.
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And here is the full jquery code
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder'); }
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

How to check if the value is present in the array of inputs

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();
}
});

Disable multiple Textboxes When i click a checkbox in HTML

<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>