Question

我有2个部分，第一个是标准显示的表格

<section id="formulier" style="display:">
   <h3>Welkom op mijn pagina, vul de gegevens in om mijn motivatiebrief te kunnen zien.</h3>
     <form class="formulier-gegevens" name="form" id="form" action="" method="post" onsubmit="document.getElementById('formulier').style.display = 'none';document.getElementById('brief').style.display = '';">
       <input type="text" name="voornaam" class="formulier-input" placeholder="Vul uw voornaam in" required>
       <input type="text" name="tussenvoegsels" class="formulier-input" placeholder="Vul uw tussenvoegsel(s) in">
       <input type="text" name="achternaam" class="formulier-input" placeholder="Vul uw achternaam in" required>
       <input class="verzend btn btn-lg btn-primary btn-block" type="submit" value="Verstuur">
     </form>
  </section>

我希望在表单提交后display:none此部分，我想显示此部分

<section id="brief" style="display:none">
  <h3>Hier komt de motivatiebrief </h3>

  Hey daar <?php echo $voornaam , " ", $tussenvoegsels, " ",  " ", $achternaam; ?>!

  </section>

但是一旦我提交表单，您就可以看到第二部分，然后再次返回display:none并再次显示第一部分。

目前我的表单上有onsubmit="document.getElementById('formulier').style.display = 'none';document.getElementById('brief').style.display = '';"。我还尝试使用hide和show的函数：

$(document).ready(function() { $("#form").submit(function(e) { $("#formulier").hide(); $("#brief").show(); }); });

但没有任何成功，是什么原因导致该部分的第二次显示？我该如何解决这个问题？

Answer 1

您的代码正在执行，但页面也会刷新，这就是为什么您会在短时间内看到结果。

如果您提交表单，它将重定向到action参数的url。如果没有操作参数，页面将刷新。

您可以通过阻止实际发送表单来阻止页面刷新。

将此行$('#form').submit(function(e) {替换为以下行：

$('#form').submit(function(e) {
    e.preventDefault();

Answer 2

使用会话。如果您提交表格。使用false值进行会话。把它放在输入里面。

<input type="text" value="false" id='input'>

$ session [＆＃39; check＆＃39;] =＆＃34;＆＃34;。$（＆＃39; #input＆＃39;）。val（）。＆＃34;＆＃34; ; 提交期间您只需检查表单所需的验证。如果用户输入了正确的数据。然后将输入值设置为true; $（＆＃39; #input＆＃39;）。val（true）＆＃34; 并检查这是您在主索引中的代码。如果（$会话[＆＃39;检查＆＃39;]）{

$ css =＆＃39; style =＆＃39; display：none / block＆＃39;;

} <section $css class='section1'></section> <section $css class='section2'></section>

表单提交出错后显示另一个div

2 个答案: