SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    uses-friendly fieldsets

    Hi,

    The code in question...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>test</title>
    		<script type="text/javascript">
    		
    		function toggle(element) {
    			if (document.clicked) {
    				document.clicked.style.borderStyle = '1px dashed red';
    			}
    			document.clicked = element;
    			element.style.borderStyle = '1px solid black';
    			
    		}
    
    		</script>
    				
    		<style type="text/css">		
    		fieldset {
    			border: 1px dashed red;
    		}
    
    		legend {
    			background-color: #FFFFFF;
    		}	
    		</style>
    		
    		
    	</head>
    	<body>
    		<h1>test</h1>
    		<form id='form1'>
    			<fieldset onclick="toggle(this)">
    				<legend>test1</legend>
    				testtext1
    			</fieldset>
    		</form>
    		<form id='form2'>
    			<fieldset onclick="toggle(this)">
    				<legend>test2</legend>
    				testtext2
    			</fieldset>
    		</form>
    	</body>
    </html>
    What i want to achieve here, is the following:

    When someone clicks on a fieldset (which normally has border: 1px dashed red), i want that particular fieldset's borderstyle to be changed from dashed to solid and from red to black.
    When someone then clicks on another fieldset (not the same one) i want the first fieldset to regain its previous border properties (meaning 1px dashed red) and i want the last clicked fieldset have its borderstyle changed from dashed to solid and red to black.... and so on...
    Ofcourse when someone clicks twice or more on the same fieldset i want nothing to happen after the first time clicked..

    I hope i've been clear enough

    Thanks in advance...
    deleeuw.

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>test</title>
    <script type="text/javascript">
    function toggle(){
    var fieldset=document.getElementsByTagName('fieldset');
    for(var i=0;i<fieldset.length;i++){
    fieldset[i].className='';
    fieldset[i].onclick=function(){
    toggle();
    this.className='on'}
    }
    }
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    </style>
    </head>
    <body>
    <h1>test</h1>
    <form id='form1'>
    <fieldset>
    <legend>test1</legend>
    testtext1
    </fieldset>
    </form>
    <form id='form2'>
    <fieldset>
    <legend>test2</legend>
    testtext2
    </fieldset>
    </form>
    <form id='form3'>
    <fieldset>
    <legend>test2</legend>
    testtext2
    </fieldset>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, that seems to work fine , thanks man!

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, me again

    I can't seem to get this script working with getElementsByClassName instead of getElementsByTagName..
    I want to seperate the text fields from all the other input fields (like buttons and such..).

    And i have another question to go with this... is it hard to make the script react also on a non-select action? If i just selected an input text field and then "unselect" it by clicking somewhere else, NOT in an inputfield...?

    Could someone help me out with this?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>
    			test
    		</title>
    		<script type="text/javascript">
    			
    			function input_toggle(){
    			var input=document.getElementsByClassName(document, "*", "inputform");
    			for(var i=0;i<input.length;i++){
    			input[i].className='inputform';
    			input[i].onclick=function(){
    			input_toggle();
    			this.className='inputform_active'}
    			}
    			}
    			window.onload=input_toggle
    			
    		</script>
    		
    		<style type="text/css">
    		
    		.inputform {
    			background-color: #CCCCCC;
    		}
    		
    		.inputform_active {
    			background-color: #FFFFFF;
    		}
    					
    		</style>
    
    </head>
    <body>
    	<form>
    		<fieldset>
    			<legend>
    				test1
    			</legend>
    			<input name="a" type="text" class="inputform" />
    			<input name="b" type="button" class="btns" value="Test1" />
    			testtext1
    		</fieldset>
    	</form>
    	<form>
    		<fieldset>
    			<legend>
    				test2
    			</legend>
    			<input name="c" type="text" class="inputform" />
    			<input name="d" type="button" class="btns" value="Test2" />
    			testtext2
    		</fieldset>
    	</form>
    </body>
    </html>

  5. #5
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?

    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].parentNode.className='';
    inp[i].onfocus=function(){
    toggle();
    this.parentNode.className='on'}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <input name="a" type="text" class="inputform" />
    <input name="b" type="button" class="btns" value="Test1" />
    testtext1
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <input name="c" type="text" class="inputform" />
    <input name="d" type="button" class="btns" value="Test2" />
    testtext2
    </fieldset>
    </form>

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    almost .. i edited a little bit.. but only 1 more mallfunction. when the input fueld changes to red.. it stays red when i click the other input field, but it not supposed to turn back to gray..

    check this out..

    thanks again for your help so far !

    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].className='';
    inp[i].onfocus=function(){
    toggle();
    this.className='on'}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    input{
    background-color:#CCCCCC;}
    input.on{
    background-color:#00FF00;}
    legend{background:#fff;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <input name="a" type="text" class="inputform" />
    <input name="b" type="button" class="btns" value="Test1" />
    testtext1
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <input name="c" type="text" class="inputform" />
    <input name="d" type="button" class="btns" value="Test2" />
    testtext2
    </fieldset>
    </form>

  7. #7
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could change just style in previous
    Code:
    fieldset,fieldset.off{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    fieldset .inputform,fieldset.off .inputform{background:#ccc;}
    fieldset.on .inputform{background:#0f0;}
    and replace
    Code:
    inp[i].parentNode.className='';
    with
    Code:
    inp[i].parentNode.className='off';

    I hope I understand you well, so whole code

    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].parentNode.className='off';
    inp[i].onfocus=function(){
    toggle();
    this.parentNode.className='on'}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset,fieldset.off{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    fieldset .inputform,fieldset.off .inputform{background:#ccc;}
    fieldset.on .inputform{background:#0f0;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <input name="a" type="text" class="inputform" />
    <input name="b" type="button" class="btns" value="Test1" />
    testtext1
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <input name="c" type="text" class="inputform" />
    <input name="d" type="button" class="btns" value="Test2" />
    testtext2
    </fieldset>
    </form>

  8. #8
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jup thats it man thanks a lot for your patience ! and your knowledge ofcourse

  9. #9
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, im going to bother you one last time

    the last script you posted made the focus react on all the inputfields within the fieldset... i also wanna seperate those.

    i edited your script a little bit again to make things more clear for you.

    the situation:
    i wraped div around the inputfields as you see, but i dont want them to do anything.

    the inputfields now precicely react as i want them to react...

    but i want this situation, except without the divs wraped around the inputfields... so the inputfields alone has to be enough... no other html required.

    then i also would like to have the border of the fieldset changed on focus, like in your previous example..


    so to make things short... a user will know when hes working in a certain fieldset, PLUS the user will also know when in what inputfield (and what fieldset) hes working if he clicks on a certain inputfield.

    the code:
    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].parentNode.className='off';
    inp[i].onfocus=function(){
    toggle();
    this.parentNode.className='on'}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset,fieldset.off{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    div .inputform,div.off .inputform{background:#ccc;}
    div.on .inputform{background:#fff;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="b" type="button" class="btns" value="Test1" /></div>
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <div><input name="c" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="d" type="button" class="btns" value="Test2" /></div>
    </fieldset>
    </form>
    Last edited by deleeuw; Feb 3, 2007 at 20:03.

  10. #10
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see
    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].parentNode.parentNode.className='off';
    inp[i].parentNode.className='off';
    inp[i].onfocus=function(){
    toggle();
    this.parentNode.parentNode.className='on';
    this.parentNode.className='on';}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset,fieldset.off{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    fieldset .inputform,fieldset.off .off .inputform{background:#ccc;}
    fieldset.on .on .inputform{background:#fff;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="b" type="button" class="btns" value="Test1" /></div>
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <div><input name="c" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="d" type="button" class="btns" value="Test2" /></div>
    </fieldset>
    </form>

  11. #11
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    coo

    ok so final code..

    again thanks a lot man!

    Code:
    <script type="text/javascript">
    function toggle(){
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].className=='inputform'){
    inp[i].parentNode.parentNode.className='off';
    inp[i].parentNode.className='off';
    inp[i].onfocus=function(){
    toggle();
    this.parentNode.parentNode.className='on'
    this.parentNode.className='on'}
    inp[i].onblur=function(){
    toggle();
    }}}}
    window.onload=toggle
    </script>
    <style type="text/css">
    fieldset,fieldset.off{border:1px dashed red;}
    fieldset.on{border:1px solid black}
    legend{background:#fff;}
    div .inputform,div.off .inputform{background:#ccc;}
    div.on .inputform{background:#fff;}
    </style>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>
    test1
    </legend>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="b" type="button" class="btns" value="Test1" /></div>
    </fieldset>
    </form>
    <form>
    <fieldset>
    <legend>
    test2
    </legend>
    <div><input name="c" type="text" class="inputform" /></div>
    <div><input name="a" type="text" class="inputform" /></div>
    <div><input name="d" type="button" class="btns" value="Test2" /></div>
    </fieldset>
    </form>


Bookmarks

Posting Permissions

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