Javascript form data computations

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JLupear
    New Member
    • Sep 2007
    • 9
    #1

    Javascript form data computations

    My friend and I are trying to start a business and are writing a website of our own. We have been trying to create an online estimator and are having trouble with writing the javascript that is to handle the form data. I am having trouble capturing the form data for use using the onsubmit operator. We have written all of the options using list boxes using numbers as the values. I have attempted to create a user defined function to caculate the total and I have tried to use an alert box to give the instant result to the user before submitting the info to us. However, I am not sure that I am using the correct syntax to capture the value of the list boxes. Also, I am not sure that my user defined function is written properly. In fact, I can't even get my function to return an alert box even after inserting a if-else statement with alert boxes as both actions. I have to admit that I am new to Javascript (I learned it this weekend) and this is my 1st real project. I could really use some help here. Also, where can I find out how to write the server-side javascript needed for processing data after the submission. Below I have included a smaller version of the code that I wrote. PLEASE HELP!!!

    [code=html]
    <html>
    <head>
    <title>Online Estimator</title>
    <!--[/code][code=javascript]
    <script language="Javas cript" type="text\java script">
    function formTotal () {
    var ourForm = document.forms[0];
    var aquariumIdx = ourForm.aquariu m.selectedIndex ;
    var aquarium = ourForm.aquariu m.options[aquariumIdx].value;
    var tableIdx = ourForm.table.s electedIndex;
    var table = ourForm.table.o ptions[tableIdx].value;
    var bedIdx = ourForm.bed.sel ectedIndex;
    var bed = ourForm.bed.opt ions[bedIdx].value;
    var couchIdx = ourForm.couch.s electedIndex;
    var couch = ourForm.couch.o ptions[couchIdx].value;
    var chairsIdx = ourForm.chairs. selectedIndex;
    var chairs = ourForm.chairs. options[chairsIdx].value;
    var milesIdx = ourForm.miles.s electedIndex;
    var miles = ourForm.miles.o ptions[milesIdx].value;
    var longWalkIdx = ourForm.longWal k.selectedIndex ;
    var longWalk = ourForm.longWal k.options[longWalkIdx].value;
    var stairflightsIdx = ourForm.stairfl ights.selectedI ndex;
    var stairflights = ourForm.stairfl ights.options[stairflightsIdx].value;
    var preTotal = aquarium + table + bed + couch + chairs + miles;
    var preTotal2 = preTotal * longWalk;
    var Total = preTotal2 * stairflights;
    return = alert (Total)
    }
    </script>[/code][code=html]
    -->
    </head>
    <body>
    <h1><b>Online Esitmator</b></h1>
    <form action = "#" onsubmit = "return formTotal()">


    <b>Aquariums: </b>
    <select name = "aquarium">
    <option value = "0">0</option>
    <option value = "3">1</option>
    <option value = "6">2</option>
    <option value = "9">3</option>
    </select>


    <b>Tables:</b>
    <select name = "table">
    <option value = "0">0</option>
    <option value = "6">1</option>
    <option value = "12">2</option>
    <option value = "18">3</option>
    <option value = "24">4</option>
    </select>


    <b>Beds:</b>
    <select name = "bed">
    <option value = "0">0</option>
    <option value = "10">1</option>
    <option value = "20">2</option>
    <option value = "30">3</option>
    <option value = "40">4</option>
    </select>


    <b>Couches:</b>
    <select name = "couch">
    <option value = "0">0</option>
    <option value = "10">1</option>
    <option value = "20">2</option>
    <option value = "30">3</option>
    <option value = "40">4</option>
    </select>


    <b>Chairs:</b>
    <select name = "chairs">
    <option value = "0">0</option>
    <option value = "3">1</option>
    <option value = "6">2</option>
    <option value = "9">3</option>
    <option value = "12">4</option>
    <option value = "15">5</option>
    </select>


    <b>Miles between Locations:</b>
    <select name = "miles">
    <option value = "5">Under 10</option>
    <option value = "10">10-20</option>
    <option value = "15">20-30</option>
    <option value = "20">30-40</option>
    </select>


    <b>Long Walk:</b>
    <select name = "longWalk">
    <option value = "1">No</option>
    <option value = "1.2">From Only</option>
    <option value = "1.2">To Only</option>
    <option value = "1.4">To and From</option>
    </select>


    <b>Flights of Stairs:</b>
    <select name = "stairfligh ts">
    <option value = "1">None</option>
    <option value = "1.2">1 flight</option>
    <option value = "1.4">2 flights</option>
    <option value = "1.6">3 flights</option>
    <option value = "1.8">4 flights</option>
    <option value = "2.0">5 flights</option>
    <option value = "2.2">6 flights</option>
    </select>



    <input type = "submit" value = "Get Estimate!">


    </form>
    </body>
    </html>
    [/code]
    If anyone can give some insight, it would be greatly appreciated...
    -JOE-
    Last edited by pbmods; Sep 4 '07, 06:09 PM. Reason: Added CODE tags
    Tags: None
    • pbmods
      Recognized Expert Expert
      • Apr 2007
      • 5821
      #2
      Heya, Joe. Welcome to TSDN!

      Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

      Try putting the <!-- --> inside of your script block, and it's "text/javascript", not "text\javascrip t":
      [code=html]
      <script type="text/javascript">
      // <!--
      ...
      // -->
      </script>
      [/code]

      Also, change this line:
      [code=javascript]
      return = alert (Total)
      [/code]

      To this:
      [code=javascript]
      alert(Total);
      return Total;
      [/code]

        Comment

        • phvfl
          Recognized Expert New Member
          • Aug 2007
          • 173
          #3
          Hi Joe,

          Welcom to TSDN...

          Before I start could you please make sure that you use code tags when entering code into posts as it makes it easier to read.

          Secondly good attempt for your first proper code, there are just a few small issues that prevented this form working.

          Firstly the HTML comments that you had used were around the script tag instead of inside it, this is why you couldn't get any alerts to work, using HTML comments to hide javascript from browsers that do not understand javascript is good practice, the syntax is:
          [HTML]
          <script>
          <!--
          javascript
          //-->
          </script>
          [/HTML]
          Another thing is to use a javascript comment before the HTML closing comment. This prevents the closing HTML comment being parsed by the script engine.

          The second issue is that in the type attribute you used a backwards slash instead of a forwards one, this prevented the script tag from being understood as javascript, this would make the declaration:

          [HTML]
          <script type="text/javascript">
          <!--
          javascript
          //-->
          </script>
          [/HTML]
          Now we are onto the script itself. The type of the variable being returned from the selects on the lines like:

          [CODE=javascript]
          var table = ourForm.table.o ptions[tableIdx].value;
          [/CODE]
          is a string. This means that when you were trying to add the values you were concatenating strings instead of adding numbers, this is easy to rectify by multiplying the value by 1 to force it to a number:

          [CODE=javascript]
          var table = ourForm.table.o ptions[tableIdx].value * 1;
          [/CODE]
          Finally, when you are setting the onsubmit to use return the return value should be true or false. Returning true would allow the form to continue and submit, returning false would stop the form from submitting. Place your alert before the return and return a boolean value.

          [CODE=javascript]
          alert("message text");
          return true;
          [/CODE]
          If you are always going to submit the form then don't return a value and set the onsubmit action just to the name of the form and don't use the return keyword in either the onsubmit or the function.

          I think that this should let your code work. If it doesn't post your revised code and I'll look at what you then have.
          Last edited by pbmods; Sep 4 '07, 06:42 PM. Reason: Changed <style> to <script>

            Comment

            • JLupear
              New Member
              • Sep 2007
              • 9
              #4
              I just wanted to thank you guys for the help with this script. Your advice was pure gold. Immediately the code worked after making the changes you suggested. I appreciate the help. I will make sure that my next posted question will have the <tags> you requested (although I will have to figure out what you mean). Thanks again. \


              PS--Javascript is cool!

                Comment

                • phvfl
                  Recognized Expert New Member
                  • Aug 2007
                  • 173
                  #5
                  Originally posted by JLupear
                  I just wanted to thank you guys for the help with this script. Your advice was pure gold. Immediately the code worked after making the changes you suggested. I appreciate the help. I will make sure that my next posted question will have the <tags> you requested (although I will have to figure out what you mean). Thanks again. \


                  PS--Javascript is cool!
                  Javascript is indeed cool. Code tags are explained here
                  Last edited by phvfl; Sep 4 '07, 07:03 PM. Reason: wrong link

                    Comment

                    Previous template Next
                    Working...