PHP: how to update html text element, based on value from select element?

Question

I have an an html form with only <select> element. Below the form I have a text box, I want to update the value of the text box based on the option selected in the form.

I am not sure if this is possible in PHP, I know I can do it with Javascript/Jquery, but I am working on a school project and its a PHP project. My teacher has done it but Im not sure if he used PHP.

Here is my code:

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select name="books">
        <?php
            $books = simplexml_load_file("books.xml");
            foreach($books->book as $book){
                $code = $book->code;
                $title = $book->title;
                echo "<option value='$code'>$code: $title</option>";
            }
        ?>
    </select>
</form>

<?php
    $choice = $_POST['books'];
    echo "<input type='text' value='$choice'>";
?>

When the page first loads I want the value from the selected option to be in the text box. I am not sure how I could go about doing this in PHP. Help would be appreciated.

JavaScript is a far more likely solution! That will probably be what your teacher has used! — Dane Caswell
– Dane Caswell, Commented Sep 15, 2014 at 13:00
As Dane said, JS is solution. Use jQuery if you can. In few lines you'll your thing done. I can give you an example of it if you want. — cwek
– cwek, Commented Sep 15, 2014 at 13:01
If you are struggling to solve this problem, you should speak to your teacher. Copying a solution from SO wont help you learn. — Steve
– Steve, Commented Sep 15, 2014 at 13:17
@Steve Im not copying solutions, I am just asking how i could do this. — user3898380
– user3898380, Commented Sep 15, 2014 at 13:25

Shaunak Shukla · Accepted Answer · 2014-09-15 13:02:51Z

1

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select name="books" onchange="javascript:document.form.submit();">
        <?php
            $books = simplexml_load_file("books.xml");
            foreach($books->book as $book){
                $code = $book->code;
                $title = $book->title;
                echo "<option value='$code'>$code: $title</option>";
            }
        ?>
    </select>
</form>

<?php
    $choice = isset($_POST['books'])?$_POST['books']:'';
    echo "<input type='text' value='$choice'>";
?>

answered Sep 15, 2014 at 13:02

Shaunak Shukla

2,3472 gold badges19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Funk Forty Niner · Accepted Answer · 2014-09-15 14:03:38Z

Edit, as a pure PHP solution with a submit button, which will load data on initial page load then load data with the submit button as per selection.

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select name="books">
        <?php
            $books = simplexml_load_file("books.xml");
            foreach($books->book as $book){
                $code = $book->code;
                $title = $book->title;
                echo "<option value='$code'>$code: $title</option>";
            }
        ?>
    </select>


<input type="submit" value="submit" name="submit">

</form>

<?php 

if(isset($_POST['submit'])){
$choice = isset($_POST['books']) ? $_POST['books'] : $books->book[0]->code;
    echo "<input type='text' value='$choice'>";
}

else{
$choice = isset($_POST['books']) ? $_POST['books'] : $books->book[0]->code;
    echo "<input type='text' value='$choice'>";
}

?>

Original answer with onchange

The following would work, using Javascript and getElementById which would echo the selection in a text box using an onchange function.

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select name="books" onchange="update_textbox()" id="id_books">
        <?php
            $books = simplexml_load_file("books.xml");
            foreach($books->book as $book){
                $code = $book->code;
                $title = $book->title;
                echo "<option value='$code'>$code: $title</option>";
            }
        ?>
    </select>

</form>

<?php 

    $choice = isset($_POST['books']) ? $_POST['books'] : '';
    echo "<input type='text' value='$choice' id='showit'>";

?>

<script>
 function update_textbox(){
  var selectbox = document.getElementById('id_books');
  var id_books = selectbox[selectbox.selectedIndex].text;
  document.getElementById('showit').value=id_books ;
 }
</script>

To load data into the text box at initial page load, use:

Replace:

$choice = isset($_POST['books']) ? $_POST['books'] : '';

with:

$choice = isset($_POST['books']) ? $_POST['books'] : $books->book[0]->code;

Jakub Kotrs · Accepted Answer · 2014-09-15 13:02:44Z

0

When you first load the page, there are no POST data, so you could set $choice to the first book in list:

$choice = isset($_POST['books']) ? $_POST['books'] : $books->book[0]->code;

But you have to udnerstand the difference between PHP and JavaScript in here.

PHP can only change the value, when there is a request on the server as it is a server-side language. If you wish to update the value instantly, without submiting the form, you need to use JavaScript.

answered Sep 15, 2014 at 13:02

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

Comments

Dave · Accepted Answer · 2014-09-15 13:12:08Z

0

if it must be purely PHP, then put a submit button on your form for when a selection is made. This will set the value you are looking for. Others have provided samples on how to do this form submission automatically with javascript, but the end result is the same.

answered Sep 15, 2014 at 13:12

Dave

1,0011 gold badge8 silver badges16 bronze badges

Comments

at0g · Accepted Answer · 2014-09-15 13:32:53Z

0

You can do it with PHP, it looks as though you're just missing the submit button to actually post the selection.

To submit the form without a submit button, you need to use javascript, eg.

<select onchange="this.form.submit()">....</select>

Below is a simple example (static options rather than xml) that also sets the selected option in the select (IMO this is a more practical use than printing it in the text input)

<?php
$val = isset($_REQUEST['books']) ? $_REQUEST['books'] : null;
?>

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <select name="books" onchange="this.form.submit()">
        <option value=>Choose a book</option>
        <option<?php if($val && $val === 'opt 1'){ print ' selected';}?>>opt 1</option>
        <option<?php if($val && $val === 'opt 2'){ print ' selected';}?>>opt 2</option>
    </select>

    <noscript><button type="submit">Submit</button></noscript>
</form>

<?php if($val){ ?>
<input type="text" value="<?php echo $_REQUEST['books']; ?>">
<?php } ?>

This is probably ok just for a school exercise, but in the real world you would probably want to sanitize any user input ($_REQUEST['book'] / $_POST['book']) and use a better templating engine than vanilla PHP (I like Twig) to help separate presentation from functional logic.

answered Sep 15, 2014 at 13:32

at0g

611 silver badge4 bronze badges

1 Comment

user3898380 Over a year ago

Nice. this.form.submit() does it. A submit button would work, but I was curious how you would do it without a submit button.

Collectives™ on Stack Overflow

PHP: how to update html text element, based on value from select element?

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related