Back To Programming / Scripting / Coding Forum

javascript form question

  • Pout
  • Born
  • Born
  • No Avatar
  • Joined: Dec 03, 2003
  • Posts: 2
  • Status: Offline

Post December 3rd, 2003, 3:13 am

Here'z the script i have atm:




Code: [ Select ]
<html>
<HEAD>

<script language="javascript">
<!--

function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}


function validateNum()
{
 

  // digits letters only
  if ( event.srcElement.value.search(/[^0-9]/) != -1 )
  {
   alert("only digits in this field");
   this.focus();
   return false;
  }
 
  return true;
  }
}

var bDone = false;

function getValue(o)
{
  o.value = document.inputform.result.value.substring(document.inputform.result.value.length - o.maxLength);
  document.inputform.result.value = document.inputform.result.value.substring(0,document.inputform.result.value.length - o.maxLength);
}

function back()
{
  if ( bDone ) return;
<!-- fill in the values in reverse order-->
  getValue(document.inputform.field3);
  getValue(document.inputform.field2);
  getValue(document.inputform.field1);
}

function next()
{
  if ( bDone ) return;
 

  if (
   !document.inputform.field1.onchange() ||
   !document.inputform.field2.onchange() ||
   !document.inputform.field3.onchange() ) return;
     

  document.inputform.result.value += document.inputform.field1.value + document.inputform.field2.value + document.inputform.field3.value;
  document.inputform.field1.value = '';
  document.inputform.field2.value = '';
  document.inputform.field3.value = '';
}

function done()
{
  bDone = true;
  document.getElementById('spResult').style.display = '';
}
-->
</script>

</HEAD>
<body>

  <form name=inputform>
   <table>
     <tr>
      <td>Field 1:</td>
      <td><input name=field1 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.field2)"></td>
     </tr>
     <tr>
      <td>Field 2:</td>
      <td><input name=field2 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.field3)"></td>
     </tr>
     <tr>
      <td>Field 3:</td>
      <td><input name=field3 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.nextbutton)"></td>
     </tr>
   </table>
     <input name="previousbutton" type="button" value="Previous" onClick="back();">
     <input name="nextbutton" type="button" value="Next" onClick="next();">
     <input name="donebutton" type="button" value="Done" onClick="done();">
   <span id=spResult style="display:none;"><input type=text name=result></span>
  </form>
</body>

</html>
  1. <html>
  2. <HEAD>
  4. <script language="javascript">
  5. <!--
  7. function autotab(original,destination){
  8. if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
  9. destination.focus()
  10. }
  13. function validateNum()
  14. {
  15.  
  17.   // digits letters only
  18.   if ( event.srcElement.value.search(/[^0-9]/) != -1 )
  19.   {
  20.    alert("only digits in this field");
  21.    this.focus();
  22.    return false;
  23.   }
  24.  
  25.   return true;
  26.   }
  27. }
  29. var bDone = false;
  31. function getValue(o)
  32. {
  33.   o.value = document.inputform.result.value.substring(document.inputform.result.value.length - o.maxLength);
  34.   document.inputform.result.value = document.inputform.result.value.substring(0,document.inputform.result.value.length - o.maxLength);
  35. }
  37. function back()
  38. {
  39.   if ( bDone ) return;
  40. <!-- fill in the values in reverse order-->
  41.   getValue(document.inputform.field3);
  42.   getValue(document.inputform.field2);
  43.   getValue(document.inputform.field1);
  44. }
  46. function next()
  47. {
  48.   if ( bDone ) return;
  49.  
  51.   if (
  52.    !document.inputform.field1.onchange() ||
  53.    !document.inputform.field2.onchange() ||
  54.    !document.inputform.field3.onchange() ) return;
  55.      
  57.   document.inputform.result.value += document.inputform.field1.value + document.inputform.field2.value + document.inputform.field3.value;
  58.   document.inputform.field1.value = '';
  59.   document.inputform.field2.value = '';
  60.   document.inputform.field3.value = '';
  61. }
  63. function done()
  64. {
  65.   bDone = true;
  66.   document.getElementById('spResult').style.display = '';
  67. }
  68. -->
  69. </script>
  71. </HEAD>
  72. <body>
  74.   <form name=inputform>
  75.    <table>
  76.      <tr>
  77.       <td>Field 1:</td>
  78.       <td><input name=field1 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.field2)"></td>
  79.      </tr>
  80.      <tr>
  81.       <td>Field 2:</td>
  82.       <td><input name=field2 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.field3)"></td>
  83.      </tr>
  84.      <tr>
  85.       <td>Field 3:</td>
  86.       <td><input name=field3 type=text maxlength=1 onChange="java script:validateNum();" onKeyUp="autotab(this, document.inputform.nextbutton)"></td>
  87.      </tr>
  88.    </table>
  89.      <input name="previousbutton" type="button" value="Previous" onClick="back();">
  90.      <input name="nextbutton" type="button" value="Next" onClick="next();">
  91.      <input name="donebutton" type="button" value="Done" onClick="done();">
  92.    <span id=spResult style="display:none;"><input type=text name=result></span>
  93.   </form>
  94. </body>
  96. </html>



Now this gives me some problems:

When i filled in all the field correctly and hit the next button, it gives me the 'only digits in this field' alert. I don't know what causes that.

Second, when i click previous, all data inputed is supplied correctly, but let's say, when i click next again after 2 times previous it show all fields empty, if possible they should be filled in with the data (if there is any data that is)

Thirdly, i want to make it possible to override the autotab function when the user uses the Tab-key on the Keyboard so that adjustements can be made.

Hope u can help me on these matters

Thx in advance
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 3rd, 2003, 3:13 am

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post December 3rd, 2003, 3:01 pm

The reason it's giving you the error when you click the next button has to do with the way the validateNum function is extracting the value to check it. When the Next button is clicked it is calling the onchange handler for the text boxes which in turn calls validateNum

It's using event.srcElement.value.search and it's the Next button that is generating the event in this case, so the value being checked is the value of the button which is just the string "Next" and that flunks the test.

I didn't have enough time to look at anyting else, but I'll try to look at it some more later. By the way you have an extra bracket in the validateNum function after return true and there shouldn't be any spaces in the word javascript inside the onchange handlers of the text boxes.
Free Programming Resources
  • neronxeron
  • Born
  • Born
  • No Avatar
  • Joined: Dec 14, 2003
  • Posts: 4
  • Status: Offline

Post December 14th, 2003, 11:54 am

you may want to check if all your function names match....but otherwise, follow RichB's instructions.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 188 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.