将多个表单放在同一页面上

时间:2011-12-01 20:17:11

标签: php javascript ajax forms

我有一个100%工作的php / ajax表单...但我需要在 SAME 页面上使用相同的表格。当然,每个表格都会发送给不同的收件人。

我尝试复制表单,看起来很复杂!我已经尝试过提交重复的表单(对重复的表单进行大量编辑以尝试使其正常工作)但没有成功 我不知道我在做什么是对的。 表格如何,点击时我有一个按钮,它切换包含表格的div ...填写表格,点击提交,弹出一条ajax成功消息说谢谢

HTML表格:

<body>
<div id="container">
<div id="accommodation_listing_options_box">
<ul id="accommodation_listing_options">
  <li>Price Range: <a href="#" class="tooltip" style="cursor:help;" title="Mid-range 
Accommodation"><img src="../mid-range-yellow.png" width="28" height="19" 
align="absmiddle" style="padding-left:0px;" /></a></li>
  <li><a href="#">View 
Comments</a> <img src="../comments_bubble_small.png" width="18" height="16" 
align="absmiddle" style="padding-left:5px;" /></li>
</ul>
</div>
<div id="quick_enquiry_box">Make Quick Enquiry</div>
<div style="clear:both; width:710px;"></div>



<div style="clear:both;"></div>
<div id="slide_panel">
<div id="contact">

        <div id="message"></div>

        <form method="post" action="contact.php" name="contactform"    
id="contactform">
<div id="my_contact_left">



        <label for="name" accesskey="U"><span class="required">*
</span>Name</label><br />
        <input name="name" type="text" id="name" size="30" />

        <br />
        <label for="email" accesskey="E"><span class="required">*
</span>Email</label><br />
        <input name="email" type="text" id="email" size="30" />

        <br />
        <label for="phone" accesskey="P"><span class="required">*
</span>Phone:</label><br />
        <input name="phone" type="text" id="phone" size="30" />

        <br />
        <label for="dayin" accesskey="P">Day in:</label><br />

        <input name="dayin" class="datepicker" type="text" id="dayin" 
size="30" />

        <br />
        <label for="dayout" accesskey="P">Day out:</label><br />
        <input name="dayout" class="datepicker2" type="text" id="dayout" 
size="30" />


</div>
<div id="my_contact_right">

        <label for="comments" accesskey="C"><span class="required">*
</span>Your Comments</label><br />
        <textarea name="comments" cols="40" rows="3" id="comments" 
style="width: 350px; height:100px;"></textarea>

        <p><span class="required">*</span>Type the validation code in 
below</p>

        <div style="width:100px; height:40px; float:left;"><label 
for="verify" accesskey="V">&nbsp;&nbsp;&nbsp;<img src="image.php" alt="Image 
verification" border="0"/></label></div>
        <div style="width:310px; height:40px; float:right;"><input 
name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" />
        <input type="submit" style="margin-left:112px;" class="submit" 
id="submit" value="Send it!" /></div>
        <div style="clear:both; width:410px;"></div>

</div>
<div style="clear:both; width:710px;"></div>

        </form>
</div>
<div id="quick_form_wrapper_close"><a href="#"><img src="../close-panel-button.gif" 
/></a></div>
</div>



</div>
</body>

如果我制作了重复的表单,我需要在HTML代码中更改的内容如下:

action="contact.php" name="contactform"    
id="contactform"

为:

action="contact2.php" name="contactform2"    
id="contactform2"

这是对的吗?我需要在HTML中更改其他任何内容吗?

转到Javascript:

