www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript and Input Fields

  1. #1
    Join Date
    Jun 2013
    Posts
    2

    Javascript and Input Fields

    For starters, the screen capture I am going to reference is at http://pcsspanish.com/image.jpg. Thanks.

    Sorry, but being a teacher I had to block the names of my students on the screen capture pic. Okay, so, I've got this javascript which puts the desired grade in the field. I use this for quick placement so the teacher doesn't HAVE to type in the grade for each one. This is optimized for the ipad, so I'm trying to give the teacher the ability to avoid typing.

    So here's how it works. You tap the '100' button and a 100 appears in the field for that student, and so on. I have two problems, and both of them are major as far as I'm concerned:

    Problem 1: When I tap a grade button, the grade appears in the field, however, the cursor 'focuses' on that field also, which pulls up the keyboard. I absolutely cannot have that! After putting in the grade, I need the field to lose focus.

    Problem 2: As you may be able to tell. I assigned the grade 100 for the first student, a 90 for the second, an 80, then a 70, a 60, a 50 and a 0. But look at the 3rd student and the 6th student. For the third student, I first assigned an 80, and then I went back and re-assigned it as a 50. As you can see, the 50 split the numbers '8' and '0' to make '8500'. For the 6th student I assigned a 50. I then went back and tapped a 90. Once again the 90 split the '5' and the 0' to make '5900'. What I need is for the javascript to clear any current contents of the field before putting in the new value.

    I have to solve both of these or else the concept is no good for me. Please help.

    - James

    Javascript Function:
    Code:
    <script type="text/javascript">
    
    function insertAtCursor(fieldID, insertValue)
    {
      var fieldObj = document.getElementById(fieldID);
    
      if (document.selection)
      { //IE support
        fieldObj.focus();
        document.selection.createRange().text = insertValue;
      }
      else if (fieldObj.selectionStart || fieldObj.selectionStart=='0')
      { //MOZILLA/NETSCAPE support
        endPos = fieldObj.selectionStart+1;
        fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue
                       + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length);
        fieldObj.selectionStart = endPos
        fieldObj.selectionEnd = endPos
        fieldObj.focus();
      }
      else
      {
        fieldObj.value += insertValue;
      }
    }
    
    </script>
    Button Code: (please forgive this is done in PHP so that I can increment the field id variable). The code works. I just need my two problems solved. THANK YOU.
    Code:
    	print "<img src=\"resources/assign_100.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '100');\">\n";
    	print "<img src=\"resources/assign_90.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '90');\">\n";
    	print "<img src=\"resources/assign_80.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '80');\">\n";
    	print "<img src=\"resources/assign_70.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '70');\">\n";
    	print "<img src=\"resources/assign_60.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '60');\">\n";
    	print "<img src=\"resources/assign_50.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '50');\">\n";
    	print "<img src=\"resources/assign_0.jpg\" style=\"margin-left: 10px;\" onclick=\"insertAtCursor('helio".$count."', '0');\">\n\n";

  2. #2
    Join Date
    Jun 2013
    Posts
    2
    I should probably add that I am VERY new to javascript and can mostly just grab other people's scripts and make modifications to suit my own needs. Thank you for your understanding.

  3. #3
    Join Date
    Nov 2007
    Posts
    425
    Instead if "inserting at cursor" you just want to update the entire value (in the field where the cursor happens to be).

    If so, you can use this:
    Code:
    function insertAtCursor(fieldID, insertValue)
    {
      var fieldObj = document.getElementById(fieldID);
    
      if (document.selection)
      { //IE support
        fieldObj.text = insertValue;
      }
      else 
      { //MOZILLA/NETSCAPE support
        fieldObj.value = insertValue;
      }
    }
    I'm not sure about the IE part... you may not need that at all.
    [object].value should work for everything,.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles