Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Mar 2010
    Posts
    104
    Member #
    21316
    Liked
    1 times
    Hi,

    I have a php / ajax / javascript form that I am trying to get to work. With a great deal of help from another forum, I just need to get the success and error messages to show.
    My form is at http://www.testing123.co.za/try/test-toggle.htm

    My object was to get have multiple forms on 1 page, but at the moment when you click submit on either form, the success or error message doesn't show and instead a loading gif spins near the submit button.

    Javascript for the form goes like:

    Code:
    // JavaScript Document
    
    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;
        });
    });
    HTML FORM:

    Code:
    <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">
     
                <form method="post" action="contact.php" name="contactform" id="contactform" class="contactform"><div class="message"></div>
    <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" class="name" />
    
                <br />
                <label for="email" accesskey="E"><span class="required">*</span>Email</label><br />
                <input name="email" type="text" id="email" size="30" class="email" />
    
                <br />
                <label for="phone" accesskey="P"><span class="required">*</span>Phone:</label><br />
                <input name="phone" type="text" id="phone" size="30" class="phone" />
    
                <br />
                <label for="dayin" accesskey="P">Day in:</label><br />
    
                <input name="dayin" type="text" id="dayin" size="30" class="dayin" />
    
                <br />
                <label for="dayout" accesskey="P">Day out:</label><br />
                <input name="dayout" type="text" id="dayout" size="30" class="dayout" />
    
    </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" class="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" class="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 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_box2">Make Quick Enquiry</div>
    <div style="clear:both; width:710px;"></div>
      
    <div style="clear:both;"></div>
    <div id="slide_panel2">
    <div id="contact">
      
                <form method="post" action="contact2.php" name="contactform" id="contactform" class="contactform"><div class="message"></div>
    <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" class="name" />
    
                <br />
                <label for="email" accesskey="E"><span class="required">*</span>Email</label><br />
                <input name="email" type="text" id="email" size="30" class="email" />
    
                <br />
                <label for="phone" accesskey="P"><span class="required">*</span>Phone:</label><br />
                <input name="phone" type="text" id="phone" size="30" class="phone" />
    
                <br />
                <label for="dayin" accesskey="P">Day in:</label><br />
    
                <input name="dayin" type="text" id="dayin" size="30" class="dayin" />
    
                <br />
                <label for="dayout" accesskey="P">Day out:</label><br />
                <input name="dayout" type="text" id="dayout" size="30" class="dayout" />
    
    </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" class="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" class="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_close2"><a href="#"><img src="../close-panel-button.gif" /></a></div>
    </div>
     
    </div>
    </body>
    The success / error message should appear in the div
    <div class="message"></div>
    which you can see is in the html form above.

    Any ideas why the success / error messages arn't showing upon submit?

    Thanks in advance.
    Webzarus likes this.

  2.  

  3. #2
    Senior Member Ganners's Avatar
    Join Date
    Feb 2011
    Location
    United Kingdom
    Posts
    415
    Member #
    27007
    Liked
    92 times
    Well, to be honest you should be using $.ajax to do this. An example that will work with your form:

    Code:
    <script type="text/javascript">
            $(document).ready(function(){
                $('#contactform').submit(function(){
    
                    $.ajax({
                        type: 'POST',
                        url: 'contact.php',
                        data: 'name=' + $('.name').val() + '&email=' + $('.email').val() + '&phone=' + $('.phone').val() + '&dayin=' + $('.dayin').val() + '&dayout=' + $('.dayout').val() + '&comments=' + $('.comments').val() + '&verify=' + $('.verify').val(),
                        success: function(data){
                            alert(data);
                        },
                        error: function(xhr, status, error) {
                            // handle error
                        }
                    });
                return false;
                });
            });
    </script>
    Then you have two events, one for success and one for failure. All simplified.
    Mark Gannaway Software Developer

    Recent Experiments
    - Backpropogation Neural Network language solving (http://ann.ganners.co.uk/)
    - Animated image to ASCII (http://google.ganners.co.uk/)
    - 3D Paper Characters (http://cybergame.ganners.co.uk/)
    - Anagram solving (http://roflol.co.uk/)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

how to show alert message after form submission success

,

html form submit success

,

js handle html form submit successful

,

success message javascript

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com