基本上我有一个功能,但除了因为显而易见的原因需要进行的一些更改之外,我已经复制了它。然后,我有两个表单,每个表单提交一个不同的ajax请求与重复的功能。但是,我似乎无法发送第二个表单,直到第一个表单已发送,我希望能够随时发送任何一个表单。
我的每个功能代码都是这个
No.1
$(document).ready(function foo() {
//if submit button is clicked
$('#submit').click(function() {
//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var website = $('input[name=website]');
var comment = $('textarea[name=comment]');
//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
if (comment.val()=='') {
comment.addClass('hightlight');
return false;
} else comment.removeClass('hightlight');
//organize the data properly
var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' +
website.val() + '&comment=' + encodeURIComponent(comment.val());
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('fast');
//show the success message
$('.done').fadeIn('fast');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
第二个功能看起来像这样..
$(document).ready(function foo() {
//if submit button is clicked
$('#submitt').click(function() {
//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var website = $('input[name=website]');
var comment = $('textarea[name=comment]');
//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');
if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');
if (comment.val()=='') {
comment.addClass('hightlight');
return false;
} else comment.removeClass('hightlight');
//organize the data properly
var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' +
website.val() + '&comment=' + encodeURIComponent(comment.val());
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "process1.php",
//GET method is used
type: "GET",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
$('.form').fadeOut('fast');
//show the success message
$('.done').fadeIn('fast');
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, unexpected error. Please try again later.');
}
});
//cancel the submit button default behaviours
return false;
});
});
然后我提交的两个表格看起来像这样......
<div class="block">
<a class="m-btn blue-stripe expander">iPhone Screen Repair</a>
<div class="done">
<b>Thank you !</b> We will contact you with iPhone Screen replacement details soon.
</div>
<div class="form">
<form method="post" action="process.php" class="fs">
<input type="text" name="name" placeholder="Name" class="m-wrap m-ctrl-medium" />
<input type="text" name="email" placeholder="Email" class="m-wrap m-ctrl-medium" />
<textarea name="comment" placeholder="Address..." class="m-wrap m-ctrl-medium" /> </textarea>
<br />
<a href="" class="m-btn blue" id="submit" onClick="function();">Submit <i class="icon-share-alt icon-white"></i></a>
</div>
<div class="loading"></div>
</div>
</form>
</div>
</div>
又是我的第二张表格......
<div class="block1">
<a class="m-btn green-stripe expander">Website Development</a>
<div class="done1">
<b>Thank you !</b> We will contact you with the website details we need soon!
</div>
<div class="form1">
<form method="post" action="process1.php" class="fs">
<input type="text" name="name" placeholder="Name" class="m-wrap m-ctrl-medium" />
<input type="text" name="email" placeholder="Email" class="m-wrap m-ctrl-medium" />
<textarea name="comment" placeholder="Address..." class="m-wrap m-ctrl-medium" /> </textarea>
<br />
<a href="" class="m-btn green" id="submitt" onClick="function();" >Submit <i class="icon-share-alt icon-white"></i></a>
</div>
<div class="loading"></div>
</div>
</form>
</div>
</div>
我希望每个提交按钮都可以随时使用自己的功能。
请帮助我被困一天以上,我似乎无法找到问题。
非常感谢,
萨姆。