CODEWITHSUNDEEP
phpjavascriptajaxforms
Reflex84
Reflex84

Reputation: 313

Putting multiple forms on the same page

I've got a php / ajax form that works 100% ... but I need a few of the same form on the SAME page. Of course each of the forms will go to a different recipient.

I tried duplicating the form and it seems very complicated! I've tried submitting the duplicated form (with lots of edits to the duplicated form to try get it working) but no success I don't know if what I am doing is right. How the form goes is, I have a button when clicked, it toggleslides the div which contains the form... fill in the form, hit submit and an ajax success message pops up saying thank you

HTML FORM:

<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>

If I make a duplicated form, what I need to change in the HTML code is the following:

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

to:

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

Is this correct? Anything else I need to change in the HTML?

Moving onto the 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();

        }
    );

    });

Do I need to make the field ID's different duplicating a form on the same page? EG:

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

Do I need to do any changes to the PHP process form? Here is the main part of the php process form:

$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.

     }

}

Thanks in advance! Really appreciate your help because I have tried for hours and I haven't got it right yet!

EDIT: MY CURRENT 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;

});

});

Upvotes: 0

Views: 3423

Answers (1)

John Fable
John Fable

Reputation: 1091

Instead of using IDs for the jquery selectors, use classes. You can give all of the forms the same class name and the fields that are the same get the same classes as well.

Then, use those in your jquery:

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

It should work for however many instances of the form you have because all of the input fields are referenced by $(this), which is the submitted form, regardless of id or name.

EDIT:

This should work for you. For any number of forms, this is all you would need.

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;
    });
});

Upvotes: 2

Related Questions