How to pass value from <option><select> to form action - html

Question

I need to pass a value in option select to action where I have agent_id=
Can anyone help?
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>

Answer 1

You don't have to use jQuery or Javascript.
Use the name tag of the select and let the form do it's job.
<select name="agent_id" id="agent_id">

Answer 2

Like #Shoaib answered, you dont need any jQuery or Javascript. You can to this simply with pure html!
<form method="POST" action="index.php?action=contact_agent">
<select name="agent_id" required>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<input type="submit" value="Submit">
</form>
Remove &agent_id= from form action since you don't need it there.
Add name="agent_id" to the select
Optionally add word required do indicate that this selection is required.
Since you are using PHP, then by posting the form to index.php you can catch agent_id with $_POST
/** Since you reference action on `form action` then value of $_GET['action'] will be contact_agent */
$action = $_GET['action'];
/** Value of $_POST['agent_id'] will be selected option value */
$agent_id = $_POST['agent_id'];
As conclusion for such a simple task you should not use any javascript or jQuery. To #FelipeAlvarez that answers your comment

Answer 3

you can simply use your own code but add name for the select tag
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
then you can access it like this
String agent=request.getparameter("agent_id");

Answer 4

with jQuery :
html :
<form method="POST" name="myform" action="index.php?action=contact_agent&agent_id=" onsubmit="SetData()">
<select name="agent" id="agent">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
jQuery :
$('form').submit(function(){
$(this).attr('action',$(this).attr('action')+$('#agent').val());
$(this).submit();
});
javascript :
function SetData(){
var select = document.getElementById('agent');
var agent_id = select.options[select.selectedIndex].value;
document.myform.action = "index.php?action=contact_agent&agent_id="+agent_id ; # or .getAttribute('action')
myform.submit();
}

Answer 5

instead of trying to catch both POST and GET responses - you can have everything you want in the POST.
Your code:
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
can easily become:
<form method="POST" action="index.php">
<input type="hidden" name="action" value="contact_agent">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<button type="submit">Submit POST Data</button>
</form>
then in index.php - these values will be populated
$_POST['action'] // "contact_agent"
$_POST['agent_id'] // 1, 2 or 3 based on selection in form...