Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with onblur not working

    Hi, im really noob at this and i really need your help. I got this odd text boxes to work as expected, but this onblur event only seems to work after i change the dropdown selection for the first time, after that everything works fine.
    Please try running this HTML:

    Code:
    <html>
    <head>
    <style type="text/css">
    body {font-family: verdana;font-weight:bolder;font-size:8pt;background-color: white; color: #3366CC; background-image:url(imgs/trl.gif); background-position: 62% 55px; background-repeat:no-repeat;}
    input {border: 1px solid #999999;font-size: 12px;}
    .i1 {width: 320px;min-height: 20px;padding-top: 3px; padding-left: 5px;font-size: 11px; z-index:0;}
    .i2 {width: 140px;min-height: 19px;font-size: 9px; z-index:1;}
    .b {font-weight:bolder;}
    .e1 {position:relative;top:-63px;left:0px;z-index:10;font-size:24pt; color:#FF0000; display:none;-moz-user-select: none;-khtml-user-select: none;user-select: none; border:hidden;}
    .x2 {font-size: 9px;}
    .ly1 {display: block;}
    .ly2 {display: none;}
    .htable {position:relative;top:0px;right:0px;z-index:1;}
    </style>
    
    <script lng = "JavaScript" type="text/javascript">
    function showOrHide(value) {
        if (value==0) {
    	document.getElementById('l1').style.display='none';
    	document.getElementById('l2').style.display='block';
    	document.getElementById('l5').style.display='inline';
    	document.getElementById("sln").focus();
        }
        else if ((value==1) && (document.getElementById('sln').value=="")) {
     	document.getElementById('l1').style.display='block';
    	document.getElementById('l2').style.display='none';
    	document.getElementById('l5').style.display='none';
        }
        else if (value==2) {
    	document.getElementById('l5').style.top='-70px';
     	document.getElementById('l3').style.display='none';
    	document.getElementById('l4').style.display='block';
    	document.getElementById("lng").focus();
        }
        else if (value==3) {
    	document.getElementById("l3").innerHTML = ('em '+ SLN);
    	document.getElementById('l5').style.top='-63px'
     	document.getElementById('l3').style.display='block';
    	document.getElementById('l4').style.display='none';
        }
    	return false;
    }
    
    function kct1(event){
    	if(document.getElementById('qs').value!=='')
    	{
    	showOrHide(0);
    	}
    return;
    }
    function kct2(event){
    	showOrHide(2);
    	document.getElementById("lng").focus();
    	return;
    	}
    </script>
    
    </head>
    <BODY marginheight='150px' onload="document.getElementById('qs').focus(); vclear();" style="overflow: hidden;">
    <form onsubmit="return checkform(this);">
    
    
    </td><td width="15%"></td></tr></tbody></table>
    <center>
    <table border="0" width="25%"><tbody>
    <tr><td>Pesquisar</td></tr>
    <tr><td><input class="i1" maxlength="2048" id="qs" onkeydown="if(event.keyCode==9){kct1();return false}"/></td></tr>
    
    <tr><td class="x2">
    <div class="ly1" id="l1" onmousedown="showOrHide(0);" style="max-width:100px">Excluir da Pesquisa</div>
    <div class="ly2" id="l2"><input class="i1" style="color:#FF0000" id='sln' maxlength="2048" onblur="showOrHide(1)" onkeydown="if(event.keyCode==9){kct2();return false}"/></div></td></tr>
    
    <tr><td class="x2"><div class="ly1" id="l3" onmousedown="showOrHide(2);" style="max-width:110px">em português (Brasil)</div>
    
    <div class="ly2" id="l4" onBlur="showOrHide(3);"><select class="i2" id="lng" onChange="SLN=[this.options[this.selectedIndex].text];showOrHide(3);"><option label="africâner" value="af">africâner</option><option value="sq">albanês</option><option value="de" class="b">alemão</option><option value="am">amárico</option><option value="ar">árabe</option><option value="hy">armênio</select></div></td></tr>
    <tr><td><div class="e1" id="l5">-</div></td></tr>
    
    </tbody></table></form>
    
    </center>
    </body>
    </html>
    I need help to fix it so if a user clicks there but dont want to change the dropdown selection it'll disappear back again. I tried alot of things without sucess.

    Also any tips to improve the code will be very appreciated.

    Thanks in advance.
    - bvaroni

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,797
    Thanks
    19
    Thanked 156 Times in 147 Posts
    The code is a mess and badly written. So much so that I won't even waste my time trying to address that. But I think I fixed your problem (it works in Opera). The change was simple, and the code is highlighted in red.

    Code:
    <html>
    <head>
    <style type="text/css">
    body {font-family: verdana;font-weight:bolder;font-size:8pt;background-color: white; color: #3366CC; background-image:url(imgs/trl.gif); background-position: 62% 55px; background-repeat:no-repeat;}
    input {border: 1px solid #999999;font-size: 12px;}
    .i1 {width: 320px;min-height: 20px;padding-top: 3px; padding-left: 5px;font-size: 11px; z-index:0;}
    .i2 {width: 140px;min-height: 19px;font-size: 9px; z-index:1;}
    .b {font-weight:bolder;}
    .e1 {position:relative;top:-63px;left:0px;z-index:10;font-size:24pt; color:#FF0000; display:none;-moz-user-select: none;-khtml-user-select: none;user-select: none; border:hidden;}
    .x2 {font-size: 9px;}
    .ly1 {display: block;}
    .ly2 {display: none;}
    .htable {position:relative;top:0px;right:0px;z-index:1;}
    </style>
    
    <script lng = "JavaScript" type="text/javascript">
    function showOrHide(value) {
        if (value==0) {
    	document.getElementById('l1').style.display='none';
    	document.getElementById('l2').style.display='block';
    	document.getElementById('l5').style.display='inline';
    	document.getElementById("sln").focus();
        }
        else if ((value==1) && (document.getElementById('sln').value=="")) {
     	document.getElementById('l1').style.display='block';
    	document.getElementById('l2').style.display='none';
    	document.getElementById('l5').style.display='none';
        }
        else if (value==2) {
    	document.getElementById('l5').style.top='-70px';
     	document.getElementById('l3').style.display='none';
    	document.getElementById('l4').style.display='block';
    	document.getElementById("lng").focus();
        }
        else if (value==3) {
    	// document.getElementById("l3").innerHTML = ('em '+ SLN);
    	document.getElementById('l5').style.top='-63px'
     	document.getElementById('l3').style.display='block';
    	document.getElementById('l4').style.display='none';
        }
    	return false;
    }
    
    function kct1(event){
    	if(document.getElementById('qs').value!=='')
    	{
    	showOrHide(0);
    	}
    return;
    }
    function kct2(event){
    	showOrHide(2);
    	document.getElementById("lng").focus();
    	return;
    	}
    </script>
    
    </head>
    <BODY marginheight='150px' onload="document.getElementById('qs').focus(); vclear();" style="overflow: hidden;">
    <form onsubmit="return checkform(this);">
    
    
    </td><td width="15%"></td></tr></tbody></table>
    <center>
    <table border="0" width="25%"><tbody>
    <tr><td>Pesquisar</td></tr>
    <tr><td><input class="i1" maxlength="2048" id="qs" onkeydown="if(event.keyCode==9){kct1();return false}"/></td></tr>
    
    <tr><td class="x2">
    <div class="ly1" id="l1" onmousedown="showOrHide(0);" style="max-width:100px">Excluir da Pesquisa</div>
    <div class="ly2" id="l2"><input class="i1" style="color:#FF0000" id='sln' maxlength="2048" onblur="showOrHide(1)" onkeydown="if(event.keyCode==9){kct2();return false}"/></div></td></tr>
    
    <tr><td class="x2"><div class="ly1" id="l3" onmousedown="showOrHide(2);" style="max-width:110px">em português (Brasil)</div>
    
    <div class="ly2" id="l4"><select class="i2" id="lng" onChange="SLN=[this.options[this.selectedIndex].text];" onBlur="showOrHide(3);"><option label="africâner" value="af">africâner</option><option value="sq">albanês</option><option value="de" class="b">alemão</option><option value="am">amárico</option><option value="ar">árabe</option><option value="hy">armênio</select></div></td></tr>
    <tr><td><div class="e1" id="l5">-</div></td></tr>
    
    </tbody></table></form>
    
    </center>
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •