Web Analytics Made Easy -
StatCounter Change the order of javascript events - CodingForum


No announcement yet.

Change the order of javascript events

  • Filter
  • Time
  • Show
Clear All
new posts

  • Change the order of javascript events

    I'm using this script to allow people to populate form fields just by hitting the words from a list that most appeal to them. The idea is that on clicking a word the field is filled in and then "focus" is moved to the next one.

    I say "focus" because it's not actual focus, but "virtual focus" held in a js variable.

    <script type="text/javascript">
    	function chk(n){
    	function insert(str){
    <input type="text" class="taginput" name="tag1" onclick="chk(1)" />
    <input type="text" class="taginput" name="tag2" onclick="chk(2)" />
    <input type="text" class="taginput" name="tag3" onclick="chk(3)" />
    <a onclick="v++" href="javascript:insert('word 1');">word 1</a>
    <a onclick="v++" href="javascript:insert('word 2');">word 2</a>
    <a onclick="v++" href="javascript:insert('word 3');">word 3</a>
    <a onclick="v++" href="javascript:insert('word 4');">word 4</a>
    The problem, as I'm sure any eagle eyed coder will instantly recognise, is that v is being incremented before the string is inserted. While I can fix this by starting v at 0 instead of 1 to ensure the first field is filled in first, it does cause major problems if someone wants to go back and insert a different word for a field they filled in already. Eg, they'll click on field 2, and then try to insert a word but v will become 3 and it ends up in the wrong field. = nightmare!

    How can I make sure v is incremented after the string has been inserted?

    Even better, is there a method that uses actual focus to insert the strings, and will move a real visible cursor forwards one field after inserting a word (which would be a far more logical interface).

  • #2
    simply use different statements, separated by ;, in a single event handler.

    <a href="#" onclick="insert('word 1');v++;return false">word 1</a>

    I am not sure If I understood the whole picture, though I sense that it can be done much simpler.... i did not understand your entire and final aim...
    Offshore programming


    • #3
      Thanks Kor.

      The final aim, let me try and simplify that...

      There are three textfields that users use to 'tag' a website they are bookmarking (my application is very similar to del.icio.us, if you know that).

      Because many of the tags are reused for each site you bookmark, it's easiest to have a list of already used tags that can be clicked on to quickly fill the textfields.

      The code above accomplishes this, you can just hit three different tags and each one will be entered into a different textfield - there's no typing, or having to position the cursor in the textfields, it all happens automatically.

      Do you think this could be accomplished in a more efficient way than the one I'm using?