Ergina Or Ergina Or - 5 months ago 9
PHP Question

Is it possible to have many select tags in one html form?

I want to create a form that has two different dropdown lists to select from,(for example a dropdown list to select a name and a dropdown list to select age). Then i want to print them under the form . Then i must be able to select again other options and they will be printed after the fist option's print.

Is this possible?

<form id="form" action="" method="post">
<select id="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="age">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="submit" value="submit">
</form>


and how i can pass the selected value to php?

Answer
<body>
    <form id='form'>
        <select id='name' name='selectName'>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
        </select>
        <select id='age' name='selectAge'>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
        </select>
        <input type='submit' value='submit'>
    </form>
    <div id='print'></div> <!-- Here you will print the submitted values -->
</body>
</html>

<!-- ES6 syntax -->
<script>

    const form = document.getElementById('form');
    const print = document.getElementById('print');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // prevent page reload

        const name = this.querySelector('#name').value; // get the name
        const age = this.querySelector('#age').value; // get the age

        print.innerHTML += `<div>Name: ${name}, Age: ${age}</div>`; // print name and age below the form

        // here you can perform an AJAX call to your PHP file and do something with it

    });

</script>

In this case there is no reason to put action='YOUR_PHP_FILE.php' in the form, because you want to keep the page and the printed messages below, so just perform AJAX call behind the scenes. Normally you would do:

<form id='form' action='YOUR_PHP_FILE.php' method='POST'>
    // ...
</form>

In the php file you can do something like:

<?php
    $name = $_POST['selectName'];
    $age = $_POST['selectAge'];

    // do something with these values ...

?>

Here is old Javascript version:

<!-- Old syntax -->
<script>

    var form = document.getElementById('form');
    var print = document.getElementById('print');

    form.addEventListener('submit', function(event) {
        event.preventDefault(); // prevent page reload

        var name = this.querySelector('#name').value; // get the name
        var age = this.querySelector('#age').value; // get the age

        print.innerHTML += '<div>Name: ' + name + ', Age: ' + age + '</div>'; // print name and age below the form

        // here you can perform an AJAX call to your PHP file and something with it

    });

</script>
Comments