【问题标题】:How to post form variables with javascript, just like a type="submit" button如何使用 javascript 发布表单变量,就像 type="submit" 按钮
【发布时间】:2012-11-29 23:32:05
【问题描述】:

我是一个新手程序员,我想知道如何使用 javascript 正确提交表单。

我做了一些测试代码来告诉你我的意思:

<?php
    if (isset($_POST['message']))
    {
        echo $_POST['message'];
    }
?>

<script>
    function formsubmit() 
    {
        document.getElementById('form').submit();           
    }
</script>

<form id="form" name="form" action="" method="post">
    <input id="message" name="message" value="hello world">
    <input id="submit" name="submit" type="submit">
</form>

<a href="" onClick="formsubmit()">Click me</a><br/>
<input type="submit" onClick="formsubmit()" value="Click me">

当您按下标签内的“提交”按钮时 - php 代码将回显“hello world”。 使用 JS 提交表单时,值不会发布到页面。我做错了什么?

提前致谢。 整个下午我都在寻找解决方案,但由于我缺乏编程知识,我没有找到它。

【问题讨论】:

  • 既然 HTML 就足够了,为什么还要使用 JavaScript?只使用 Javascript 来改善用户体验?
  • 我正在使用 JavaScript,因为我的表单有 100 多个输入字段。这些字段会根据用户所做的选择来填充。 (这发生在 J 查询和 Ajax 中。)然后用户可以修改每个输入字段,当单击 javascript 按钮时,包含 100 多个输入的表单应该将所有这些输入发布到它自己并使用新旧数据更新数据库。因为有 100 多个输入字段,所以我制作了一个导航栏,其中包含固定在屏幕上的按钮。其中一个按钮包含“保存更改”功能,它只是将这个大表单发布给自己。
  • 这很严格——我的护照申请没有那么多条目。即使 - 为什么不把它分解一下。
  • 因为我没有看到任何其他在用户友好的基础上创建它的方法。如果您有兴趣,我可以向您展示我的网络应用程序,并且您可以提供一些建议。和平
  • 吃蛋糕时为什么不一次尝一口。有时你不需要一口葡萄干或樱桃!了解。

标签: php javascript html


【解决方案1】:

信不信由你,但主要问题在这里:

<input id="submit" name="submit" type="submit">

如果表单包含名称(或 id)为submit 的输入元素,它将屏蔽表单元素的.submit() 方法,因为.submit 将指向按钮而不是方法。只需将其更改为:

<input name="go" type="submit">

另请参阅:Notes for form.submit()

小问题在这里:

<a href="" onClick="formsubmit()">Click me</a><br/>

空锚点只会在调用formsubmit() 之前再次请求同一页面。只需添加href="#"

【讨论】:

  • PS:&lt;br/&gt; 应该是 &lt;br&gt; 没有斜线。
  • 如果您尝试通过 W3C 验证,
    是正确的格式,因为没有结束 标记。
  • 我也相信你不能用submit作为名字。 &lt;input name="something_besides_submit" type="submit"&gt;Look at this jsFiddle
  • @rsmith84 - 不应该有结束 &lt;br&gt; 标签:W3C HTML5 Spec
  • @Jack——没有结束BR标签,因此,在HTML中,标签是&lt;br&gt;&lt;br /&gt; 用于 XHTML。对于要验证为 XHTML 的文档,他们需要&lt;br /&gt;,但实际上没有人将文档作为 XHTML 提供,即使它们是 XHTML,除非他们想惹恼 IE 用户。大多数带有 XHTML DOCTYPE 的文档(在 Web 上)不会被验证为 XHTML,而是作为(也是无效的)HTML 提供的。
【解决方案2】:

这里的问题是你的表单上输入元素的id和名字叫做submit。

这将屏蔽表单的提交功能。更改名称和 ID,您将能够使用 javascript 提交表单。

【讨论】:

    【解决方案3】:

    尝试将 href 设置为“#”。我猜想发生的事情是,通过单击链接,它会提交表单并立即将 url 更改为您在取消表单提交之前取消表单提交的同一页面。

    【讨论】:

    • 谢谢,这些细节很重要!和平
    猜你喜欢
    • 2022-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-01
    • 1970-01-01
    • 2011-09-21
    相关资源
    最近更新 更多