Question

<form action='process.php' method="post" id="contact-form">
     <label><span class="text-form">Nombre:</span>
            <input name="nombre" type="text" required />
        </label>
        <label><span class="text-form">Apellido:</span>
            <input name="apellido" type="text" required />
        </label>
        <div class="buttons">
            <div id="loader"> <a class="button" href="#" onClick="document.getElementById('contact-form').submit()">Enviar</a>
 <a class="button" href="#" onClick="document.getElementById('contact-form').reset()">Limpiar</a>

</form>

JS

$(document).ready(function () {
    $(function () {
        $('#contact-form').submit(function (e) {
            e.preventDefault();
            return false;
            var form = $(this);
            var post_url = form.attr('action');
            var post_data = form.serialize();
            $('#loader', form).html('<img src="images/loader.gif" /> Please Wait...');
            $.ajax({
                type: 'POST',
                url: post_url,
                data: post_data,
                success: function (msg) {
                    $(form).fadeOut(500, function () {
                        form.html(msg).fadeIn();
                    });
                }
            });
        });
    });
});

我试图在不加载页面的情况下完成提交。但是防止默认不起作用，

请任何建议都是善意的

Answer 1

既然你已经在使用jQuery了，为什么不以同样的方式调用submit事件呢？删除内联onclick内容，为锚点添加一些ID，并执行以下操作：

$(function () {
    $('#submitLink').click(function () {
        $('#contact-form').submit();
    });

    $('#resetLink').click(function () {
        $('#contact-form').reset();
    });
});

锚点只需要那些ID：

<a class="button" id="submitLink" href="#">Enviar</a>
<a class="button" id="resetLink" href="#">Limpiar</a>

其他一些注意事项：

您正在处理程序中立即调用return ，因此其他任何代码都不会运行。您可能希望在函数的结尾返回。

使用这样的锚是非常不标准的，可能会导致进一步的问题。对此的一个很好的指示是“href="#"”，这是HTML中的一种反模式。我建议使用按钮来实现此功能。锚用于将两个文档链接在一起（或文档中的两个位置），而不是用于调用表单功能。

Answer 2

奇怪的是，调用document.getElementById('contact-form').submit()不会触发submit()事件。由于您使用的是jQuery，因此可以通过将“Enviar”链接更改为：

来解决此问题

<a class="button" href="#" onClick="$('#contact-form').submit()">Enviar</a>

完成后，请移除位于return false;行之后的e.preventDefault()。它导致函数退出，阻止其运行后的任何代码。

preventDefault不起作用

2 个答案: