javascript - HTML ul/li 按钮表单提交

Question

我正在尝试使用选择器创建动态按钮，我将在按钮下拉列表中选择的内容将提交到下一页。但是它不起作用，我无法检索按钮中选择的任何内容。在表单中提交此类数据的正确方法是什么？

我正在将表单提交到 php 页面，同时使用 $_POST["packageType"] 获取它，发现 here以下方法:

onclick="myForm.myVariable.value='foo';myForm.submit();"

这是合法的还是有更好的方法来进行这种动态值提交？

<form action="target.php" method="post" id="1111">
<input id="packageType" type="hidden" name="packageType" value="N/A"/>

<div class="btn-group">
    <button type="button" class="btn btn-success btn-xs">Add Plan</button>
    <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu package-selector" role="menu">
        <li><a href="#" onclick="1111.packageType.value='basic';1111.submit();">Type 1</a></li>
        <li><a href="#" onclick="1111.packageType.value='premium';1111.submit();">Type 2</a></li>
    </ul>
</div>

Answer 1

正如我很快看到的，您的解决方案可以工作(只要您的 Bootstrap 代码设置正确)。只是您引用表单“1111”的方式存在问题。

尝试像这样重写你的 ul/li 标签

<ul class="dropdown-menu package-selector" role="menu">
    <li><a href="#" onclick="document.getElementById('1111').packageType.value='basic';document.getElementById('1111').submit();">Type 1</a></li>
    <li><a href="#" onclick="document.getElementById('1111').packageType.value='premium';document.getElementById('1111').submit();">Type 2</a></li>
</ul>

document.getElementById('1111') 搜索表单并引用它。 JavaScript 无法直接理解 1111。

还有一些其他方法可以引用该表单。例如 document.forms[0] 但是，由于表单中有一个 id 属性，这是最简单的方法。

附注:我建议不要使用以数字开头的 ID(例如，将 1111 替换为 myform1111 或类似内容)。