PHP：如何基于select元素的值更新html文本元素？

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.

Answer 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'>";
?>

Answer 2

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.

Answer 3

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.

Answer 4

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;

Answer 5

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.