我已经使用普通按钮下载了ajax / jquery conatct表单。但我想用文本链接替换按钮。我一直在网上尝试一些建议,但似乎都没有。
非常感谢任何帮助。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#contact_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader', form).html('<img src="loader.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
});
</script>
</head>
<body>
<form action="process.php" method="post" id="contact_form">
<div>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<label for="email">Your Email:</label>
<input type="text" name="email" id="email" value="" tabindex="2" />
</div>
<div>
<label for="message">Message:</label>
<textarea cols="40" rows="8" name="message" id="message"></textarea>
</div>
<div id="loader">
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
答案 0 :(得分:0)
如果您只想将提交按钮替换为<a />
标记:
在您的HTML中,替换<input />
标记:
<div id="loader">
<!-- <input type="submit" value="Submit" /> -->
<a id="yourID" href="" >Your Text</a>
</div>
使用jQuery将事件处理程序附加到新的<a />
标记:
$("#yourID").on("click",function(){
$("#contact_form").trigger("submit");
});
答案 1 :(得分:0)
用
替换按钮<a href="#" id="submit">Submit</a>
然后使用以下代码(在您的Form ajax代码之前或之后)
$('#submit').click(function (e){
e.preventDefault();
$('#contact_form').submit();
});
答案 2 :(得分:0)
<强> HTML 强>
<div id="loader">
<a href="#" class="submit">Submit</a>
</div>
<强> JS 强>
$(function(){
$('#contact_form').submit(function(e){
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader', form).html('<img src="loader.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
}).delegate('a.submit', 'click', function() {
$(this).closest('form').submit();
return false;
});
});