Javascript selected value to display on form

Question

I am stuck with my select option part of my form.

What I am trying to do is display a user's selection adding its value and displaying it on the form.
I would like to update by the onclick method.

Here is the code that I have this far:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
 function calculateCost()
                    {
                        var event_Total = 0;
                        var myForm = document.forms["aaffaForm"];
                        var sel = document.getElement ('enter code here`ntByTagName("options").length;
                        var aaffa = sel.options [sel.selectedIndex].value;


                            if (sel.checked == '')
                            {
                                alert ('you must');
                            }
                                else
                                    for (i=0; i<= aaffa.length[i];){
                                    event_Total += aaffa;
                                    return event_Total;
                                    document.getElementById("aaffa_Total").innerHTML = eventTotal;
                                    }}
                                    </script>
                </head>
                <body>
                <form id='aaffaForm'>
                    <select name="girlsEvent" multiple="multiple" class="girlsEvent" id="aaffaEvents" title="AA Flag Football" onclick="calculateCost()">
                        <option value="000" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong></option>
                        <option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option>

                        <option value="$135.00" name="Early Girl's Flag Football Registration"id="aaffaEvents2">Early Girl's Flag Football Registration</option>

                        <option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option>

                        <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

                        <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

                        <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>

                    </select>

                    <button onclick="myFunction()" >Try It</button>
          </form>

        </body>
   </html>

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — PhilDulac, May 17 '16 at 04:07

score 0 · Accepted Answer · answered May 17 '16 at 04:33

Here you go. I've attached the click event using javascript addEventLinstener to the select element. Explanation in comments.

function getSelectValues(sel) {
  var result = []; //result object to store key value pair
  var options = sel && sel.options; //get all the options
  var opt;
  for (var i=0, iLen=options.length; i<iLen; i++) { //iterate through each option
    opt = options[i]; //store the reference
    if (opt.selected) { //check if the option is selected 
      result.push({"key":opt.value,"val":opt.text});
      //store value and text into result object as key value pair
    }
  }
  return result; //return it
}

document.getElementById("aaffaEvents").addEventListener("click", function(){
      var sel = this; //this refers to select element here
      var opts=getSelectValues(sel); //this gets all the selected option from above function
      var html="";//to construct html
      total=0;//store total
      //loop through each options
      opts.forEach(function(currentValue){
        //currentValue param will have key and value pair
        html+="<div><span>Name = "+currentValue.val+"</span><span> Value = "+currentValue.key+"</span></div>" 
        //construct html, change it as per your need
        total+=parseFloat(currentValue.key.split("$")[1]);
        //calculate total and convert to parseFloat
      })
      html+='<div style="font-weight:bold"> Total = $'+total+'</div>';
      document.getElementById("result").innerHTML = html;
      //append html to body, change it as per your requirement
});

  <form id='aaffaForm'>
    <select name="girlsEvent" multiple="multiple" class="girlsEvent" id="aaffaEvents" title="AA Flag Football">
      <option value="$45.00" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong>
      </option>
      <option value="$45.00" name="All American Flag Football Memebership" id="aaffa1">All American Memebership</option>

      <option value="$135.00" name="Early Girl's Flag Football Registration" id="aaffaEvents2">Early Girl's Flag Football Registration</option>

      <option value="$150.00" name="Girl's Flag Football Registration">All American Memebership</option>

      <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

      <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

      <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>

    </select>

    <button onclick="myFunction()">Try It</button>
  </form>
<div id="result"></div>

I want to say thank you again that really helped. I guess that I was missing the addeventlistner and storing the select value. I have another question that can wait until I add more to my form. — HammerTime, May 17 '16 at 14:02
Sure.. You can add it in SO with proper details.. Happy Coding.. :) — Guruprasad J Rao, May 17 '16 at 14:08

Cesar Jr Rodriguez · Answer 2 · 2016-05-17T15:06:39.367

Use of jQuery can ease and improve code. You should try to learn it. See how easy can you make your needs:

Js Script

<script type="text/javascript">
         $(document).ready(function(){
            var tryit = $('.tryit');
            var afa = $('#aaffa_Total');
            var select = $('#aaffaEvents');

            tryit.click(function(){
                var value = select.val();
                afa.append(value);
             });
         });

   </script>

Html

   <body>
     <form id='aaffaForm'>
        <select name="girlsEvent" multiple="multiple class="girlsEvent"  id="aaffaEvents" title="AA Flag Football">
                    <option value="000" name="Select AAFFA Events" selected="selected" id="aaffaEvents0"><strong><strong>AAFFA Events</strong></strong></option>
                    <option value="$45.00" name="All American Flag Football Memebership" onchange="addTotal" id="aaffa1">All American Memebership</option>

                    <option value="$135.00" name="Early Girl's Flag Football Registration"id="aaffaEvents2">Early Girl's Flag Football Registration</option>

                    <option value="$150.00" name="Girl's Flag Football Registration" >All American Memebership</option>

                    <option value="$35.00" name="Early Mini Camp Registration Girls">Early Mini Camp Registration</option>

                    <option value="$40.00" name="Mini Camp Registration Girls">Mini Camp Registration</option>

                    <option value="$90.00" name="3 Mini Camp Special Registration Girls">3 Mini Camp Special Registration</option>

                </select>

      </form>

      <button class="tryit" >Try It</button>

      <div id="aaffa_Total">Selected:  </div> 
</body>

Javascript selected value to display on form

2 Answers2