jQuery(document).ready(function(){

$('#contactform').submit(function(){

    var action = $(this).attr('action');

    $('#submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $.post(action, {
        name: $('#name').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        dayin: $('#dayin').val(),
        dayout: $('#dayout').val(),
        comments: $('#comments').val(),
        verify: $('#verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null);
            $("#message").show().delay(5000).fadeOut();

        }
    );

    });

我是否需要使字段ID在同一页面上复制不同的表单? EG:

$.post(action, {
        name2: $('#name2').val(),
        email2: $('#email2').val(),
        phone2: $('#phone2').val(),
        dayin2: $('#dayin2').val(),
        dayout2: $('#dayout2').val(),
        comments2: $('#comments2').val(),
        verify2: $('#verify2').val()
    },

我是否需要对PHP流程表单进行任何更改? 这是php进程表单的主要部分:

$name    = $_POST['name'];
$email  = $_POST['email'];
$phone  = $_POST['phone'];
$dayin  = $_POST['dayin'];
$dayout = $_POST['dayout'];
$comments = $_POST['comments'];

if (isset($_POST['verify'])) :
    $posted_verify   = $_POST['verify'];
    $posted_verify   = md5($posted_verify);
else :
    $posted_verify = '';
endif;

// Important Variables
$session_verify = $_SESSION['verify'];

if (empty($session_verify)) $session_verify = $_COOKIE['verify'];

$error = '';

    if(trim($name) == '') {
        $error .= '<li>Your name is required.</li>';
    }

    if(trim($email) == '') {
        $error .= '<li>Your e-mail address is required.</li>';
    } elseif(!isEmail($email)) {
        $error .= '<li>You have entered an invalid e-mail address.</li>';
    }

    if(trim($phone) == '') {
        $error .= '<li>Your phone number is required.</li>';
    } elseif(!is_numeric($phone)) {
        $error .= '<li>Your phone number can only contain digits.</li>';
    }

    if(trim($comments) == '') {
        $error .= '<li>You must enter a message to send.</li>';
    }

    if($session_verify != $posted_verify) {
        $error .= '<li>The verification code you entered is incorrect.
</li>';
    }

    if($error != '') {
        echo '<div class="error_message">Attention! Please correct the 
 errors below and try again.';
        echo '<ul class="error_messages">' . $error . '</ul>';
        echo '</div>';

    } else {

    if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }

     // Advanced Configuration Option.
     // i.e. The standard subject will appear as, "You've been contacted by 
John Doe."

     $e_subject = 'You\'ve been contacted by ' . $name . '.';

     // Advanced Configuration Option.
     // You can change this if you feel that you need to.
     // Developers, you may wish to add more fields to the form, in which case 
you must be sure to add them here.

     $msg  = "You have been contacted by $name with regards to Accommodation. 
They passed verification and their message is as follows." . PHP_EOL . PHP_EOL;
     $msg .= "$comments" . PHP_EOL . PHP_EOL;
     $msg .= "You can contact $name via email, $email or via phone $phone." . 
PHP_EOL . PHP_EOL;
     $msg .= "We want to stay from the $dayin to the $dayout" . PHP_EOL . 
PHP_EOL;
     $msg .= 
"---------------------------------------------------------------------------
-" . PHP_EOL;


    if($twitter_active == 1) {

        $twitter_msg = $name . " - " . $comments . ". You can contact " . 
$name . " via email, " . $email ." or via phone " . $phone . ".";
        twittermessage($twitter_user, $twitter_msg, $consumer_key, 
$consumer_secret, $token, $secret);

    }

    $msg = wordwrap( $msg, 70 );

    $headers = "From: $email" . PHP_EOL;
    $headers .= "Reply-To: $email" . PHP_EOL;
    $headers .= "MIME-Version: 1.0" . PHP_EOL;
    $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
    $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

    if(mail($address, $e_subject, $msg, $headers)) {

     echo "<fieldset>";
     echo "<div id='success_page'>";
     echo "<strong>Email Sent Successfully.</strong>";
     echo "</div>";
     echo "</fieldset>";

     } else {

     echo 'ERROR!'; // Dont Edit.

     }

}

提前致谢!真的很感谢你的帮助,因为我已经尝试了几个小时,但我还没有做好!

修改 我当前的JAVASCRIPT CODING:

jQuery(document).ready(function(){

$('.contactform').submit(function(){

    var action = $(this).attr('action');

    $('.submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $.post(action, {
        name: $('.name').val(),
        email: $('.email').val(),
        phone: $('.phone').val(),
        dayin: $('.dayin').val(),
        dayout: $('.dayout').val(),
        comments: $('.comments').val(),
        verify: $('.verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('.contactform img.loader').fadeOut('fast',function()
{$(this).remove()});
            $('.submit').removeAttr('disabled');
            if(data.match('success') != null);
            $("#message").show().delay(5000).fadeOut();

        }
    );

    });

    return false;

});

});

