Question

我觉得我已经四处寻找这个问题的答案了，但是大部分的反应非常讨厌：涉及通过AJAX弹出的javascript，重定向以及其他修改DOM的方法。

我想要做的是当用户提交文档（javascript）并通过邮件（php）提交邮件时，使提交按钮消失。我的代码如下：

<form action="" method="post">
...
<input onclick="removeElements()" id="subButton" class="submit" name="submit" type="submit" value="submit">

php邮件功能在同一文档中。

这是removeElements（）函数：

var el = document.getElementById("subButton");
el.remove();
document.getElementById("thankYouMessage").setAttribute("style", "display:block");

提交功能在没有javascript调用的情况下工作，但是当我添加 onclick =“removeElements（）”部分时，javascript部分开始工作，但不再执行php。

我知道还有其他方法可以做到这一点，但在这种情况下，我实际上很好奇为什么这不能按照我的计划运作。通过删除提交按钮，我实际上是在中（或前）执行中杀死子进程PHP？

谢谢！

Answer 1

如果您添加onclick，则必须手动触发提交。

另一个选项是在表单标记的onsubmit="removeElements()"中添加您的javascript调用代码。这样，它将在执行提交

后执行您的代码

相关question here

Answer 2

不要删除该按钮，而是为其样式设置visible: hidden或display: none。这样它仍然会在文档中并且可以工作，它只是不会被显示出来。

Answer 3

当您发送表单时会重新加载您的页面，因此我建议：

使用Ajax并仅删除响应上的按钮，或
重新加载页面时不生成按钮。

Jquery Ajax示例：您可以在api.jquery.com/jquery.ajax/

中看到它们

问候。

Answer 4

您可以简单地使用JQuery为您提供的.hide功能。它使用起来非常简单，非常干净。

使用JQuery的示例1：

$("#FormID").submit(function(e) 
{
   e.preventDefault();
   // Hide button
   $("#subButton").hide();
   // Display thank-you message
   $("#thankYouMessage").css("display", "block");
});

使用JQuery的示例2：

$(document).ready(function() {
    $(".submit").click(function() {
       $("#subButton").hide();
       $("#thankYouMessage").css("display", "block");
       return false;
    });
});

在一个<input />标记中使用javascript和PHP？

4 个答案: