Question

我有一个简单的问题。我不想在表单提交上加载页面。我只想点击按钮，它将显示成功文本但不加载页面。

我的表格代码：

     <form method="post" id="requestForm" action="#">
                    <div class="col-sm-2 form-title">
                        request a service
                    </div>
                    <div class="col-sm-8">
                        <div class="col-sm-4">
                            <input type="text" name="fname" placeholder="First Name *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="text" name="lname" placeholder="Last Name *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="email" name="email" placeholder="Your E-mail *" required/>
                        </div>
                        <div class="col-sm-4">
                            <input type="tel" name="phone" placeholder="Contact Number *" required/>
                        </div>
                        <div class="col-sm-8 problem">
                            <input type="text" name="problem" placeholder="Description *"  required/>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="submit" class="col-sm-11">request service</button>
                        <input type="hidden" name="task" value="consultation">
                        <input type="hidden" name="ref" value=""/>
                    </div>
                </form>

和我的JQuery是：

<script type="text/javascript">
        $('#requestForm').submit(function () {
         sendContactForm();
         return false;
        });
    </script>

帮助我谢谢

Answer 1

您提供的代码存在一些问题。例如，您没有指定sendContactForm()函数的功能。如果它在其他地方不存在，那么它就不会做任何事情。我也没有看到一个可以用有意义的方式发布信息的元素。最好在表单的action属性中指定要将数据发布到的URL，这样，如果您的用户禁用JavaScript，表单仍然有效，您可以从服务器返回页面随着消息到位。 AJAX很好，但如果事情不起作用，那就太可怕了。

由于您似乎正在使用jQuery，我建议您为脚本块尝试此操作：

$("#requestForm").submit(function(e) {

    e.preventDefault();

    $.ajax({
           type: $('#requestForm').attr('method'),
           url: $('#requestForm').attr('action'),
           data: new FormData($('#requestForm').first()),
           success: function(data, textStatus, jqXHR)
           {
               alert(data); // show response
           },
           error: function(jqXHR, textStatus, errorThrown)
           {
               alert('The server returned an error: ' + textStatus + ' ' + errorThrown);
           }
         });

    return false;
});

请注意，旧版浏览器可能无法使用FormData()对象。 https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility 您可能需要手动构建它，查看序列化为JSON（以及服务器上的反序列化），或者，对于不是特定于您的事物的其他解决方案，请尝试查看此问题：jQuery AJAX submit form

Answer 2

我假设您要使用sendContactForm将表单数据发送到服务器，并且尚未编码。您可以为sendContactForm（）

编写类似的内容

function sendContactForm() {
    $.ajax({type:'POST', url: 'myserver.php', data:$('#requestForm').serialize(), success: function(response) {
        $('#requestForm').find('.form_result').html(response);
    }});

    return false;
}

http://www.jstiles.com/Blog/How-To-Submit-a-Form-with-jQuery-and-AJAX了解更多信息。

不希望在表单提交上加载页面

2 个答案: