How to re-print values from combobox selection

M

Mtek

Hi,

We have a combo box on our page, which gets populated via a MySQL
Query in PHP.

What we want to do is to print the values on the page in a table that
correspond the to selection from the combo box without a page refresh.

I assume that I'll need to query ALL the needed values from the
database and store them in an array This can be done in PHP. Drawing
the combo box is not a problem. But, once a selection is made, how do
I print the values to the page?

I'm assuming an 'on change' events needs to be attached to the box,
but, it is not a form, so, there would not be any submit to the
server. How do we print the values from the selection made? Would it
have to be javascript rather than PHP, or a function that is called?

The HTML table is within a DIV. Someone suggested using innerHTML.
But I cannot see how to re-display the entire DIV, with new values
from the combobox selection, without refreshing the page......this
seems impossible.

John.
 
U

Ugo

[cut]
But, once a selection is made, how do
I print the values to the page?
Click to expand...

I'm not sure to understand your request, howover I write 2 code rows that
could be a start code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
{
document.forms[0].b.onclick = function()
{
var form = this.form;
form.t.value = '';
for( var i = 0, max = form.s.options.length; i < max; ++i )
if( form.s.options.selected )
form.t.value += form.s.options.text + '\n';
}
}
</script>
</head>

<body>
<form>
<select name="s" multiple="multiple" size="4">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
<option>opt4</option>
<option>opt5</option>
<option>opt6</option>
</select>

<textarea name="t" rows="4" cols="10"></textarea>
<br />
<input type="button" name="b" value="write" />
</form>
</body>
</html>
 
M

Mtek

[cut]
But, once a selection is made, how do
I print the values to the page?
Click to expand...

I'm not sure to understand your request, howover I write 2 code rows that
could be a start code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function()
{
document.forms[0].b.onclick = function()
{
var form = this.form;
form.t.value = '';
for( var i = 0, max = form.s.options.length; i < max; ++i )
if( form.s.options.selected )
form.t.value += form.s.options.text + '\n';
}}

</script>
</head>

<body>
<form>
<select name="s" multiple="multiple" size="4">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
<option>opt4</option>
<option>opt5</option>
<option>opt6</option>
</select>

<textarea name="t" rows="4" cols="10"></textarea>
<br />
<input type="button" name="b" value="write" />
</form>
</body>
</html>
Click to expand...


Well, we have a large DIV in the middle of the page, which gets it's
values from a PHP select to a MySQL Database,

<? PHP CODE ?>
<combo box>
<div id="innertable>
..
..
..
like 20 lines of code
</div>

Basically, when the value in the combo box changes, I want to refresh
the DIV with the corresponding values from the database. They do not
want to refresh the page.

So, I figure that somehow I can use some external page to query the
new data and refresh the DIV......

Never used AJAX, so I'm going to avoid that. Any ideas? Can
innerHTML help me here?

Thanks!

John.
 
U

Ugo

Well, we have a large DIV in the middle of the page, which gets it's
values from a PHP select to a MySQL Database,

<? PHP CODE ?>
<combo box>
<div id="innertable>
.
.
.
like 20 lines of code
</div>

Basically, when the value in the combo box changes, I want to refresh
the DIV with the corresponding values from the database. They do not
want to refresh the page.
Click to expand...

ah ok,
I didn't understan before
So, I figure that somehow I can use some external page to query the
new data and refresh the DIV......

Never used AJAX,
Click to expand...

typically used for that
so I'm going to avoid that. Any ideas? Can
innerHTML help me here?
Click to expand...

One idea, for avoiding ajax, can be:
to preload every "div" correspondent with every option of the select and to
insert hidden, after on onchange of the select you put visible the
corresponden

this solution works bad if there are a lot of the options and/or the text
correspondent is too much...
 
M

Mtek

ah ok,
I didn't understan before



typically used for that


One idea, for avoiding ajax, can be:
to preload every "div" correspondent with every option of the select and to
insert hidden, after on onchange of the select you put visible the
corresponden

this solution works bad if there are a lot of the options and/or the text
correspondent is too much...
Click to expand...

I've read that you can include some PHP script as the new innerHTML,
or something like that. So, I'm trying to find an example where the
value selected from the combobox is passed to this simple PHP script,
which grabs the data from the database, and the DIV is
refreshed........

I've seen some simple examples where one line of text is changed, but
I'm talking about many lines. This is the content of my DIV now:

echo " <div class='innerb'>";
echo " <table class='tabletwo'>";
$select = mysql_query("SELECT row_id, name, address,
city, state, guests, seating, comments
FROM reservations
WHERE res_date =
STR_TO_DATE('$pdate','%m/%d/%Y')
ORDER BY row_id");
$x=0;
while ($row = mysql_fetch_array($select)) {
$x++;
echo " <tr>";
echo " <td class='td1' scope='row'>$x</td>";
echo " <td class='td2'>".$row['name']."</
td>";
echo " <td class='td3'>$address</td>";
echo " <td class='td4'>$city</td>";
echo " <td class='td5'>$state</td>";
echo " <td class='td6'>".$row['guests']."
Guests<br>".$row['seating']." in Section A <br>".$row['comments']."</
td>";
echo " </tr>";
}
echo " </table>";
echo "</div>";

So, the user selected the date ($pdate) from the combobox, it is used
to query the database, and the DIV is refreshed. I know this can be
done, but it is just a matter of finding the code or something
similar......

Thanks,

John
 
U

Ugo

[cut]
So, the user selected the date ($pdate) from the combobox, it is used
to query the database, and the DIV is refreshed. I know this can be
done, but it is just a matter of finding the code or something
similar......
Click to expand...

listen me, there are 3 way:
- or you preload all the contents, hide them and show at the event
- or you make a HTTP request to server (with "ajax")
- or you replace the DIV with a IFRAME

I don't understand other ways...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add the value taken from the user to my range for ActiveX ComboBox 0
Javascript and the combobox printing issue 1
How to fetch database row and display in Qlabels with QcomboBox selected value in PyQt5 8
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to fetch and console.log all items from an associative array 3
How to display input options only after selecting an option from the 'select class' tag JS? 6
How to push data from one HTML page to another 4
How to print prefix and suffix without giving a String as an argument between them 2

Members online

No members online now.
Total: 284 (members: 1, guests: 283)
Robots: 106

Forum statistics

Threads
473,954
Messages
2,570,116
Members
46,704
Latest member
BernadineF

Latest Threads

Top