javascript - 如何从 UL LI 元素正确提交表单?

标签 javascript html forms

我有以下 js 函数来提交我的 HTML postform - 在下面的 HTML ul 中,我可以使用“input”、“button”或“href”li 元素正确提交表单。首选方法或最佳实践方法是什么?为什么我应该选择一种方法而不是另一种?最终侧边栏将有多个选项供用户选择。

注意:我希望可点击的侧边栏元素看起来像可选择的文本而不是按钮,class="astext"使用 CSS 执行此操作。我只针对最新的浏览器。

   <script type="text/javascript">
    function submitForm(queryType) {

        // set the hidden input's query type value
        $('#db_query').val(queryType);

        // submit the form.
        $('#post_form').submit();

    }
    </script>
<body>
  
    <form method="POST" name="postform" id="post_form" action="process.php">
        <input name="display" id="display_id" type="hidden" value="north" />
        <input name="query" id="db_query" type="hidden" value="all" />
    </form>
  
    <aside id="sidebar">
          <h3>Schedule selection items here...</h3>
          <!-- I can use "input", or "button", or "href" below to submit the form, what is the correct way or does it really matter? -->
          <!-- they are all clear to me and seem to be maintainable? -->

          <ul>
             <li><input onclick="submitForm('tomorrow');" type="submit" name="schedule" class="astext" value="Select Tomorrow" /></li>
             <li><button onclick="submitForm('recent');" type="submit" name="schedule" class="astext">Select Recent</button></li>
             <li><a href="#" onclick="submitForm('all');" class="astext">Select All</a></li>
          </ul>
    
    </aside>
  
</body>

最佳答案

您在 JavaScript 中提交表单,因此浏览器并不真正关心您将提交函数挂接到哪个元素。
为了清楚起见,我会选择 <a><button> (因为 <input> 通常放置在 <form> 标签内),确切的选择取决于我是否想使用链接发送表单或按钮(即使使用 CSS,您可以设置 <a> 元素的样式)像按钮一样,<button> 元素像超链接)。

关于javascript - 如何从 UL LI 元素正确提交表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36165460/

相关文章:

javascript - 使用 mod 环绕

javascript - 如何禁用 HTML 页面中的元素但能够使用 jQuery Draggable 拖动它?

Python: Mechanize 找不到任何形式

javascript - 如何在 Flask 蓝图中从 HTML POST 变量构建动态路由

javascript - 使用 Javascript 和 AJAX 调用 2 个以上函数

javascript - 无法获得正确的 knockout 绑定(bind)上下文

html - css - 居中 img+文本,img 位于文本左侧

css - 以水平形式右对齐 SelectBoxIt 控件

php - Symfony2 - 来自表单集合元素的数据最终作为数组而不是实体

javascript - 从 javascript 对象中删除较少的序列计数