CODEWITHSUNDEEP
javascripthtmldrop-down-menusubmit-buttonjquery-selectbox
user3702602
user3702602

Reputation: 139

Select box ID value not retreving in javascript ,html

I have 2 values in select box and i want to get their id depending on which i select on submit button click. I am showing this select box and save button in dialog box.And when i try to select value and save i am getting [object HTMLCollection] instead of their id.So if i select Fahrzeuge i should get id 1 and if i select News i should get id 2.I am making small mistake somewhere in javascript.Here is my jsfiddle: demo. Here is my code: html code

<input type="button" id="butt-rahmen" value="Add Widget" />

<br /><br/>       

<div id="output"></div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
   <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title">Widget</td>
      </tr>

      <tr>
         <td colspan="2" style="padding-left: 15px;">
            <b>Add Widget</b>
         </td>
      </tr>
      <tr>
         <td colspan="2" style="padding-left: 15px;">
             <div id="widgets">
               <select name="widgets" id="widgets" >
                         <option value="1">Fahrzeuge</option> 
                         <option value="2">News</option>
                </select>
             </div>

         </td>
      </tr>
      <tr>
         <td colspan="2" style="text-align: center;">
            <input id="btnSubmit" type="button" value="Save" />
         </td>
      </tr>
   </table>
</div>

Js code:

   $("#butt-rahmen").click(function (e)
      {
         ShowDialog(false);
         e.preventDefault();
      });     

      $("#btnSubmit").click(function (e)
      {
         var brand = $('#widgets select[name="widgets"]').val();
         $("#output").html("<b>Widget: </b>" + widgets);
         HideDialog();
         e.preventDefault();
      });



   function ShowDialog(modal)
   {
      $("#overlay").show();
      $("#dialog").fadeIn(300);     
   }

   function HideDialog()
   {
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   }

Upvotes: 0

Views: 1318

Answers (2)

TribalChief
TribalChief

Reputation: 785

Try changing:

$("#output").html("<b>Widget: </b>" + widgets);

to

$("#output").html("<b>Widget: </b>" + brand);

for widgets isn't defined anywhere.

Upvotes: 1

Hamed Ali Khan
Hamed Ali Khan

Reputation: 1118

Yes it is small mistake in JavaScript, change below line

$("#output").html("<b>Widget: </b>" + widgets);

to 

$("#output").html("<b>Widget: </b>" + brand);

Upvotes: 2

Related Questions