在一個中使用javascript和PHP <input> 標簽？

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。

我知道還有其他方法可以執行此操作，但是在這種情況下，我實際上很好奇為什么此功能無法按照我的計划進行。 通過刪除Submit按鈕，我實際上是在執行中（或預執行）過程中殺死了子PHP進程嗎？

謝謝！

Answer 1

如果添加onclick ，則必須手動觸發提交。

另一個選擇是將您的JavaScript調用代碼添加到form標記上的onsubmit="removeElements()" 。 這樣，它將在執行提交后執行您的代碼

相關問題在這里

Answer 2

不要刪除按鈕，而是將其設置為visible: hidden或display: none 。 這樣，它將仍然存在於文檔中並且可以工作，只是不會顯示。

Answer 3

當您發送表單時，頁面會重新加載，因此我建議：

• 在響應中使用Ajax並且僅刪除按鈕，或者
• 重新加載頁面時不生成按鈕。

jQuery Ajax示例：您可以在此處看到它們api.jquery.com/jquery.ajax/

問候。

Answer 4

您可以簡單地使用JQuery提供的.hide功能。 它非常易於使用且非常干凈。

Example1使用JQuery：

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

Example2使用JQuery：

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