PDA

View Full Version : Isolate script to only 1 input field



wyclef
Feb 21st, 2010, 09:46 PM
can someone help me isolate this input script to 1 designated input field? it just removes any pre-existing value in the field but does so to all input text types now.



// Home Page Search Box Input Clear
function initInputs () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++ ){
if(inputs[i].type == "text" ) {
inputs[i].valueHtml = inputs[i].value;
inputs[i].onfocus = function (){
this.value = "";
}
inputs[i].onblur = function (){
this.value != ""? this.value = this.value: this.value = this.valueHtml;
}
}
}
}

if (window.addEventListener){
window.addEventListener("load", initInputs, false);
}
else if (window.attachEvent){
window.attachEvent("onload", initInputs);
}

Philip M
Feb 22nd, 2010, 09:21 AM
Is this what you mean?


<input type="text" name="email" size="40" maxlength="40" value="Enter your email address" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="this.value=this.value.replace(/^\s+|\s+$/g,''); if(this.value=='') this.value=this.defaultValue;" />


Or have I not understood you properly?

wyclef
Feb 22nd, 2010, 04:32 PM
yea basically except i'd like to leave the script relatively the same and target a specific input with a class or id...

Philip M
Feb 22nd, 2010, 05:19 PM
yea basically except i'd like to leave the script relatively the same and target a specific input with a class or id...

Why? What is the point if only one field is involved?

wyclef
Feb 22nd, 2010, 06:01 PM
good point. let me try that line of code out and see...

wyclef
Feb 22nd, 2010, 11:58 PM
that worked great. thx! i have another somewhat related JS question. I've got a header include file, and all my main scripts in 1 file, except the following script only pertains to one page, and then is triggering an error on all the other pages.... how can i set it to not do this, and still have it in the master include file... i get the following error... Error: document.getElementByID("set-a" + a) is null..

because those IDs no longer exist on the page....



// Home Page Image Caption Slide
$(document).ready(function(){
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160});
});
});

// Home Page Random Image
function display() {
var a = Math.round(Math.random())+1;
var b = Math.round(Math.random())+1;
var c = Math.round(Math.random())+1;
document.getElementById('set-a'+a).style.display='block';
document.getElementById('set-b'+b).style.display='block';
document.getElementById('set-c'+c).style.display='block';
}
if (window.addEventListener){
window.addEventListener("load", display, false);
}
else if (window.attachEvent){
window.attachEvent("onload", display);
}

VIPStephan
Feb 23rd, 2010, 12:36 AM
Always check if elements, objects, methods, plugins exist. That’s one of the first rules of unobtrusive JavaScript (http://onlinetools.org/articles/unobtrusivejavascript/chapter1.html).

You could do:

function display() {
var a = Math.round(Math.random())+1;
var b = Math.round(Math.random())+1;
var c = Math.round(Math.random())+1;
if (document.getElementById('set-a'+a)) {
document.getElementById('set-a'+a).style.display='block';
}
if (document.getElementById('set-b'+b)) {
document.getElementById('set-b'+b).style.display='block';
}
if (document.getElementById('set-c'+c)) {
document.getElementById('set-c'+c).style.display='block';
}
}

There’s probably a shorter way to write it but before we execute something we check if it’s actually existing.

wyclef
Feb 23rd, 2010, 12:52 AM
thanks!