?
Solved

dynamic form showing results as it goes

Posted on 2005-05-13
15
Medium Priority
?
140 Views
Last Modified: 2013-12-24
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;
     }
0
Comment
Question by:tpiazza55
  • 8
  • 7
15 Comments
 
LVL 35

Expert Comment

by:mrichmon
ID: 13997274
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
 

Author Comment

by:tpiazza55
ID: 13998500

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
 
LVL 35

Expert Comment

by:mrichmon
ID: 13998526
Are you getting any javascript errors?

In firefox you can do Tools-> Javascript Console to see.
0
Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

 

Author Comment

by:tpiazza55
ID: 13998993
using ie but no errors
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 13999162
You need to look in another browser that shows more detail.
0
 

Author Comment

by:tpiazza55
ID: 14010850
the error firefox shows is

Error: document.getElementById("startmiles_" + strIdx) has no properties
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 14011032
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
 

Author Comment

by:tpiazza55
ID: 14011687
same error even with the id added in
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 14011809
try alert(strIndex); and see what you get - that may be wrong.
0
 

Author Comment

by:tpiazza55
ID: 14012005
that just errors out
0
 
LVL 35

Expert Comment

by:mrichmon
ID: 14012137
whoops I meant

alert(strIdx);
0
 

Author Comment

by:tpiazza55
ID: 14018607
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
 

Author Comment

by:tpiazza55
ID: 14019285
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
 
LVL 35

Accepted Solution

by:
mrichmon earned 400 total points
ID: 14019841
I think the old code would work but obviously I missed the capitalization and innerHtml should have been innerHTML
0
 

Author Comment

by:tpiazza55
ID: 14020341
missed that also -- works like a champ thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question