Develop Reference

Enabling a disabled input type image is not working

Dears , i am trying to enable a disabled input type image based on some conditions
i tried several codes with no solution
i am using angular js and jQuery , any idea how to solve this issue
HTML
<td style="width: 46px;">
<a href="#">
<input type="image" ng-click="committeeedit() ;$event.stopPropagation();$event.preventDefault();" src="assets/images/pencil.png" />
</a>
<a href="#">
<input disabled type="image" id="deleteCommitteeBtn" ng-click="deleteCommittee()" ng-src="assets/images/cross.png" />
</a>
</td>
setenabledfields();
function setenabledfields() {
cmePointsSrv.getSecurity("CMEpoints/getSecurity?hospkey=" + $scope.hospitalid).then(function (response) {
$scope.Security = (response.data);
//console.log($scope.Security);
if ($scope.Security[0].code == 1) {
cmePointsSrv.getenabledfields("CMEpoints/getenabledfields?funckey=" + $scope.funckey + '&staffkey=' + $scope.staffkey).then(function (response) {
$scope.enabledfields = (response.data);
$('#frame input,#frame select').attr('disabled', 'true');
$scope.enabledfields.forEach(function (e) {
var tt = document.getElementById(e.ctrl_Actual_name.split('.')[1])
if (tt != null) {
//console.log(tt);
document.getElementById(e.ctrl_Actual_name.split('.')[1]).disabled = false;
}
//else { document.getElementById(e.ctrl_Actual_name.split('.')[1]).disabled = true;}
})
})
} else {
//document.getElementById("deleteMeetingBtn").disabled = true;
//document.getElementById("deleteCompulsoryBtn").disabled = true;
//document.getElementById("deleteTrainingBtn").disabled = true;
//document.getElementById("deleteOtherBtn").disabled = true;
document.getElementById("deleteCommitteeBtn").disabled = false;
//$("#deleteCommitteeBtn").attr('disabled', 'disabled');
//$("#deleteCommitteeBtn").prop("disabled", true);
$("deleteCommitteeBtn").removeAttr('disabled');
//$("#deleteCommitteeBtn")[0].onclick = null;
}
})
}
Cannot set property 'disabled' of null
Thanks in adavnce

$('#deleteCommitteeBtn').prop('disabled', 'false');

Trigger a button click to change divs when a specific string is entered on the text field?

I'm working on a short quiz game, and I cant seem to figure out how/what event listener would be suitable for detecting a specific string on the textbox. Here's what I have so far (which only works if the "else if" part is taken out- without detecting the specific string)
HTML:
<div id="ques1" class="ques">
<img src="img/img1.png" alt="">
<div id="btncontainer" class="btncontainer">
<input id="txtbox" placeholder="Type here"/>
<button id="go1" class="gobttn"><i>NEXT<i></button>
</div>
</div>
<div id="ques2" class="ques">
<img src="img/img2.png" alt="">
</div>
JS:
var s2 = document.getElementById('ques1')
var s3 = document.getElementById('ques2')
var b1 = document.getElementById('landbtn')
var b2 = document.getElementById('go1')
var tbox = document.getElementById('txtbox')
function Quest1To2() {
s2.style.display = 'none';
s3.style.display = 'block';
}
b2.addEventListener('click', Quest1To2)
function TxtErr() {
tbox.style.outline = '0.2em solid red';
}
b2.addEventListener('click', TxtErr)
var a1 = "NEO";
var answer = txtbox.value
if (answer == a1) {
Quest1To2();
}
else if () {
TxtErr();
}

You can use input event to dispatch an event when input occurs at tbox.
tbox.oninput = function(e) {
if (e.target.value == a1) {
Quest1To2();
}
else {
TxtErr();
}
}

Blur function not being called

I have the following code for sharing an article by email
function internalLabelBlur(elm) {
if (!elm.value) {
elm.value = elm.defaultValue;
}
if (elm.value == elm.defaultValue) {
elm.className = elm.className.replace("internal-label-emph", "internal-label");
}
} // function internalLabelBlur(elm)
function internalLabelFocus(elm) {
if (elm.value == elm.defaultValue) {
elm.value = "";
}
elm.className = elm.className.replace("internal-label", "internal-label-emph");
} // function internalLabelFocus(elm)
function z_onclick() {
return false;
}
Markup:
<div id="emailErrEmailAddressArrow" class="errorarrow" style="visibility:hidden;">
<img src="~/Content/Images/error_arrow_signup.png" alt="sign up error arrow">
</div>
<input id="txtEmailAddress" name="txtEmailAddress" class="internal-label inputbox"
onfocus="javascript:internalLabelFocus(this);"
onblur="javascript:internalLabelBlur(this);"
onclick="return z_onclick()" type="text" value="E-mail address*" />
The problem is the onblur function not being called. Can anyone help me as to why?

