How to re-print values from combobox selection

Discussion in 'Javascript' started by Mtek, May 5, 2008.

  1. Mtek

    Mtek Guest

    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.
     
    Mtek, May 5, 2008
    #1
    1. Advertising

  2. Mtek

    Ugo Guest

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


    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>
     
    Ugo, May 5, 2008
    #2
    1. Advertising

  3. Mtek

    Mtek Guest

    On May 5, 11:10 am, Ugo <> wrote:
    > [cut]
    >
    > > But, once a selection is made, how do
    > > I print the values to the page?

    >
    > 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>


    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.
     
    Mtek, May 5, 2008
    #3
  4. Mtek

    Ugo Guest

    > 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.


    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,


    typically used for that

    > so I'm going to avoid that. Any ideas? Can
    > innerHTML help me here?


    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...
     
    Ugo, May 5, 2008
    #4
  5. Mtek

    Mtek Guest

    On May 5, 11:30 am, Ugo <> wrote:
    > > 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.

    >
    > 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,

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

    >
    > 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...


    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
     
    Mtek, May 5, 2008
    #5
  6. Mtek

    Ugo Guest

    [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......


    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...
     
    Ugo, May 5, 2008
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Simon Niederberger
    Replies:
    2
    Views:
    16,819
    Christian Kaufhold
    Jan 7, 2005
  2. keto
    Replies:
    0
    Views:
    1,056
  3. David Cournapeau

    print a vs print '%s' % a vs print '%f' a

    David Cournapeau, Dec 30, 2008, in forum: Python
    Replies:
    0
    Views:
    411
    David Cournapeau
    Dec 30, 2008
  4. MRAB
    Replies:
    0
    Views:
    905
  5. Replies:
    5
    Views:
    510
    Roedy Green
    Oct 11, 2012
Loading...

Share This Page