CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BGray
BGray

Reputation: 11

HTML form - need user to be able to choose an option from a dropdown list and then also enter a number into another field?

I'm looking for some HTML code for the following:

A form where a user chooses an option from a menu and also enters a number into another field. Then, depending on their chosen option, I need to perform a calculation that shows up on the screen. For example:

This is what the form would look like...

What type of person are you? -Dropdown list gives options(A, B, C) How old are you? -User enter a number in this field (user_age) Calculate button

When calculate button is clicked: If user chose option A, show "user_age" divided by 20. If user chose option B, show "aser_age" divided by 10. If user chose option C, show "user_age" divided by 5.

So, a user would chose option A, enter "80" into the age field, and when they click "calculate", the number "4" would appear on the screen. Can anyone help me with this? It seems straight forward. Here is what I have so far!

<select id="Type" name="Type">
<option selected="selected" value="None">None</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
What is your age?   <input id="Age" type="number" />
<input id="Age" type="button" value="Calculate" />

Upvotes: 0

Views: 76

Answers (2)

clearshot66
clearshot66

Reputation: 2302

Build your HTML syntax

<html>
  <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#calculate').click(function(){
          var dropdown = $('#dropdown').val();
          var age      = $('#age').val();
          var output;
          if(dropdown == 'A'){
            output = age/20;
          }
          if(dropdown == 'B'){
            output = age/10;
          }
          if(dropdown == 'C'){
            output = age/5;
          }
          $('#outputlabel').text(output);
        });   
      });
    </script>
    </head>
          <body>
            <form name='ageform' action=''>
              <label>Age:</label><input type="text" id="age" size ='2'/>
              <label>Option:</label>
              <select id='dropdown'>
                <option value='A'>A</option>
                <option value='B'>B</option>
                <option value='C'>C</option>
              </select>
              <input type='button' id='calculate' value='calculate' />
              <label id='outputlabel'></label>
            </form>
          </body>
        </html>

Test fiddle: https://jsfiddle.net/u06s92pc/2/

Upvotes: 1

mayersdesign
mayersdesign

Reputation: 5310

jQuery to the rescue:

var useThisLater = $('#selectId').find(":selected").text();

Upvotes: 0

Related Questions