如何在PHP脚本中获得下拉菜单以提交更改后的表单？

Question

好吧...首先，我知道这不是一个新问题。 但是，由于某种原因，谷歌没有为我找到任何建议（甚至可以追溯到时间开始）都没有用。 所以，请忍受我。

假设我有一个脚本，其结构如下：

<?php
   try {
      print "<table><form id='menu' action='index.php' method='POST'><tr>";
      print "<td>Select A Fruit</td><td><select name=fruit>
         <option value=''></option>
         <option value='apple'>Apple</option>
         <option value='orange'>Orange</option>
         <option value='pear'>Pear</option></select></td></tr>";
      print "<tr><td><input type='submit' name='submit' value='Submit'></td></tr></form></table>";

      if (isset($_POST['submit'])){
         if (!empty($_POST['fruit'])){
            //Do whatever the form is supposed to trigger.
         }
         else {
           //Nothing selected; handle however makes sense.
         }
      }
   } 
   catch(Exception $e) {die( print_r( $e->getMessage() ) );}
?>

而且，我希望它在选择选项后立即提交表单，而不是使用按钮。

根据我的搜索，教科书的答案似乎是使用onchange属性修改Select标签，该属性调用JavaScript方法，如下所示：

<select name='fruit' onchange='document.getElementById('menu').submit()'>

或简称：

<select name='fruit' onchange='this.form.submit()'>

但这里是我卡住了...我发现的职位没有解释，你告诉浏览器/解释器休学的JavaScript，使这项工作。 因此，此更改对我无济于事。

我在这里想念什么？

Answer 1

我将摆脱dom 0级处理程序，并将select的onchange处理程序设置为一个可获取您的表单并在其上调用Submit的函数。

document.getElementById("yourSelectId").onchange = function() {
    document.forms["formsId"].submit();
};

我正在向您展示将事件处理程序添加到dom元素的更可靠的方法。 不用说onchange="blah()"您可以设置在dom准备就绪时运行的body onload函数，然后可以使用JavaScript添加处理程序：

<body onload="init()">

function init() {  
    document.getElementById("yourSelectId").onchange = function() {
        document.forms["formsId"].submit();
    };
}

或者，您可以完全跳过丑陋的<body onload="init()"> ，然后将代码放进去

    document.getElementById("yourSelectId").onchange = function() {
        document.forms["formsId"].submit();
    };

在身体底部的常规脚本块中

Answer 2

您的标记无效，表格元素不能具有子元素形式（将表格环绕表格）
为“提交”按钮选择另一个名称，否则调用submit()时会在IE中收到错误消息

Answer 3

我建议使用事件侦听器，而不是将属性添加到代码中。 另外，建议让静态页面显示“提交”按钮，并在页面加载后通过javascript删除它。

`element.addEventListener`示例

<script type="text/javascript">
 document.getElementById("yourSelectId").addEventListener("change", function(){document.forms["yourFormId"].submit();});
</script>

要阅读有关element.addEventListener更多信息（尤其是查看为什么使用它很重要），请查看MDN上有关element.addEventListener的文章。

JavaScript如何在onchange属性中工作

但是，这就是我遇到的问题...我发现的所有帖子都没有解释您告诉浏览器/解释器使用JavaScript进行工作的位置。 因此，此更改对我无济于事。

诸如onchange ， onclick等之类的属性（注意开头是“ on”）将值解析为javascript。 嗯，这就是告诉浏览器使用JavaScript使其起作用的地方：)

如何在PHP脚本中获得下拉菜单以提交更改后的表单？

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-01-11 01:25:53

解决方案2
0 2012-01-11 01:34:10

解决方案3
0 2012-01-11 01:55:46

`element.addEventListener`示例

JavaScript如何在onchange属性中工作

如何在PHP脚本中获得下拉菜单以提交更改后的表单？

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-01-11 01:25:53

解决方案2 0 2012-01-11 01:34:10

解决方案3 0 2012-01-11 01:55:46

element.addEventListener示例

JavaScript如何在onchange属性中工作

解决方案1
1 已采纳 2012-01-11 01:25:53

解决方案2
0 2012-01-11 01:34:10

解决方案3
0 2012-01-11 01:55:46

`element.addEventListener`示例