避免刷新提交表单的页面

Avoid Refreshing page submiting the form

本文关键字：表单 提交 刷新      更新时间：2023-09-26

无论何时使用我制作的（葡萄牙语）表单，刷新都会从页面中删除所有以前输入的数据。为什么会发生这种情况，我该如何解决？谢谢你抽出时间。

<script type="text/javascript">
        function submitForm(){
            // Initiate Variables With Form Content
            var nome = $("#nome").val();
            var email = $("#email").val();
            var telefone = $("#telefone").val();
            var assunto = $("#assunto").val();
            var mensagem = $("#mensagem").val();
            $.ajax({
                type: "POST",
                url: "send-contact2.php",
                data: "nome=" + nome + "&email=" + email + "&telefone=" + telefone + "&assunto=" + assunto + "&mensagem=" + mensagem,
                cache:false,
                success: function (data) {
                    alert(data);
                }
            });
        }
</script>
<form id="myForm">
    <div class="col col-md-6">
        <input type="text" name="nome" id="nome" required value="" tabindex="1" placeholder="Nome">
        <input type="text" name="email" id="email" required value="" tabindex="2" placeholder="E-mail">
        <input type="text" name="telefone" id="telefone" required value="" tabindex="2" placeholder="Telefone">
        <select id="assunto" name="assunto" required>
            <option value="outros">Outros assuntos</option>
            <option value="encomendas">Encomendas</option>
         </select>
    </div>
    <div class="col col-md-6">
        <textarea name="mensagem" id="mensagem" cols="29" rows="8" placeholder="Mensagem"></textarea>
    </div>
    <div class="col col-md-12 ">
        <button name ="submit" type="submit" onclick="return submitForm();">Enviar</button>
    </div>
</form>

您的函数还需要return false来阻止点击事件行为提交表单：

function submitForm(){
    // your code...
    return false;
}

更好的是，直接挂接到form的submit事件，去掉笨重的onclick处理程序，并使用serialize()为您收集表单数据：

<button name="submit" type="submit">Enviar</button>

<script type="text/javascript">
    $(function() {
        $('#myForm').submit(function(e) {
            e.preventDefault(); // stop form submission
            $.ajax({
                type: "POST",
                url: "send-contact2.php",
                data: $(this).serialize(),
                cache: false,
                success: function (data) {
                    alert(data);
                }
            });
        }
    });
</script>

尝试将onClick操作更改为onSubmit，并在方法后面添加return false。像这样：

<button name ="submit" type="submit" onsubmit="submitForm(); return false;">Enviar</button>

好的做法是将method="POST"添加到表单属性中。

相关文章：