2013-06-25 191 views
1

我有一个联系表单,当页面加载时隐藏。然后可以通过单击联系人表单按钮查看联系人表单,使其滑动并滑动。问题是当提交表单时页面刷新,并且如果有错误消息或成功消息被隐藏,因为页面已重新加载,您必须单击“联系表单”按钮才能看到它。我不擅长jquery或php。任何帮助将非常感激。表单提交后,我需要显示消息。提交后隐藏Jquery联系表格

该网站是http://www.carlisleironing.co.uk/index.php

我jQuery是

$(document).ready(function() { 
    $("#contactLink").click(function() { 
     if ($("#contactForm").is(":hidden")) { 
      $("#contactForm").slideDown("slow"); 
     } else { 
      $("#contactForm").slideUp("slow"); 
     } 
    }); 
}); 
+2

Ajax sumbit的形式,这里是一个例子,这个想法是这样的一个例子:http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/,当您提交表单时,您不会重新加载。 – We0

+0

您还可以检查是否显示错误并显示表格: 'if($(“#error”)。is(“:visible”)){// show form}' – stackErr

+0

@ We0'dataString ='name = '+ name +'&email ='+ email +'&phone ='+ phone;'什么是邪恶混乱!?!?!使用'serialize'! –

回答

1

添加以下(就在你问的最后});之前):

if ($('#contactForm #error').size() > 0){ 
    $('#contactForm').slideUp('slow'); // or just .show(); 
} 

测试是否存在#error元素,如果是,则显示表单。我不确定你的成功信息是什么样的,但类似的测试也可以成为这样的测试。

至于其他答案:是的,你可以做一个AJAX提交,但机会是(我在这里假设背景)超出了这个问题的范围。这将涉及特殊的请求处理和附加的验证库(y/ies)。

+0

这是一个很好的答案,非常好。 –

+0

如果他已经有jQuery,还有什么额外的库?有一个额外的请求,他可以从原始文件中复制大部分代码。更好的错误处理和更好的方法。 IDK,如果它工作我猜它可行,但这就像在技术上说你的车可以驾驶三轮... – We0

0

您可以使用Ajax提交表单和显示结果无需重新加载页面:

$('form').submit(function() { 
    $.post($(this).attr('action'), $(this).serialize(), function(data) { 
     console.log(data); 
    }); 
    return false; 
}); 
0

我假设有人提交表单时,php页面会生成错误,但用户无法看到它们,因为表单在页面加载时默认隐藏。

您可以命名提交按钮。如果用户点击提交按钮,该按钮的值将与获取或发布请求一起发送。然后你可以改变你的php页面的行为,如果表单被提交,就不会隐藏联系表单。如果用户提交的表单

<input type="submit" name="theSubmitButton" value="Submit!" /> 

在PHP $_GET['theSubmitButton'](或$ _POST如果您使用的是POST请求)将被设置,并且它不会被设置,如果这是情况并非如此。您可以使用isset($_GET['theSubmitButton'])来测试用户是否已提交页面并相应地更改联系表单的类别。