如何从 <option><select> 传递值以形成动作

Posted 2023-02-16

【中文标题】如何从 <option><select> 传递值以形成动作

【英文标题】：How to pass value from <option><select> to form action

【发布时间】：2012-12-18 09:59:17

【问题描述】：

我需要将选项选择中的值传递给我有 agent_id=的操作

谁能帮忙？

<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>

【问题讨论】：

糟糕。有什么理由不能只使用帖子而不是获取？

是否可以仅通过 html 实现？

@JohnFx - 我认为yuck 代表mixing both POST and GET in the same query，虽然很奇怪，但 HTML 规范允许。有关预期此行为的服务器示例，请参阅@Marko 的答案。

如果您尝试获取文本值（“Agent Homer”）而不是选项值（“1”），请使用myForm.selectedOptions[0].text。

【参考方案1】：

而不是试图同时捕获 POST 和 GET 响应 - 您可以在 POST 中拥有您想要的一切。

您的代码：

<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>

很容易变成：

<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>

然后在 index.php 中 - 这些值将被填充

$_POST['action'] // "contact_agent"
$_POST['agent_id'] // 1, 2 or 3 based on selection in form... 

【讨论】：

选择代理时我没有看到 POST，也没有提交按钮。我是不是误会了什么？

@AlanBaljeu - 是的，要完全提交表单，您需要一个按钮或可选的 js 操作来在 select 的更改事件时提交表单 - 提供的答案侧重于发送所有表单通过 POST 与混合 GET/POST 表单提交的字段。

【参考方案2】：

您可以简单地使用自己的代码，但为选择标签添加名称

<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>

那么你就可以这样访问了

String agent=request.getparameter("agent_id");

【参考方案3】：

使用 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();

【讨论】：

我怀疑选择名称应该是 agent_id 在这种情况下操作应该只是 index.php?action=contact_agent

做这么简单的事情没必要包含jQuery ... :(

@HeXa 是的，当您要提交表单时调用 SetData 函数。 +1 了

太复杂了！想象一下，当您的表单中有十几个选择时......

【参考方案4】：

就像@Shoaib 回答的那样，您不需要任何 jQuery 或 Javascript。你可以简单地用纯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>

从表单操作中删除 &agent_id=，因为您不需要它。 添加 name="agent_id" 到选择 可选添加字词required 确实表明此选择是必需的。

由于您使用的是 PHP，因此通过将表单发布到 index.php，您可以使用 $_POST 捕获 agent_id

/** 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']; 

作为这样一个简单任务的结论，您不应该使用任何 javascript 或 jQuery。致回复您评论的@FelipeAlvarez

【讨论】：

最佳答案！感谢您对我们有时并不完全了解其行为的简单事物做出如此详细的解释。

【参考方案5】：

您不必使用 jQuery 或 Javascript。

使用选择的name标签，让表单完成它的工作。

<select name="agent_id" id="agent_id">

【讨论】：

您能提供一个代码示例吗？我无法完全理解你的提议。谢谢。

这似乎是一个很好的答案，但信息很少。也许应该有一些上下文