当前位置： 文江博客话题详情

ajax表单提交问题

发布于 2024-10-28 07:45:55 字数 8586 浏览 1 评论 0原文

下面是我用来尝试提交表单的代码。我在 firebug 中收到以下错误：

$("#submit").ajaxForm 不是函数

但是，表单将提交但会进行测试。 php 页面并且不显示成功 div..

非常感谢任何帮助。

<head>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#submit').ajaxForm(function() { 
                $('form#submit').fadeOut(function(){$('div.success').fadeIn();}); 
            }); 
        }); 
</script>
<script src="jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen">
<style>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:360px;
padding:12px;
}
.error{
margin:0 auto;
width:360px;
padding:12px;
}
.success{
margin:0 auto;
width:360px;
padding:12px;
}



/* ----------- stylized ----------- */
#errored{
border:solid 2px #FAB6C2;
background:#FDE4E1;
font-weight: bold;

}
#successStyle{
border:solid 2px #C0D27B;
background:#E6EFC2;
font-weight: bold;

}
#stylized{
border:solid 2px #EE901F;
background:#FAB766;
}

.LV_valid {
    color:#00CC00;
}

.LV_invalid {
    color:#CC0000;
}

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
    border: 1px solid #00CC00;
}

.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
    border: 1px solid #CC0000;
}

</style>
    <style type="text/css" media="screen">
  body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
padding: 40px;
  }
  h1 {
margin-top: 0;
  }
  ul {
list-style: none;
padding: 0;
margin: 0;
  }
  li {
margin-bottom: 20px;
clear: both;
  }
  label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
clear: both;
  }
</style>
 </head>
<body>
<form id="submit" method="post" action="test.php"> 
<br>
<div id="stylized" class="myform">
 <ul>
    <li><label>Name:</label><input type="text" id="name" name="name" size="40"/></li>
    <script type='text/javascript'> 
            var name = new LiveValidation('name');
            name.add(Validate.Presence, { failureMessage: ' Name required!' });
            name.add( Validate.Length, { minimum: 2 } );
              </script>
    <li><label>Email:</label><input type="text" id="email" name="email" size="40"/></li>
    <script type='text/javascript'> 
            var email = new LiveValidation('email');
            email.add(Validate.Presence, { failureMessage: '    Email required!' });
            email.add( Validate.Email );
              </script> 
    <li><label>Password:</label><input type="text" id="password" name="password" size="40"/></li>
    <script type='text/javascript'> 
            var password = new LiveValidation('password');
            password.add(Validate.Presence, { failureMessage: ' Password required!' });
            password.add( Validate.Length, { minimum: 6 } );
    </script>   
              <li><label>Verify Password:</label><input type="text" id="verifypassword" name="verifypassword" size="40"/></li>
    <script type='text/javascript'> 
            var verifypassword = new LiveValidation('verifypassword');
            verifypassword.add(Validate.Presence, { failureMessage: '   Password required!' });
            verifypassword.add( Validate.Length, { minimum: 6 } );
            verifypassword.add( Validate.Confirmation, { match: 'password' } );
    </script>   
              <li><label>Company:</label><input type="text" id="custom1" name="custom1" size="40"/></li>
    <script type='text/javascript'> 
            var custom1 = new LiveValidation('custom1');
            custom1.add(Validate.Presence, { failureMessage: '  Company required!' });
              </script>
              <li><label>Country:</label><input type="text" id="custom2" name="custom2" size="40"/></li>
    <script type='text/javascript'> 
            var custom2 = new LiveValidation('custom2');
            custom2.add(Validate.Presence, { failureMessage: '  Country required!' });
              </script> 
              <li><label>Job Title:</label><input type="text" id="custom3" name="custom3" size="40"/></li>
    <script type='text/javascript'> 
            var custom3 = new LiveValidation('custom3');
            custom3.add(Validate.Presence, { failureMessage: '  Job Title required!' });
              </script>  
              <li><label>Telephone:</label><input type="text" id="custom4" name="custom4" size="40"/></li>
    <script type='text/javascript'> 
            var custom4 = new LiveValidation('custom4');
            custom4.add(Validate.Presence, { failureMessage: '  Telephone required!' });
              </script>   
              <li><label>Address:</label><input type="text" id="custom5" name="custom5" size="40"/></li>
    <script type='text/javascript'> 
            var custom5 = new LiveValidation('custom5');
            custom5.add(Validate.Presence, { failureMessage: '  Address required!' });
              </script>       
              <li><label>City:</label><input type="text" id="custom6" name="custom6" size="40"/></li>
    <script type='text/javascript'> 
            var custom6 = new LiveValidation('custom6');
            custom6.add(Validate.Presence, { failureMessage: '  City required!' });
              </script>  
              <li><label>State:</label><input type="text" id="custom7" name="custom7" size="40"/></li>
    <script type='text/javascript'> 
            var custom7 = new LiveValidation('custom7');
            custom7.add(Validate.Presence, { failureMessage: '  State required!' });
              </script>
              <li><label>Postal Code:</label><input type="text" id="custom8" name="custom8" size="40"/></li>
    <script type='text/javascript'> 
            var custom8 = new LiveValidation('custom8');
            custom8.add(Validate.Presence, { failureMessage: '  Postal Code required!' });
              </script> 
              <li><label>What programs and genres are you interested in?</label><input type="text" id="custom9" name="custom9" size="40"/></li>
    <script type='text/javascript'> 
            var custom9 = new LiveValidation('custom9');
            custom9.add(Validate.Presence, { failureMessage: '  Interest required!' });
              </script>     
        <li>
         <label>Terms and Conditions:</label><textarea name="terms" readonly='readonly' cols='40' rows='6'>Terms of Use</textarea>
        </li>
        <li>
          <label> I have read and agree to the terms and conditions.</label><input name="custom10" id="custom10" type="checkbox" />
        </li>
       <li>
         <button type="submit">Register</button>
      </li>
</ul>
</div>
</form>
<div class="success" style="display: none;">
    <div id="successStyle">
    Thank you for submitting your request.<br><br>It will be reviewed shortly and a confirmation e-mail sent to you.
</div>
</body>
</html>
原文

Below is the code that I am using to try to submit a form.. I am getting the following error in firebug:

$("#submit").ajaxForm is not a function

However, the form will submit but go to the test.php page and does not show the success div..

Any help is very much appreciated.

<head>
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#submit').ajaxForm(function() { 
                $('form#submit').fadeOut(function(){$('div.success').fadeIn();}); 
            }); 
        }); 
</script>
<script src="jquery.uniform.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen">
<style>
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:360px;
padding:12px;
}
.error{
margin:0 auto;
width:360px;
padding:12px;
}
.success{
margin:0 auto;
width:360px;
padding:12px;
}



/* ----------- stylized ----------- */
#errored{
border:solid 2px #FAB6C2;
background:#FDE4E1;
font-weight: bold;

}
#successStyle{
border:solid 2px #C0D27B;
background:#E6EFC2;
font-weight: bold;

}
#stylized{
border:solid 2px #EE901F;
background:#FAB766;
}

.LV_valid {
    color:#00CC00;
}

.LV_invalid {
    color:#CC0000;
}

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active,
.fieldWithErrors input.LV_valid_field,
.fieldWithErrors textarea.LV_valid_field {
    border: 1px solid #00CC00;
}

.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active,
.fieldWithErrors input.LV_invalid_field,
.fieldWithErrors textarea.LV_invalid_field {
    border: 1px solid #CC0000;
}

</style>
    <style type="text/css" media="screen">
  body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
padding: 40px;
  }
  h1 {
margin-top: 0;
  }
  ul {
list-style: none;
padding: 0;
margin: 0;
  }
  li {
margin-bottom: 20px;
clear: both;
  }
  label {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
display: block;
margin-bottom: 3px;
clear: both;
  }
</style>
 </head>
