dynamic form showing results as it goes

i have a form where the data person inputs a start and finish mileage -- i want to display the differnece after each one is entered

i am trying to enter it in some existing javascript i already have for validating the info -- code where it validates is below -- simple enough to find the differnece but how do i make it display in my page after is validated i.e. they type 100 for start and 200 for end and it displays 100 (diff) to the right of the text boxes -- note the form build dynamically

  function validateMileage(strIdx){
          var bValid=true
          var milesdriver

          startMileage=document.getElementById('startmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          endMileage=document.getElementById('endmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          regExNumber = new RegExp(/^\d+/)
          if(regExNumber.test(startMileage) && regExNumber.test(endMileage)){
               if((endMileage-startMileage)*1>700 || (endMileage-startMileage)*1<=0){
                    bValid=false;
                    alert('Odometer Readngs amount to more than 700 miles in one day.\n')
                    document.getElementById('startmiles_'+strIdx).focus();
               }
             

          }else{
               alert('Only numeric values are allowed')
               bValid=false;
          }
     return bValid;
     }
tpiazza55Asked:
Who is Participating?
 
mrichmonConnect With a Mentor Commented:
I think the old code would work but obviously I missed the capitalization and innerHtml should have been innerHTML
0
 
mrichmonCommented:
Usually you have a div or a span where you want the data to be displayed  Give it an ID dynamically as well.

<div id="difference_10"></div>

Then do
function updateMileage(strIdx){
document.getElementById('difference_'+strIdx).innerHtml = document.getElementById('endmiles_'+strIdx).value - document.getElementById('startmiles_'+strIdx).value;
}
0
 
tpiazza55Author Commented:

dynamically build another table cell with

 td[5] = document.createElement("TD");
     tempInput = document.createElement("div");
     tempInput.name = "diff_" + rownum;
     tempInput.id = "diff_" + rownum;
 
     td[5].appendChild(tempInput);

added your line of code in my else statement in the validate mileage but the text doesnt appear

html section for the first one is

 <td><input name="startmiles_1"  type="text" size="10"></td>
     <td><input name="endmiles_1"  type="text" onBlur="validateMileage(1)" size="10"></td>
         <Td><div id="diff_1"></div></td>

code in else

function checkAllMileage(objForm){
     var bValid=true;
     var iLoop= document.getElementById('timesheet_table').rows.length-1;
      for (x=1;x<=iLoop && bValid;x++){
         bValid=validateMileage(x);
            
     }
return bValid
}  

     function validateMileage(strIdx){
          var bValid=true
              var milesdriver
          startMileage=document.getElementById('startmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          endMileage=document.getElementById('endmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          regExNumber = new RegExp(/^\d+/)
          if(regExNumber.test(startMileage) && regExNumber.test(endMileage)){
               if((endMileage-startMileage)*1>700 || (endMileage-startMileage)*1<=0){
                    bValid=false;
                    alert('Odometer Readngs amount to more than 700 miles in one day.\n')
                    document.getElementById('startmiles_'+strIdx).focus();
               }
                     else{
                     document.getElementById('diff_'+strIdx).innerHtml = document.getElementById('endmiles_'+strIdx).value - document.getElementById('startmiles_'+strIdx).value;
                     }
          }else{
               alert('Only numeric values are allowed')
               bValid=false;
          }
     return bValid;
     }    
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
mrichmonCommented:
Are you getting any javascript errors?

In firefox you can do Tools-> Javascript Console to see.
0
 
tpiazza55Author Commented:
using ie but no errors
0
 
mrichmonCommented:
You need to look in another browser that shows more detail.
0
 
tpiazza55Author Commented:
the error firefox shows is

Error: document.getElementById("startmiles_" + strIdx) has no properties
0
 
mrichmonCommented:
Okay I see the problem.

You need to define the ID of the inputs - not just the name.  The getElementById looks for the ID  so change this:

<td><input name="startmiles_1"  type="text" size="10"></td>
     <td><input name="endmiles_1"  type="text" onBlur="validateMileage(1)" size="10"></td>

to this:

<td><input name="startmiles_1" id="startmiles_1" type="text" size="10"></td>
     <td><input name="endmiles_1" id="endmiles_1"  type="text" onBlur="validateMileage(1)" size="10"></td>
0
 
tpiazza55Author Commented:
same error even with the id added in
0
 
mrichmonCommented:
try alert(strIndex); and see what you get - that may be wrong.
0
 
tpiazza55Author Commented:
that just errors out
0
 
mrichmonCommented:
whoops I meant

alert(strIdx);
0
 
tpiazza55Author Commented:
missed that also -- all looks the saem after a while

the alert works when i add it into the javascript function -- just need to get it in the html now
0
 
tpiazza55Author Commented:
i changed the function a little -- it displays the difference in the miles for the first case but opens it to another page -- any suggestions on this



     function validateMileage(strIdx){
          var bValid=true
              var milesdriver
          startMileage=document.getElementById('startmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          endMileage=document.getElementById('endmiles_'+strIdx).value.replace(/^\s+|\s+$/g,"");
          regExNumber = new RegExp(/^\d+/)
          if(regExNumber.test(startMileage) && regExNumber.test(endMileage)){
               if((endMileage-startMileage)*1>700 || (endMileage-startMileage)*1<=0){
                    bValid=false;
                    alert('Odometer Readngs amount to more than 700 miles in one day.\n')
                    document.getElementById('startmiles_'+strIdx).focus();
               }
                     else{
                    // document.getElementById('diff_'+strIdx).innerHtml = document.getElementById('endmiles_'+strIdx).value - document.getElementById('startmiles_'+strIdx).value;
                    // alert(endMileage-startMileage);
                      divWrite("diff_1", endMileage-startMileage);
                        
                     }
          }else{
               alert('Only numeric values are allowed')
               bValid=false;
          }
     return bValid;
     }  
      
      
       function simpleFindObj(name, inLayer) {
    return document[name] || (document.all && document.all[name]) || (document.getElementById && document.getElementById(name)) || (document.layers && inLayer && document.layers[inLayer].document[name]);
}
 
       function divWrite(div, input){
    var div_x = simpleFindObj(div);
    input = input;
    if (div_x && div_x.innerHTML) {
        div_x.innerHTML = input;
     }else if (div_x && div_x.document) {
        div_x.document.writeln(input);
        div_x.document.close();
    }
}

0
 
tpiazza55Author Commented:
missed that also -- works like a champ thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.