Php 表单提交上的成功/错误消息未显示_Php_Javascript_Html_Ajax_Forms

Php 表单提交上的成功/错误消息未显示

php javascript html ajax forms

Php 表单提交上的成功/错误消息未显示,php,javascript,html,ajax,forms,Php,Javascript,Html,Ajax,Forms,我有一个php/ajax/javascript表单，我正在尝试使用它。在John Fable的大量帮助下，我只需要获得成功和错误消息即可显示。请看我们的帖子：我的表格在：我的目标是在一个页面上获得多个表单，但当您在其中一个表单上单击submit时，不会显示成功或错误消息，而是在submit按钮附近旋转加载gif 表单的Javascript如下所示： // JavaScript Document jQuery(document).ready(function() { $('.

我有一个php/ajax/javascript表单，我正在尝试使用它。在John Fable的大量帮助下，我只需要获得成功和错误消息即可显示。请看我们的帖子：

我的表格在：

我的目标是在一个页面上获得多个表单，但当您在其中一个表单上单击submit时，不会显示成功或错误消息，而是在submit按钮附近旋转加载gif

表单的Javascript如下所示：

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

//JavaScript文档
jQuery（文档）.ready（函数（）{
$（'.contactform'）.submit（函数（）{
var action=$（this.attr（'action'）；
$（'.submit'，this.attr（'disabled'，'disabled'）。在（''）之后；
$（'.message'，this）.slideUp（750，函数（）{
$（'.message'，this.hide（）；
$员额（行动{
名称：$（'.name'，this.val（），
电子邮件：$（'.email'，this）.val（），
电话：$（'.phone'，this）.val（），
dayin:$（'.dayin'，this.val（），
dayout:$（'.dayout'，this.val（），
注释：$（'.comments'，this.val（），
验证：$（'.verify'，this.val（）
},
功能（数据）{
$（'.message'，this.html（数据）；
$（'.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（）；
});
});
返回false；
});
});

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

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



价格范围：


快速查询
*名称



*
电子邮件



*电话：




日期：



休息日：

*你的
评论

*在下面输入验证代码

价格范围：


快速查询
*名称



*
电子邮件



*电话：




日期：



休息日：

*你的
评论

*在下面输入验证代码

成功/错误消息应显示在div中：

您可以在上面的html表单中看到

您知道为什么提交时不会显示成功/错误消息吗

提前感谢。

试试这个（可能仍然不是100%正确）：

jQuery（文档）.ready（函数（）{
$（'.contactform'）.submit（函数（）{
var action=$（this.attr（'action'）；
var form=此；
$（'.submit'，this.attr（'disabled'，'disabled'）。之后(
'');
$（'.message'，this）.slideUp（750，函数（）{
$（this.hide（）；
$员额（行动{
名称：$（'.name'，form）.val（），
电子邮件：$（'.email'，form）.val（），
电话：$（'.phone'，form）.val（），
dayin:$（'.dayin'，form.val（），
dayout:$（'.dayout'，form.val（），
注释：$（'.comments'，form.val（），
验证：$（'.verify'，form.val（）
},
功能（数据）{
$（'.message'，form）.html（数据）；
$（'.message'，form）.slideDown（'slow'）；
$（'img.loader'，form）.fadeOut（'fast'，function（））{
$（this.remove（）；
});
$（'.submit'，form）.removeAttr（'disabled'）；
if（data.match（'success'）！=null）
$（'.message'，form.show（）.delay（5000）.fadeOut（）；
});
});
返回false；
});
});

试试这个（可能仍然不是100%正确）：

jQuery（文档）.ready（函数（）{
$（'.contactform'）.submit（函数（）{
var action=$（this.attr（'action'）；
var form=此；
$（'.submit'，this.attr（'disabled'，'disabled'）。之后(
'');
$（'.message'，this）.slideUp（750，函数（）{
$（this.hide（）；
$员额（行动{
名称：$（'.name'，form）.val（），
电子邮件：$（'.email'，form）.val（），
电话：$（'.phone'，form）.val（），
dayin:$（'.dayin'，form.val（），
dayout:$（'.dayout'，form.val（），
注释：$（'.comments'，form.val（），
验证：$（'.verify'，form.val（）
},
功能（数据）{
$（'.message'，form）.html（数据）；
$（'.message'，form）.slideDown（'slow'）；
$（'img.loader'，form）.fadeOut（'fast'，function（））{
$（this.remove（）；
});
$（'.submit'，form）.removeAttr（'disabled'）；
if（data.match（'success'）！=null）
$（'.message'，form.show（）.delay（5000）.fadeOut（）；
});
});
返回false；
});
});

您的标记存在许多问题。事实证明，我懒得读它。它很混乱，到处都有访问线，使用内联样式，使用

换行。所有这些问题都必须解决。好的、整洁的代码在将来会给您带来更少的麻烦。我也可能会解决你的问题。我只想同意@Truth-你的js格式很好，但是为了爱世界上所有美好和神圣的格式（还有缩进！！！）你的html，从现在开始，一直如此。它使这些小家伙变得更聪明

jQuery(document).ready(function() {
    $('.contactform').submit(function() {
        var action = $(this).attr('action');
        var form = this;
        $('.submit', this).attr('disabled', 'disabled').after(
              '<img src="assets/ajax-loader.gif" class="loader" />');
        $('.message', this).slideUp(750, function() {
            $(this).hide();
            $.post(action, {
                name: $('.name', form).val(),
                email: $('.email', form).val(),
                phone: $('.phone', form).val(),
                dayin: $('.dayin', form).val(),
                dayout: $('.dayout', form).val(),
                comments: $('.comments', form).val(),
                verify: $('.verify', form).val()
            },
            function(data) {
                $('.message', form).html(data);
                $('.message', form).slideDown('slow');
                $('img.loader', form).fadeOut('fast', function() {
                    $(this).remove();
                });
                $('.submit', form).removeAttr('disabled');
                if (data.match('success') != null)
                $('.message', form).show().delay(5000).fadeOut();
            });
        });
        return false;
    });
});