两个提交按钮随时可以点击两个不同的功能

时间:2014-04-02 02:43:47

标签: javascript php jquery html ajax

基本上我有一个功能,但除了因为显而易见的原因需要进行的一些更改之外,我已经复制了它。然后,我有两个表单,每个表单提交一个不同的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>

我希望每个提交按钮都可以随时使用自己的功能。

请帮助我被困一天以上,我似乎无法找到问题。

非常感谢,

萨姆。

0 个答案:

没有答案