Question

I have a form with a select field and a div i wish to update with a value depending on what the user selects.

Example:

<select name='mysel' id='msel'>     <option value='test1'>Test1</option>     <option value='test2'>Test2</option>     <option value='test3'>Test3</option> </select>  <div id='myresult'></div> 

I would like the div to update with ‘This is test 2 and other info’ if the user selects test2 and so on.

Any help on this would be greatly appreciated.

Answer 1

Try something like that :

<select id='choose'>     <option value='test1'>Test1</option>     <option value='test2'>Test2</option>     <option value='test3'>Test3</option> </select> <div id='update'></div>  <script type='text/javascript'>     $('#choose').change(function(event) {         $('#update').html('This is ' + $('#choose').val() + ' and other info');     });  </script> 

---

If you want to make it with AJAX, change the javascript function to something like that:

<script type='text/javascript'>     $('#choose').change(function(event) {         $.post('info.php', { selected: $('#choose').val() },             function(data) {                 $('#update').html(data);             }         );                 }); </script> 

And in your info.php, you’ll have something like:

<?php      $selected = isset($_POST['selected']) ? $_POST['selected'] : 'nothing';     echo('This is $selected and other info');