1

I have created a drop down list with names of books. When a book name is selected from the drop down, I would like it to display information about the book in the same page. The book information is stored in a mysql database. I am currently able to display information for all books, but I would like to be able to sort through the information on a php page.

I attempted to implement the answer found here, but nothing happened.

<select id="selected" name="selection" onchange="getselected(this)">
<option value="default">Select</option>
<option value="book1">Book Name 1</option>
<option value="book2">Book Name 2</option>
<option value="book3">Book Name 3</option>
<option value="book4">Book Name 4</option>
</select>

My script is:

<script>
function getselected(sel) {
var bookname = sel.value;  
}
</script>

To start, how do I display the selected book name on the page? For example, if Book Name 1 was selected from the drop down, a single line of text will appear displaying Book Name 1. I attempted to write the book name with this script.

<script type="text/javascript">document.write(bookname);</script>

Eventually I would like to use the variable bookname to select the information the mysql database. There are multiple entries with the same book name. SELECT * WHERE name = $bookname

Community
  • 1
  • 1
mac
  • 15
  • 5
  • 1
    Where did you want to show that information? And what does it have to do with [tag:php]? – David Thomas Aug 28 '14 at 14:25
  • I have the html within a php page. I'm using the php to interface with mysql. I'm trying to get the variable of the selected name in the drop down to display the book name on the page and use the variable of the selected name to pull information from the mysql database and display it on the php page. – mac Aug 28 '14 at 14:30
  • 1
    Google "populate dropdown menu from database mysql" you will find many results, where many will point you back to Q&A's here on Stack. – Funk Forty Niner Aug 28 '14 at 14:32
  • I don't need it to populate the dropdown menu itself. The dropdown can be static. When a selection is made from the drop down, the information displayed under the dropdown (not in) will be dynamic. – mac Aug 28 '14 at 14:35
  • 1
    You are probably after [ajax](http://api.jquery.com/jquery.ajax/) –  Aug 28 '14 at 14:45

1 Answers1

0

Add the following HTML to your page

<div id="dynamic"></div>

change your script to the following

<script>
function getselected(sel) { 
document.getElementById("dynamic").innerHTML = sel.options[sel.selectedIndex].text; 
}
</script>

Hope this helps!

bobbyg603
  • 3,536
  • 2
  • 19
  • 30
  • This works beautifully! Now the name of the selected book in the dropdown is displayed where I have the div. How do I make
    into a php variable that I can use with mysql?     – mac Aug 28 '14 at 15:15
  • Oh, I see what you're getting at. Don't change
    rather you would want to use AJAX to send the value of the book name to the server. Then, depending on what the value was you'd want to set dynamics innerHTML to whatever HTML the server returns for the specific book. To do this you would need to modify your script to make an AJAX request for the HTML that is relevant to your book. If this has helped you, please accept my answer. Thanks!     – bobbyg603 Aug 28 '14 at 15:39
  • Thanks bobbyg. This exactly what I need. The code that I will be using can be found here: [link](http://www.w3schools.com/php/php_ajax_database.asp) – mac Aug 28 '14 at 16:45