SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 89
  1. #51
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    wait, doesn't that set the property of previousFocus to form? And not get / retrieve it?
    Take a look at jQuery's .prop() documentation page and you'll see that it has two forms of syntax.

    prop(propertyName) gets the value of a property for the first element in the set of matched elements
    and
    prop(propertyName, value) set one or more properties for the set of matched elements

    Quote Originally Posted by team1504 View Post
    okay. that makes sense. var form = this.form set the variable form to the form that the #tab button is a part of.
    And then form.previousFocus returns the element with said property within the variable form, which is the form, right?
    Nearly but not quite. form.previousFocus accesses the form property called previousFocus. That property might not exist if it hasn't previously been set, but if it does exist it will contain a reference to the most recently accessed form control.

    Quote Originally Posted by team1504 View Post
    wow, thats simple and logical! I spend a long time looking into a getName() function ...
    I like to keep it simple, because simple is hard to break.

    Quote Originally Posted by team1504 View Post
    Do one of those look right?
    Yep, the first one looks right. Alert the name of previousFocus, and you should find that after you've clicked on a form field, the tab button should alert the name of that field. Get that working first, and that confirms that the blur event and the tab button event are working properly.

    After making sure that this part of things is working as it should, we'll take the next step from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #52
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Alert the name of previousFocus, and you should find that after you've clicked on a form field, the tab button should alert the name of that field.
    ahhh, thats just alert(previousFocus.name); , right?

    I'll try it out and get back to you.

  3. #53
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I made up a quick form to try it in and it doesn't seem to be working...

    Do you have any ideas why? (Sorry, but the code is really messy)

    Code HTML4Strict:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>tab button js</title>
    		<style type="text/css">
    		input, textarea, select{
    	margin:5px 0;
    	padding:5px;
    	background:#f5f5f5;
    	border:1px solid #d9d9d9;
    	border-top:1px solid #c0c0c0;
    	color:#000; /*Makes text black after user has typed it in. 
    	In other words, when there is text in the input-field. This 
    	makes it easier to read on the grey background after done typing */
    	font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    	font-weight:bold;
    	border-radius:5px;
    	line-height:normal;
    }   
    input:hover, textarea:hover, select:hover{
    	background:#fff;
    	border:1px solid #b9b9b9;
    	border-top:1px solid #a0a0a0;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    	font-weight:bold;
    }
    input:focus, textarea:focus{
    	background:#fff;
    	border:1px solid #4d90fe;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#333;
    	font-weight:normal;
    	outline:none;
    }
    select:focus{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    }
    #tab{
    	height:35px;
    	width:100px;
    	border:1px solid #3079ed;
    	background:#4d90f3;
    	border-radius:3px;
    	box-shadow:none;
    	color:#fff;
    	cursor:pointer;
    	text-shadow:0 1px rgba(0,0,0,0.1);
    }
    #tab:hover{
    	background:#357ae8;
    	border:1px solid #2f5bb7;
    	box-shadow:none;
    	text-shadow:0 1px rgba(0,0,0,0.3);
    }
    #tab:active{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    }
    label{
    	font-size:20px;
    	font-weight:500;
    }
    		</style>
    		<script type="text/javascript">
    		$(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
        }
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            alert(previousFocus.name);
        }
    });
    		</script>
    	</head>
    	<body>
                <legend align="center">Form</legend>
                <form  method="post" action="" id="sampleForm">
     
    			<label for=name accesskey=U class="verticallyCentredInput"><span class="required">&#x2a;</span> Your Name: </label>
                <input name="name" type="text" id="name" size="28" autocomplete="off" />
     
    			<br />
                <label for=email accesskey=E class="verticallyCentredInput"><span class="required">&#x2a;</span> Email: </label>
                <input name="email" type="text" id="email" size="28" autocomplete="off"  />
     
    			<br />
     
                <label for=subject accesskey=S id="subjectLabel"><span class="required">&#x2a;</span> Subject: </label>
                <select name="subject" type="text" id="subject">
                	<option value="commt">Comments</option>
                	<option value="concr">Concerns</option>
                	<option value="bugs">Report a bug (issue)</option>
                	<option value="sales">Sales</option>
                	<option value="suppt">Support</option>
                </select>
     
    			<br />
                <label for=comments accesskey=C><span class="required">&#x2a;</span> Your Comments: </label>
                <textarea name="comments" cols="27" rows="3" id="comments"></textarea>
                <hr />
     
                <div id="tab">Tab</div>
     
                </form>
            </body>
    </html>

  4. #54
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    I made up a quick form to try it in and it doesn't seem to be working...

    Do you have any ideas why?
    First of all, the jQuery library has forgotten to be loaded.

    Secondly, some of the event methods are missing some of their syntax. Remove the function from the event and that should help you to find where some of the faults are.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #55
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    whoops, sorry for forgetting the jQuery library.
    I added it:
    Code:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>tab button js</title>
    		<style type="text/css">
    		input, textarea, select{
    	margin:5px 0;
    	padding:5px;
    	background:#f5f5f5;
    	border:1px solid #d9d9d9;
    	border-top:1px solid #c0c0c0;
    	color:#000; /*Makes text black after user has typed it in. 
    	In other words, when there is text in the input-field. This 
    	makes it easier to read on the grey background after done typing */
    	font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    	font-weight:bold;
    	border-radius:5px;
    	line-height:normal;
    }   
    input:hover, textarea:hover, select:hover{
    	background:#fff;
    	border:1px solid #b9b9b9;
    	border-top:1px solid #a0a0a0;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    	font-weight:bold;
    }
    input:focus, textarea:focus{
    	background:#fff;
    	border:1px solid #4d90fe;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#333;
    	font-weight:normal;
    	outline:none;
    }
    select:focus{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    }
    #tab{
    	height:35px;
    	width:100px;
    	border:1px solid #3079ed;
    	background:#4d90f3;
    	border-radius:3px;
    	box-shadow:none;
    	color:#fff;
    	cursor:pointer;
    	text-shadow:0 1px rgba(0,0,0,0.1);
    }
    #tab:hover{
    	background:#357ae8;
    	border:1px solid #2f5bb7;
    	box-shadow:none;
    	text-shadow:0 1px rgba(0,0,0,0.3);
    }
    #tab:active{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    }
    label{
    	font-size:20px;
    	font-weight:500;
    }
    		</style>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
        }
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            alert(previousFocus.name);
        }
    });
    		</script>
    	</head>
    	<body>
                <legend align="center">Form</legend>
                <form  method="post" action="" id="sampleForm">
    
    			<label for=name accesskey=U class="verticallyCentredInput"><span class="required">&#x2a;</span> Your Name: </label>
                <input name="name" type="text" id="name" size="28" autocomplete="off" />
    
    			<br />
                <label for=email accesskey=E class="verticallyCentredInput"><span class="required">&#x2a;</span> Email: </label>
                <input name="email" type="text" id="email" size="28" autocomplete="off"  />
    
    			<br />
              
                <label for=subject accesskey=S id="subjectLabel"><span class="required">&#x2a;</span> Subject: </label>
                <select name="subject" type="text" id="subject">
                	<option value="commt">Comments</option>
                	<option value="concr">Concerns</option>
                	<option value="bugs">Report a bug (issue)</option>
                	<option value="sales">Sales</option>
                	<option value="suppt">Support</option>
                </select>
    
    			<br />
                <label for=comments accesskey=C><span class="required">&#x2a;</span> Your Comments: </label>
                <textarea name="comments" cols="27" rows="3" id="comments"></textarea>
                <hr />
                
                <div id="tab">Tab</div>
    
                </form>
            </body>
        </html>

    Wait, what is missing in the script itself. I copied it straight from post 50. The first one, which you said was good. Thats why I've been asking if the script is good at the end of my posts after adding something— to make sure i didn't forget anything.

  6. #56
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Wait, what is missing in the script itself. I copied it straight from post 50. The first one, which you said was good.
    The content within the function of that post was good, but there's a subtle something missing outside of the function. Can you spot it?

    Hint: temporarily removing the function will help you to spot what is incomplete.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #57
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I didn't close the .click() function properly!

    I added the );, here it is jsut for proof , but it still doesn't seem to be doing anything and chrome dev tools is giving me a JS error.
    Code HTML4Strict:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>tab button js</title>
    		<style type="text/css">
    		input, textarea, select{
    	margin:5px 0;
    	padding:5px;
    	background:#f5f5f5;
    	border:1px solid #d9d9d9;
    	border-top:1px solid #c0c0c0;
    	color:#000; /*Makes text black after user has typed it in. 
    	In other words, when there is text in the input-field. This 
    	makes it easier to read on the grey background after done typing */
    	font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    	font-weight:bold;
    	border-radius:5px;
    	line-height:normal;
    }   
    input:hover, textarea:hover, select:hover{
    	background:#fff;
    	border:1px solid #b9b9b9;
    	border-top:1px solid #a0a0a0;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    	font-weight:bold;
    }
    input:focus, textarea:focus{
    	background:#fff;
    	border:1px solid #4d90fe;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#333;
    	font-weight:normal;
    	outline:none;
    }
    select:focus{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    }
    #tab{
    	height:35px;
    	width:100px;
    	border:1px solid #3079ed;
    	background:#4d90f3;
    	border-radius:3px;
    	box-shadow:none;
    	color:#fff;
    	cursor:pointer;
    	text-shadow:0 1px rgba(0,0,0,0.1);
    }
    #tab:hover{
    	background:#357ae8;
    	border:1px solid #2f5bb7;
    	box-shadow:none;
    	text-shadow:0 1px rgba(0,0,0,0.3);
    }
    #tab:active{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    }
    label{
    	font-size:20px;
    	font-weight:500;
    }
    		</style>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function () {
            $(this.form).prop('previousFocus', this);
        }
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            alert(previousFocus.name);
        });
    });
    		</script>
    	</head>
    	<body>
                <legend align="center">Form</legend>
                <form  method="post" action="" id="sampleForm">
     
    			<label for=name accesskey=U class="verticallyCentredInput"><span class="required">&#x2a;</span> Your Name: </label>
                <input name="name" type="text" id="name" size="28" autocomplete="off" />
     
    			<br />
                <label for=email accesskey=E class="verticallyCentredInput"><span class="required">&#x2a;</span> Email: </label>
                <input name="email" type="text" id="email" size="28" autocomplete="off"  />
     
    			<br />
     
                <label for=subject accesskey=S id="subjectLabel"><span class="required">&#x2a;</span> Subject: </label>
                <select name="subject" type="text" id="subject">
                	<option value="commt">Comments</option>
                	<option value="concr">Concerns</option>
                	<option value="bugs">Report a bug (issue)</option>
                	<option value="sales">Sales</option>
                	<option value="suppt">Support</option>
                </select>
     
    			<br />
                <label for=comments accesskey=C><span class="required">&#x2a;</span> Your Comments: </label>
                <textarea name="comments" cols="27" rows="3" id="comments"></textarea>
                <hr />
     
                <div id="tab">Tab</div>
     
                </form>
            </body>
        </html>

  8. #58
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    I didn't close the .click() function properly!

    I added the );, here it is jsut for proof , but it still doesn't seem to be doing anything and chrome dev tools is giving me a JS error.
    This is how it is with development. There may-well be a number of issues, but step by step they are found and decisions are made to deal with them.

    In this case, the JS error is due to a similar issue that you fixed with .click. The .blur event hasn't been properly closed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #59
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wow. I really need to get on top of things

    Okay. I closed everything, but now i am getting 7 error of the same type. I guess it was a good-idea to check it before we moved on

    They are: Uncaught TypeError: Cannot read property 'previousFocus' of undefined

    what is it saying is undefined? 7 times too. It looks like everything is defined properly and closed properly.

    Do you have any idea on what the error means?

  10. #60
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    now i am getting 7 error of the same type. I guess it was a good-idea to check it before we moved on

    They are: Uncaught TypeError: Cannot read property 'previousFocus' of undefined

    what is it saying is undefined?
    That's due to the script expecting a reference to the form with this.form, but it is unable to gain one from a div element.

    It was expected that the tab button would be one of these types of buttons:

    Either:
    HTML Code:
    <input type="button" id="tab" value="Tab">
    Or:
    HTML Code:
    <button id="tab">Tab</button>
    Either of those are considered to be form controls, from which a reference to the form is available.

    A div element which is what you have used, is not a form control, so a reference to the form is not available from that.

    You now have one of two options to pick from:
    1. use an actual form button as in the samples given before, resulting in working scripting code
    2. keep the div for your tab button and add some more scripting to find the form
    Last edited by paul_wilkins; Nov 18, 2011 at 00:38.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #61
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That's due to the script expecting a reference to the form with this.form, but it is unable to gain one from a div element...A div element which is what you have used, is not a form control, so a reference to the form is not available from that.
    Ah okay. That makes sense, I guess i am so use to making divs that I did'nt consider the other possibilities

    Quote Originally Posted by paul_wilkins View Post
    It was expected that the tab button would be one of these types of buttons:

    consiering Either:
    HTML Code:
    <input type="button" id="tab" value="Tab">
    Or:
    HTML Code:
    <button id="tab">Tab</button>
    Either of those are considered to be form controls, from which a reference to the form is available.



    You now have one of two options to pick from:
    1. use an actual form button as in the samples given before, resulting in working scripting code
    2. keep the div for your tab button and add some more scripting to find the form
    I will probably go with one of those and of those the input. Just to make things easier as we have the looping js coming up and i believe <button> were designed for input type="button" /> that needed a line-break inside it; and we don't.

    Okay, I changed it. And now there are no errors and onClock of #tab it alerts, but it alerts undefined. Every time.

    The alert is just this: alert(previousFocus.name); and previousFocus was defined right above it— var form = this.form; previousFocus = form.previousFocus;

    Any ideas? or suggestions?

  12. #62
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Okay, I changed it. And now there are no errors and onClock of #tab it alerts, but it alerts undefined. Every time.

    The alert is just this: alert(previousFocus.name); and previousFocus was defined right above it— var form = this.form; previousFocus = form.previousFocus;

    Any ideas? or suggestions?
    If you haven't clicked on some other form field before hitting the tab button, there won't be any form field that has had a previous focus, so getting undefined in that situation is expected.

    How do things go when you click on a form field and then click on the tab button?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #63
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    If you haven't clicked on some other form field before hitting the tab button, there won't be any form field that has had a previous focus, so getting undefined in that situation is expected.
    Oh Duh (Дa!)*

    Yes, also (Дa!)*! It works— alerts the name of the field that was focused on and then blurs it.

    *Those were russian jokes.
    [OFF TOPIC]
    The American-english phrase "Duh!"— meaning obviously / how stupid of me / no **** !— was invented during the Cold-War to mock the Russian word for yes, which is pronounced "dah". Hence the similarity. In the cyrilic alphabet dah / yes in russian in spelled Дa.
    So I meant it as the phrase Duh and later as yes.
    [/OFF TOPIC]

  14. #64
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Yes, also (Дa!)*! It works— alerts the name of the field that was focused on and then blurs it.
    Okay, lets move on to the loop stuff.

    You can get rid of that alert now, and we can work on the loop part.

    How it will work is that we'll loop through all of the :input elements of the form, and when we get to the one that matches the previousFocus we'll raise a flag called focusNext to say "Look! We found it! Whichever one we come across next is what we want to focus!"

    The loop can then before checking the above stuff, check that flag to see if it's raised, and if it is we know that we want to set the focus on that field, and then stop looping over all the others.

    We can replace that alert with a variable declaration for focusNext

    Code javascript:
    var focusNext = false;

    The form controls that we want to loop through are the ones that match :input in the form, except for the tab button
    $(':input:not(#tab), form')

    In fact, we can make that selector more flexible by excluding the element that triggered this click event (that in this case being the tab button), with:
    $($(':input:not(#' + this.id + ')', form')

    So you can now use the .each() method to loop through those form controls, and inside that function you can check if the this keyword (which inside of the function for the each() method will be each of the form controls) with the previousFocus value. If they match you can set focusNext to true, and then for testing purposes alert that focusNext value.

    Is this too much for this step? Or should we break it down in to smaller steps that are easier to understand and test?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #65
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins
    Is this too much for this step? Or should we break it down in to smaller steps that are easier to understand and test?
    Thank you for caring. I sincerely appreciate it .
    I don't think so. At first it seemed like it, but I read it all first to get a grasp of the final result and then read and tried each part individually.
    I think, or to me it seems that, I did it right. But it, the looping or alerting, is not working...

    Is there supposed to be two "$(", so "$($(" before the trigger of the .each() function?
    Because now my syntax-highlighting is off?

    Could that be the reason why it is not working or is it something I did in the loop with .each()

    Here is just the js so far:

    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            $(this.form).prop('previousFocus', this);
        });
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            var focusNext = false;
            $($(':input:not(#' + this.id + ')', form')).each(function(){
            	if(this.prop() = 'previousFocus'){
            		focusNext=true;
            		alert(focusNext);
            	}
            });
        });
    });

  16. #66
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Is there supposed to be two "$(", so "$($(" before the trigger of the .each() function?
    Because now my syntax-highlighting is off?
    You're right about not needing the double up there. it's the rogue quote just after the word "form" which is throwing things off.


    Could that be the reason why it is not working or is it something I did in the loop with .each()

    Inside of the function you don't need to get a property from the this keyword. The this keyword is a reference to a form element, and the previousFocus variable contains a reference to a form element, so just a straight comparison between the two is all that's needed.

    Don't put previousFocus in quotes either, because that then turns it in to a string will will have nothing to do with what's stored in the variable of the same name.

    Also, the equals sign doesn't do any comparing, that is an assignment operator instead. Use === to perform comparisons.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #67
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Inside of the function you don't need to get a property from the this keyword. The this keyword is a reference to a form element, and the previousFocus variable contains a reference to a form element, so just a straight comparison between the two is all that's needed.
    okay.

    Quote Originally Posted by paul_wilkins View Post
    Don't put previousFocus in quotes either, because that then turns it in to a string will will have nothing to do with what's stored in the variable of the same name.
    Oh okay. I put in quotse so that before once in got the value of the property of this, it could compare it to the string 'previousFocus', which would have been the value, right?

    Quote Originally Posted by paul_wilkins View Post
    Also, the equals sign doesn't do any comparing, that is an assignment operator instead. Use === to perform comparisons.
    oh whoops. sorry. Quick and off-topic question, whats the difference between == and === in js?

    Hmmm, i got rid of the extra $( and made sure all parts are closed. But the highlighting is still off and its not working and giving an Unexpected token error.
    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            $(this.form).prop('previousFocus', this);
        });
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            var focusNext = false;
            $(':input:not(#' + this.id + ')', form').each(function(){
            	if(this === previousFocus){
            		focusNext=true;
            		alert(focusNext);
            	}
            });
        });
    });

    Quote Originally Posted by paul_wilkins View Post
    You're right about not needing the double up there.
    Code JavaScript:
    ':input:not(#' + this.id + ')', form'.each(function(){
    oh, so no $( at all?But that doesn't make any sense. How can the trigger or the caller of the function not be in the jQuery object $(...) format?

    Quote Originally Posted by paul_wilkins View Post
    it's the rogue quote just after the word "form" which is throwing things off.
    rouge quote?... so should that line be:
    Code JavaScript:
    $(':input:not(#' + this.id + ')', form).each(function(){
    , but then the quotes are not closed...

    Besides that and us finding the illegal token, do the other changes look right?

  18. #68
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Oh okay. I put in quotse so that before once in got the value of the property of this, it could compare it to the string 'previousFocus', which would have been the value, right?
    Earlier when the property was being set, 'previousFocus' was passed to the prop() method to tell jQuery to set that particular property.
    Then in the click method we used assigned form.previousFocus to a variable called previousFocus retrieve the value that had been set. We could have also used the more long-winded $(form).prop('previousFocus') to retrieve the same value.

    Let's get rid of the confusion, and not use prop() at all.

    Instead of this:
    Code:
    $(this.form).prop('previousFocus', this);
    Replace that with this:
    Code javascript:
    this.form.previousFocus = this;

    You should also get rid of that other prop() line that sets things to false.

    Quote Originally Posted by team1504 View Post
    oh whoops. sorry. Quick and off-topic question, whats the difference between == and === in js?
    The === comparison operator checks if two things are equal.
    The == comparison operator checks if each side is truthy or falsie. It's a much looser comparison that allows many bugs and problems to creep through.

    Quote Originally Posted by team1504 View Post
    rouge quote?... so should that line be:
    Code JavaScript:
    $(':input:not(#' + this.id + ')', form).each(function(){
    , but then the quotes are not closed...
    Rouge is French for red. The rogue quote is the one that you removed. What causes you think that the quotes are not closed?

    Quote Originally Posted by team1504 View Post
    Besides that and us finding the illegal token, do the other changes look right?
    Let's try it out and make further progress from there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #69
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Earlier when the property was being set, 'previousFocus' was passed to the prop() method to tell jQuery to set that particular property.
    Then in the click method we used assigned form.previousFocus to a variable called previousFocus retrieve the value that had been set. We could have also used the more long-winded $(form).prop('previousFocus') to retrieve the same value...You should also get rid of that other prop() line that sets things to false.
    Quote Originally Posted by paul_wilkins View Post
    The === comparison operator checks if two things are equal.
    The == comparison operator checks if each side is truthy or falsie. It's a much looser comparison that allows many bugs and problems to creep through.
    okay. thanks for explaining that.

    Quote Originally Posted by paul_wilkins View Post
    Rouge is French for red. The rogue quote is the one that you removed. What causes you think that the quotes are not closed?
    ahh okay. idk why I thought the quotes were not closed. Hmm, I guess i forgot the quotation-mark after the parentheses and before the comma

    Quote Originally Posted by paul_wilkins View Post
    Let's try it out and make further progress from there.
    Okay, not it echo's true once I press the tab-button...
    This sounds correct because that means the if-statement's conditions are met and focusNext is being set to true.

  20. #70
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Okay, not it echo's true once I press the tab-button...
    This sounds correct because that means the if-statement's conditions are met and focusNext is being set to true.
    Good, so now that we have that flag, we can check within the same each method, but before the if statement, if the focusNext variable is true. If it is, it would have been the previous loop through which set it to be true. That's why checking that focusNext is true must be before the if statement that checks the previousFocus. If the focusNext check was after, it would activate too soon.

    So when the focusNext variable is true, you want to set that element to be the newly focused element, which can be done with this.focus()
    After setting the focus you should also set focusNext to false, and you can then return false from the function to tell the loop to not carry on checking any others from there.

    That will work in most situations.

    There are some situations though that need to be fixed after that, such as when the last form field was the active one, or when nothing in the form has been made active. We'll cover those after getting the focus part actually going.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #71
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay, I made the changes and it kind of works!

    But, first, did I put the return and do the things you wrote about in the previous post correctly?

    Code HTML4Strict:
    <!Doctype HTML>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>tab button js</title>
    		<style type="text/css">
    		input, textarea, select{
    	margin:5px 0;
    	padding:5px;
    	background:#f5f5f5;
    	border:1px solid #d9d9d9;
    	border-top:1px solid #c0c0c0;
    	color:#000; /*Makes text black after user has typed it in. 
    	In other words, when there is text in the input-field. This 
    	makes it easier to read on the grey background after done typing */
    	font:1em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
    	font-weight:bold;
    	border-radius:5px;
    	line-height:normal;
    }   
    input:hover, textarea:hover, select:hover{
    	background:#fff;
    	border:1px solid #b9b9b9;
    	border-top:1px solid #a0a0a0;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    	font-weight:bold;
    }
    input:focus, textarea:focus{
    	background:#fff;
    	border:1px solid #4d90fe;
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#333;
    	font-weight:normal;
    	outline:none;
    }
    select:focus{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    	color:#000;
    }
    #tab{
    	height:35px;
    	width:100px;
    	border:1px solid #3079ed;
    	background:#4d90f3;
    	border-radius:3px;
    	box-shadow:none;
    	color:#fff;
    	cursor:pointer;
    	text-shadow:0 1px rgba(0,0,0,0.1);
    }
    #tab:hover{
    	background:#357ae8;
    	border:1px solid #2f5bb7;
    	box-shadow:none;
    	text-shadow:0 1px rgba(0,0,0,0.3);
    }
    #tab:active{
    	box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
    }
    label{
    	font-size:20px;
    	font-weight:500;
    }
    		</style>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            $(this.form).prop('previousFocus', this);
            //this.form.previousFocus = this;
        });
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            var focusNext = false;
            $(':input:not(#' + this.id + ')', form).each(function(){
            	if(focusNext === true){
            		this.focus();
            		focusNext=true;
            	}
            	if(this === previousFocus){
            		focusNext=true;
            		alert(focusNext);
            	}
            	return focusNext;
            });
        });
    });
    		</script>
    	</head>
    	<body>
                <legend align="center">Form</legend>
                <form  method="post" action="" id="sampleForm">
     
    			<label for=name accesskey=U class="verticallyCentredInput"><span class="required">&#x2a;</span> Your Name: </label>
                <input name="name" type="text" id="name" size="28" autocomplete="off" />
     
    			<br />
                <label for=email accesskey=E class="verticallyCentredInput"><span class="required">&#x2a;</span> Email: </label>
                <input name="email" type="text" id="email" size="28" autocomplete="off"  />
     
    			<br />
     
                <label for=subject accesskey=S id="subjectLabel"><span class="required">&#x2a;</span> Subject: </label>
                <select name="subject" type="text" id="subject">
                	<option value="commt">Comments</option>
                	<option value="concr">Concerns</option>
                	<option value="bugs">Report a bug (issue)</option>
                	<option value="sales">Sales</option>
                	<option value="suppt">Support</option>
                </select>
     
    			<br />
                <label for=comments accesskey=C><span class="required">&#x2a;</span> Your Comments: </label>
                <textarea name="comments" cols="27" rows="3" id="comments"></textarea>
                <hr />
     
                <input type="button" id="tab" value="Tab">
     
                </form>
            </body>
        </html>

    By semi-working, 1.) it still alerts the value of focusNext, which I just have to remove.
    But, more importantly, when I manually focus on the first input and then click tab, it alerts true and then moves to the last input, not the email one...

    Also, as you mentioned above, it does nothing if no input is focused on manually or if the last one is focused on, but first what can we do to get the order correct— meaning that once the tab button is clicked, it moves to the next form element (input, select, or textarea) ?

  22. #72
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Okay, I made the changes and it kind of works!

    But, first, did I put the return and do the things you wrote about in the previous post correctly?
    Not quite. You need to set focusNext to false instead of true, which will become useful later on.
    Also, that return statement needs to be moved immediately after setting focusNext to false.
    It also needs to be the value of false that is returned. There is no link between the value of focusNext and the return value, other than they being the same value, so don't provide the false impression that they are related - just return false.

    Quote Originally Posted by team1504 View Post
    By semi-working, 1.) it still alerts the value of focusNext, which I just have to remove.
    [B]But, more importantly, when I manually focus on the first input and then click tab, it alerts true and then moves to the last input, not the email one...
    That last input issue will be sorted out once you get the focusNext value fixed, along with the return statement.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #73
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Not quite. You need to set focusNext to false instead of true, which will become useful later on.
    Also, that return statement needs to be moved immediately after setting focusNext to false.
    oh yeah, you said that. Thats my mistake, obviously, sorry about that.

    Quote Originally Posted by paul_wilkins View Post
    It also needs to be the value of false that is returned. There is no link between the value of focusNext and the return value, other than they being the same value, so don't provide the false impression that they are related - just return false.
    oh okay. I didn't know that, but know I do and I changed it. Just for curiosity sake, is there a reason why one shouldn't return focusNext ? Or, is it just that we are not returning focusNext and that focusNext has nothing to do with the return— just that they share the same value? (as you mentioned, above)


    Quote Originally Posted by paul_wilkins View Post
    That last input issue will be sorted out once you get the focusNext value fixed, along with the return statement.
    hmm i think i fixed those two, but now after I focus on an input and then click the tab-button, the input is just blurred and nothing else— meaning nothing is focused on.

    I hope I didn't make another stupid mistake
    Here is the code, did I do anything wrong ?:

    Code JavaScript:
    $(document).ready(function(){
        $('#sampleForm').prop('previousFocus', false);
        $('#sampleForm :input:not(#tab)').blur(function() {
            $(this.form).prop('previousFocus', this);
        });
        $('#tab').click(function(){
            var form = this.form;
            previousFocus = form.previousFocus;
            var focusNext = false;
            $(':input:not(#' + this.id + ')', form).each(function(){
            	if(focusNext === true){
            		this.focus();
            		focusNext=true;
            	}
            	if(this === previousFocus){
            		focusNext=false;
            		return false;
            		//alert(focusNext);
            	}
     
            });
        });
    });

  24. #74
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by team1504 View Post
    Or, is it just that we are not returning focusNext and that focusNext has nothing to do with the return— just that they share the same value? (as you mentioned, above)
    That's right. The purpose of returning false is to tell the each method to not process any more elements. That is not determined by the focusNext variable, or dependent on it.

    Quote Originally Posted by team1504 View Post
    hmm i think i fixed those two, but now after I focus on an input and then click the tab-button, the input is just blurred and nothing else— meaning nothing is focused on.

    I hope I didn't make another stupid mistake
    Yes indeed. The code in the if statement for when it matches previousNext needs to be in the if statement for when focusNext is found, and the assignment for when focusNext is found needs to be in the previousNxt part.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #75
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes indeed. The code in the if statement for when it matches previousNext needs to be in the if statement for when focusNext is found, and the assignment for when focusNext is found needs to be in the previousNxt part.
    really? I swear thats how it always was, the way I posted the code thus far in pervious posts.

    Anywho, I changed it and now it is doing something— it is focusing on the form that was already manually focused on. Not the next one.

    But that makes sense because i say focus on the thing that had previousFocus in the second if statement, yet you said switch the two suites, or what was inside the statements, wow... I am confused

    Do you understand?


Tags for this Thread

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
  •