Javascript to get information dropdown lists and apply condition

Question

I need to know how I can get information selected in a dropdown list when I press submit and then get the information displayed in a table within the same page.

I have created the dropdown list:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Please let me know how to display if for instance I select Volvo to be displayed within a td:

<table>
<tr>
<td></td>
</tr>
</table>

Thanks

Read [this answer](http://stackoverflow.com/a/1085810/603003) for a start. — ComFreek, Sep 25 '13 at 20:38
How familiar are you with [DOM manipulation](https://developer.mozilla.org/en-US/docs/DOM)? And, what of that have you tried? Stack Overflow isn't really the right place to ask for a complete solution. If you're wondering how to get started, we can offer some suggestions. Or, if you can share an attempt you've made, we can try to assist with that. — Jonathan Lonowski, Sep 25 '13 at 20:39
@ComFreek I have read those but how can I then get the data to display in a td? Thanks — Sam, Sep 25 '13 at 20:40
@Tommy Reference the td cell (e.g. by calling getElementById()), then set its *innerHTML* property. This is the easiest way. — ComFreek, Sep 25 '13 at 20:40
@ComFreek thanks I'll google that, not familiar with Javascript just trying to create a personal organiser to organise my projects. — Sam, Sep 25 '13 at 20:42
How does this use php? This is all JavaScript DOM manipulation. — bren, Sep 25 '13 at 20:43
@Vulpus was thinking of using PHP if I couldnt do it with Javascript — Sam, Sep 25 '13 at 20:45
@Tommy Your site runs on the client side. PHP runs on your server, therefore you can't do anything "live"/"dynamic" on your site using PHP (not involving AJAX or the like). You would have to do a site reload in order to fill in the values using PHP. — ComFreek, Sep 25 '13 at 20:45
@ComFreek that's an *extremely* limited view of what "live"/"dynamic" means — , Sep 25 '13 at 20:47
@Dagon I just wanted to express it simple enough for understanding it as a beginner. (I added *(Not involving AJAX)*, the comment should be correct, now.) — ComFreek, Sep 25 '13 at 20:52
@Tommy PHP is server-side which means that all computation happens on the server while JavaScript is client-side. That means that all commutation happens on the visitor's computer — bren, Sep 25 '13 at 20:52
@Dagon I would have just used HTML but I will need certain things to appear depending on what has been selected for this. So your advice is void! — Sam, Sep 25 '13 at 20:53
nothing in the question said, with out a page reload, psychic i am not — , Sep 25 '13 at 20:58

score 1 · Accepted Answer · answered Sep 25 '13 at 20:55

Give your elements a unique ID attribute and it is very easy to do this:

Working jsFiddle example

HTML:

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<table id="myTable">
    <tr id="tr-1">
        <td id="td-1"></td>
    </tr>
</table>
<input id="mybutt" type="button" value="Click Me">

Javascript:

document.getElementById('mybutt').onclick = function() {
    var selcar = document.getElementById('mySelect').value;
    //alert(selcar);
    document.getElementById('td-1').innerHTML = selcar;
};

Javascript to get information dropdown lists and apply condition

1 Answers1