how can i make placeholder through javascript which run in all browser even ie6

i have already made placeholder for input "value attribute" but the value attribute are using for some other purpose so how can i make for other attributes such as placeholder or any other self-made ..
my code for value attribute work in all browser..so any one suggest me how can i make something like this for placeholder or any other input attribute.
/*For placeholder*/
function ClearPlaceHolder(input) {
//var plc = document.getElementById(input.id).value;
if (input.value == input.defaultValue){
input.value = "";
document.getElementById(input.id).style.color = '#444444';
}
}
function SetPlaceHolder (input) {
if (input.value == "") {
input.value = input.defaultValue;
document.getElementById(input.id).style.color = '#c9c9c9';
}
}

Instead of using event attributes to call existing functions, you can use a function to bind events. Then you can simply send the default value into the function:
function initPlaceHolder(input, defaultValue) {
input.onfocus = function() {
if (input.value == defaultValue){
input.value = "";
input.style.color = '#444444';
}
};
function remove() {
if (input.value == "") {
input.value = defaultValue;
input.style.color = '#c9c9c9';
}
}
input.onblur = remove;
remove();
}
Usage:
<input type="text" id="me" />
<script type="text/javascript">
initPlaceHolder(document.getElementById("me"), "Enter name");
</script>
Demo: http://jsfiddle.net/Guffa/RFm5e/

I guess this can get you started.
Qty1 : <input type="text" placeholder="numbera" name="qty" id="qty"/><br>
Qty2 : <input type="text" placeholder="numberb" name="qty" id="qty2"/><br>
<script type="text/javascript">
$(document).ready(function(){
if($.browser.msie){
var inpElements = $('[placeholder]');
$(inpElements).each(function(){
$(this).css('color','#aaaaaa').val($(this).attr('placeholder'));
});
$('[placeholder]').one('focus', function(){
$(this).val('');
});
}
});
</script>

Input Type: Separating JavaScript Code From Front End Code

The following is code that is within an html file. What is the ideal way to separate the JavaScript code (if (this.value etc etc)) from html file?
input type="text" name="username" onblur="if (this.value == '') {this.value = 'email';}" onfocus="if (this.value == 'email') {this.value = '';}"

<head>
<script type="text/javascript">
function ClearDefValue (input) {
if (input.value == '') {
input.value = input.defaultValue;
}
}
function SetDefValue (input) {
if (input.value == input.defaultValue) {
input.value = '';
}
}
</script>
</head>
<body>
<input type="text" name="username" value="email" onblur="ClearDefValue (this)" onfocus="SetDefValue (this)" />
</body>
If you want to put the JavaScript content into an external file:
HTML file:
<head>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
<input type="text" name="username" value="email" onblur="ClearDefValue (this)" onfocus="SetDefValue (this)" />
</body>
utils.js file:
function ClearDefValue (input) {
if (input.value == '') {
input.value = input.defaultValue;
}
}
function SetDefValue (input) {
if (input.value == input.defaultValue) {
input.value = '';
}
}
Related links:
script element,
onblur event,
onfocus event.

<!doctype html>
<html><head>
<script src="file.js"></script></head><body>
<input id="foo" type="text">
</body></html>
Method #1:
in file.js which you reference in the <head> with a <script>:
window.onload = function() {
var input = document.getElementById('foo');
input.onfocus = function() { if ( this.value == '' ) { this.value = 'blah';} }
input.onblur = function() { if ( this.value == 'blah') { this.value = ''; } }
}
And ideally you'd want to use an addEvent function which supports dom listeners.
Method #2:
The (arguably) more elegant way would be:
var addEvent = (function() {
function addEventIE(el, ev, fn) {
return el.attachEvent('on' + ev, function(e) {
return fn.call(el, e);
});
}
function addEventW3C(el, ev, fn) {
return el.addEventListener(ev, fn, false);
}
return window.addEventListener ? addEventW3C:addEventIE;
})();
addEvent(window, 'load', function() {
var input = document.getElementById('foo');
addEvent(input, 'blur', function(){});
addEvent(input, 'focus', function(){});
});
Method #3:
You can also avoid the whole onload and addEvent nonsense and just put your script before the end body tag if it's a fairly simplistic site.
<script src="file.js"></script>
</body>
file.js:
var input = document.getElementById('foo');
input.onfocus = function() { if ( this.value == '' ) { this.value = 'blah';} }
input.onblur = function() { if ( this.value == 'blah') { this.value = ''; } }