jQuery(document).ready(function(){

$('.contactform2').submit(function(){

    var action = $(this).attr('action');

    $('.submit').attr('disabled','disabled').after('<img src="assets/ajax-
loader.gif" class="loader" />');

    $("#message2").slideUp(750,function() {
    $('#message2').hide();

    $.post(action, {
        name: $('.name').val(),
        email: $('.email').val(),
        phone: $('.phone').val(),
        dayin: $('.dayin').val(),
        dayout: $('.dayout').val(),
        comments: $('.comments').val(),
        verify: $('.verify').val()
    },
        function(data){
            document.getElementById('message2').innerHTML = data;
            $('#message2').slideDown('slow');
            $('.contactform2 img.loader').fadeOut('fast',function()
{$(this).remove()});
            $('.submit').removeAttr('disabled');
            if(data.match('success') != null);
            $("#message2").show().delay(5000).fadeOut();

        }
    );

    });

    return false;

});

});

MY CURRENT JAVASCRIPT CODE:

jQuery(document).ready(function(){

$('.contactform').submit(function(){

    var action = $(this).attr('action');

    $(this).children('.submit').attr('disabled','disabled').after('<img 
src="assets/ajax-loader.gif" class="loader" />');

    $(this).children("#message").slideUp(750,function() {
    $(this).children('#message').hide();

    $.post(action, {
        name: $(this).children('.name').val(),
        email: $(this).children('.email').val(),
        phone: $(this).children('.phone').val(),
        dayin: $(this).children('.dayin').val(),
        dayout: $(this).children('.dayout').val(),
        comments: $(this).children('.comments').val(),
        verify: $(this).children('.verify').val()

    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $(this).children('#message').slideDown('slow');
            $(this).children('.contactform 
img.loader').fadeOut('fast',function(){$(this).remove()});
            $(this).children('.submit').removeAttr('disabled');
            if(data.match('success') != null);
            $(this).children("#message").show().delay(5000).fadeOut();

        }
    );

    });

    return false;

});

});

1 个答案:

答案 0 :(得分:2)

不使用jquery选择器的ID,而是使用类。您可以为所有表单提供相同的类名,并且相同的字段也可以获得相同的类。

然后,在你的jquery中使用那些:

$('.contactform').submit(function(){
    $.post(action, {
        name: $(this).children('.name').val(),

它应该适用于您拥有的表单的许多实例,因为所有输入字段都由$(this)引用,这是提交的表单,无论id或名称如何。

编辑:

这对你有用。对于任何数量的表格,这就是你所需要的。

jQuery(document).ready(function(){

    $('.contactform').submit(function(){

        var action = $(this).attr('action');

        $('.submit', this).attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');

        $('.message', this).slideUp(750,function() {
        $('.message', this).hide();

        $.post(action, {
            name: $('.name', this).val(),
            email: $('.email', this).val(),
            phone: $('.phone', this).val(),
            dayin: $('.dayin', this).val(),
            dayout: $('.dayout', this).val(),
            comments: $('.comments', this).val(),
            verify: $('.verify', this).val()
        },
        function(data){
                $('.message', this).html(data);
                $('.message', this).slideDown('slow');
                $('img.loader', this).fadeOut('fast',function() {
            $(this).remove();
        });
                $('.submit', this).removeAttr('disabled');
            if(data.match('success') != null);
                $('.message', this).show().delay(5000).fadeOut();
            });
        });
        return false;
    });
});