Question

因此，在您提交表单后，底部会显示成功消息，然后消失。如何阻止成功消息消失，请解释导致这种情况的原因，我正在学习JavaScript，我想要简单的解释！ Link to codepen

PS：我想方法通过在else语句中返回false来提交msg，但是我担心这会阻止表单提交？

HTML

<form name="myform" onsubmit="return validateForm()">
  <input type="text" name="name" placeholder="name" /><br />
  <input type="number" name="number" placeholder="phone number"/><br />
  <input type="text" name="email" placeholder="email"/><br />
  <input type="submit"/>
</form>

的JavaScript

function validateForm() {
  var n = document.myform.name.value;
  var p = document.myform.number.value;
  var e = document.myform.email.value;

  if (n === '' || n === null) {
    alert("please enter your name!");
    return false;
  } else if (p === '' || p === null) {
    alert("please enter your number!");
    return false;
  } else if (e === '' || e === null) {
    alert("please enter your email!");
    return false;
  }else if(p.length <= 7){
     alert("Please enter a valid phone number!");
     return false;
  }else{
    var msg = "Thank you! your info has been sent!";
    var el = document.createElement('p');
    var textNode = document.createTextNode(msg);
    el.appendChild(textNode);
    document.body.appendChild(el);
  }
}

Answer 1

如果您未在表单中使用action='somepage.php'，则会在当前页面中提交数据。页面刷新，msg变量不再保留在该页面中。

我建议你创建一个包含消息的会话变量（使用Ajax或其他东西）。页面重新加载时检查会话变量是否存在。

if(isset($_SESSION['msg']){
    echo "<div class='alert alert-success'>".S_SESSION['msg']."</div>";
}

<小时/> 另一种方法是使用Ajax将数据发送到服务器并验证数据。验证后，它将根据成功或失败返回消息。然后，您可以在页面上显示数据。在此过程中，页面不刷新。类似于以下内容：

$.ajax({
    type: 'POST',
    url: "processForm.php",
    data: {
        name: n,
        number: p,
        email: e
    },
    cache: false,
    success: function (data) {
        document.getElementById("message_area").innerHTML = data;
    }
});

表单成功消息提交后消失

1 个答案: