ajax表单提交问题

时间:2011-04-01 18:27:11

标签: ajax jquery fancybox

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

$(“#submit”)。ajaxForm不是函数

但是,表单会提交但是转到test.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>

1 个答案:

答案 0 :(得分:0)

如果ajax提交不起作用,表单将作为非ajax提交。

确保您已包含必要的jquery.js以及该函数所需的所有插件。

另外,请检查以下代码是否存在语法错误等:

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

我会首先评论$('form#submit')...部分。