perform the POST command when the user selects an option from a drop down

Question

I am setting up a page in which the first step is for the user to make a choice from a dropdown. I do not want to require the user to first make a selection and then click on the submit button, since there is nothing else they would be doing at this point. Here is a code snippet from the FORM element portion of the page.

<form action="index.php" target="_self" method="post">
<label style:padding:1px margin:0px font-size:12px>Last Name</label>
<select name="UniqueLastNames" onchange="checkField(this.value)">
(the option values are wrapped in php and get their values from a database)

I know that usually the last part of this would be use the input element with type=submit, but I just want the POST action to run as soon as the user makes a choice from the list. the Java Script 'checkFidld() returns the selected name and it currently puts it into a label on my form that just proves that the dropdown is working.

I would also prefer to use the POST as opposed to the GET so the user can not alter the url, and yes the user actually stays on the same page and the remainder of data for that page will be filled in when the page refreshes.

Answer 1

As far as I understood your question and comment, you want your user to select value from drop down box and page having different fields should be update accordingly.

// PHP code
$choice = $_GET['userchoice'];
// Get Data from Database and update fields in Page


// In javascript, Use this code.
<script type="text/javascript">
    function checkField(val)
    {
        window.location = "yourpage.html?userchoice="val;
    }
</script>

Again I would recommend you to use Ajax that would impact better on your clients.

Answer 2

Just call the submit method in your form once your checkField function is called. For example:

HTML

<form action="index.php" target="_self" method="post" id="your-form">
    <select name="UniqueLastNames" onchange="checkField(this.value)">
        ...
    </select>
</form>

JavaScript

function checkField(val) {
    // do something with your val
    document.getElementById('your-form').submit()
}

Please notice that I added an ID to the form element so I can select it easily in JavaScript.