Success / Error Messages on form Submit not showing

**reflex84** · Dec 02nd, 2011, 04:29 AM

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

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.

**Web Design Forums** · Dec 02nd, 2011 04:29 AM

**Ganners** · Dec 02nd, 2011, 02:37 PM

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.

Thread: Success / Error Messages on form Submit not showing

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

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

Thread: Success / Error Messages on form Submit not showing

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

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

Sections

General Info