Question

我正在尝试为小型网络应用创建一个消失的表单。目的是一旦表单提交，将显示一个新表单。我的代码目前正常工作，但它会在恢复到原始格式之前持续几毫秒。

首先，这是主要形式：

<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish();">
<textarea name="question" class="form-field" placeholder="Ask your      question..."></textarea><br><br>
<input type="image" src="images/submit.png" name="qsubmit" >
</form>
</div>

然后我想用以下内容替换上面的表单：

<div id="email" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="form-field">
<input type="text" name="sName" placeholder="Second Name">
<input type="text" name="email" placeholder="Email">
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</form>
</div>

然后我有一个javascript函数（我仍然是javascript的新手）。

function Vanish() {

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "email";

// This line submits the form.
document.getElementById(IDofForm).submit();

// This replaces the form with the replacement content.
document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML;
};

我正在努力实现：一个简单的表格交换。提交一个表单后，将显示另一个表单。我发现与我相似的一个问题是：Content disappears immediately after form submitted and function runs

然而，只是让表格消失而不被替换。提前谢谢。

Answer 1

在提交表单后，页面将刷新。因此，在您的函数中，您必须阻止默认行为并通过AJAX提交表单。

如果需要根据第一个表单的响应显示第二个表单，那么在AJAX中触发readyState事件之后执行表单替换逻辑。

function Vanish(event) {

event.preventDefault();

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "email";

// This line submits the form.

// Get all the form elements and submit the form using ajax manually.
// document.getElementById(IDofForm).submit();

// This replaces the form with the replacement content.

// Put this code inside the success of ajax request
document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML;
};

在您的代码中：

<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event);">

尝试使用javascript提交后创建消失的表单

1 个答案: