Geek Answers Handbook

HTML Submission Form drop-down menu

Good morning!

I know this topic has been addressed on SO before, but I could not find a complete answer to my specific situation below, so I apologize if I missed the answer elsewhere.

Application area:

What I'm trying to achieve is a drop-down list (either made using pure HTML or a java script and HTML) that can load a php file. Inside this php file, it must have access to the selected dropdown value.

What I tried:

Method 1:

I used this method before:

<form action="test.php" method="post"> <select name="dropdown" id="dropdown"> <option value="value1">Option 1</option> <option value="value2">Option 2</option> </select> <input name="submitbutton" type="submit" value="submit" /> </form>

Then, by clicking the submit button, the test.php page loads, and I can get the value of the drop-down list using $ _POST ("dropdown"). This method works great! However, I want to submit the form WITHOUT the need for a button, just using the onchange dropdown event.

Method 2:

I also tried using:

 <form> <select name='dropdown' onchange='this.form.submit()'> <option value="value1">Option 1</option> <option value="value2">Option 2</option> </select> <noscript><input type="submit" value="Submit"></noscript> </form>

which will reload the sharing page, but not the test.php page. Changing "this.form.submit ()" to test.php does not work.

I feel close to them, but not quite there. I hope that what I am trying to achieve is explained quite well.

Thanks for any answers ahead of time!

+6
source share
4 answers

Add

 <form action="test.php" method="post">

In method2 and it should work fine.

+7
source

Give your form a name:

 <form name="form1" action="test.php">

.... then your exchange will be: document.form1.submit();

By the way, this has nothing to do with PHP, since it is 100% on the client.

+3
source

You forgot to add " action="test.php" " and " method="post" " to your for tag. So your IInd method should look like this:

HTML code:

 <form action="test.php" method="post"> <select name='dropdown' onchange='this.form.submit()'> <option value="value1">Option 1</option> <option value="value2">Option 2</option> </select> <noscript><input type="submit" value="Submit"/></noscript> </form>

and it will work, and you can show your data with the message print_r($_POST) in test.php . It will show you the dropdown value :)

0
source

Try using with ajax

JQuery

 $(document).on("change", "select#dropdown", function(){ $.ajax({ url: 'http://localhost/test/action.php', type: "post", data: $("#myform").serialize();, success: function(response) { $('select#dropdown').after("dropdown changed!"); } }); });
0
source

More articles:


All Articles