<body>
<form id="submit" method="post" action="test.php"> 
<br>
<div id="stylized" class="myform">
 <ul>
    <li><label>Name:</label><input type="text" id="name" name="name" size="40"/></li>
    <script type='text/javascript'> 
            var name = new LiveValidation('name');
            name.add(Validate.Presence, { failureMessage: ' Name required!' });
            name.add( Validate.Length, { minimum: 2 } );
              </script>
    <li><label>Email:</label><input type="text" id="email" name="email" size="40"/></li>
    <script type='text/javascript'> 
            var email = new LiveValidation('email');
            email.add(Validate.Presence, { failureMessage: '    Email required!' });
            email.add( Validate.Email );
              </script> 
    <li><label>Password:</label><input type="text" id="password" name="password" size="40"/></li>
    <script type='text/javascript'> 
            var password = new LiveValidation('password');
            password.add(Validate.Presence, { failureMessage: ' Password required!' });
            password.add( Validate.Length, { minimum: 6 } );
    </script>   
              <li><label>Verify Password:</label><input type="text" id="verifypassword" name="verifypassword" size="40"/></li>
    <script type='text/javascript'> 
            var verifypassword = new LiveValidation('verifypassword');
            verifypassword.add(Validate.Presence, { failureMessage: '   Password required!' });
            verifypassword.add( Validate.Length, { minimum: 6 } );
            verifypassword.add( Validate.Confirmation, { match: 'password' } );
    </script>   
              <li><label>Company:</label><input type="text" id="custom1" name="custom1" size="40"/></li>
    <script type='text/javascript'> 
            var custom1 = new LiveValidation('custom1');
            custom1.add(Validate.Presence, { failureMessage: '  Company required!' });
              </script>
              <li><label>Country:</label><input type="text" id="custom2" name="custom2" size="40"/></li>
    <script type='text/javascript'> 
            var custom2 = new LiveValidation('custom2');
            custom2.add(Validate.Presence, { failureMessage: '  Country required!' });
              </script> 
              <li><label>Job Title:</label><input type="text" id="custom3" name="custom3" size="40"/></li>
    <script type='text/javascript'> 
            var custom3 = new LiveValidation('custom3');
            custom3.add(Validate.Presence, { failureMessage: '  Job Title required!' });
              </script>  
              <li><label>Telephone:</label><input type="text" id="custom4" name="custom4" size="40"/></li>
    <script type='text/javascript'> 
            var custom4 = new LiveValidation('custom4');
            custom4.add(Validate.Presence, { failureMessage: '  Telephone required!' });
              </script>   
              <li><label>Address:</label><input type="text" id="custom5" name="custom5" size="40"/></li>
    <script type='text/javascript'> 
            var custom5 = new LiveValidation('custom5');
            custom5.add(Validate.Presence, { failureMessage: '  Address required!' });
              </script>       
              <li><label>City:</label><input type="text" id="custom6" name="custom6" size="40"/></li>
    <script type='text/javascript'> 
            var custom6 = new LiveValidation('custom6');
            custom6.add(Validate.Presence, { failureMessage: '  City required!' });
              </script>  
              <li><label>State:</label><input type="text" id="custom7" name="custom7" size="40"/></li>
    <script type='text/javascript'> 
            var custom7 = new LiveValidation('custom7');
            custom7.add(Validate.Presence, { failureMessage: '  State required!' });
              </script>
              <li><label>Postal Code:</label><input type="text" id="custom8" name="custom8" size="40"/></li>
    <script type='text/javascript'> 
            var custom8 = new LiveValidation('custom8');
            custom8.add(Validate.Presence, { failureMessage: '  Postal Code required!' });
              </script> 
              <li><label>What programs and genres are you interested in?</label><input type="text" id="custom9" name="custom9" size="40"/></li>
    <script type='text/javascript'> 
            var custom9 = new LiveValidation('custom9');
            custom9.add(Validate.Presence, { failureMessage: '  Interest required!' });
              </script>     
        <li>
         <label>Terms and Conditions:</label><textarea name="terms" readonly='readonly' cols='40' rows='6'>Terms of Use</textarea>
        </li>
        <li>
          <label> I have read and agree to the terms and conditions.</label><input name="custom10" id="custom10" type="checkbox" />
        </li>
       <li>
         <button type="submit">Register</button>
      </li>
</ul>
</div>
</form>
<div class="success" style="display: none;">
    <div id="successStyle">
    Thank you for submitting your request.<br><br>It will be reviewed shortly and a confirmation e-mail sent to you.
</div>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

爱冒险 2024-11-04 07:45:55

如果 ajax 提交不起作用，则表单将以非 ajax 形式提交。

确保您已包含必要的 jquery.js 以及该功能所需的任何插件。

另外，请三次检查以下代码是否有语法错误等：

$('#submit').ajaxForm(function() { 
    $('form#submit').fadeOut(function(){$('div.success').fadeIn();}); 
});

我会首先注释掉 $('form#submit')... 部分。

The form will submit as non-ajax if the ajax submit doesn't work.

Make sure that you have included the necessary jquery.js and any plugins needed for the function.

Also, triple check the following code for syntax errors and such:

$('#submit').ajaxForm(function() { 
    $('form#submit').fadeOut(function(){$('div.success').fadeIn();}); 
});

I would comment out the $('form#submit')... part first.

回复 原文
~没有更多了~

关于作者

三五鸿雁

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文