Ajax表单不能正常工作

ajax form is not working how it should

本文关键字：工作常工作表单不能 Ajax 更新时间：2023-09-26

hello我一直在使用ajax的表单工作，但当它涉及到验证选择框

问题1)每次我让job_est值为空时，表单仍然被提交，就好像它被验证了一样

问题2)我可以在ajax中使用异步对不起我的写作技巧

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//if submit button is clicked
$('#submit').click(function () {        
    //Get the data from all the fields
    var name = $('input[name=name]');
            var l_name = $('input[name=l_name]');
            var phone = $('input[name=phone]');
    var email = $('input[name=email]');
            var postcode = $('input[name=postcode]');
            var house_number = $('input[name=house_number]');
            var street = $('input[name=street]');
            var job_est = $('select[name=job_est]');
    var comment = $('textarea[name=comment]');
    //Simple validation to make sure user entered something
    //If error found, add hightlight class to the text field
    if (name.val()=='') {
        name.addClass('hightlight');
        return false;
    } else name.removeClass('hightlight');
    if (l_name.val()=='') {
        l_name.addClass('hightlight');
        return false;
    } else l_name.removeClass('hightlight');
            if (phone.val()=='') {
        phone.addClass('hightlight');
        return false;
    } else phone.removeClass('hightlight');
    if (email.val()=='') {
        email.addClass('hightlight');
        return false;
    } else email.removeClass('hightlight');
            if (postcode.val()=='') {
        postcode.addClass('hightlight');
        return false;
    } else postcode.removeClass('hightlight');
            if (house_number.val()=='') {
        house_number.addClass('hightlight');
        return false;
    } else house_number.removeClass('hightlight');
            if (street.val()=='') {
        street.addClass('hightlight');
        return false;
    } else street.removeClass('hightlight');
            if (job_est.val()=='') {
        job_est.addClass('hightlight');
        return false;
    } else job_est.removeClass('hightlight');
    if (comment.val()=='') {
        comment.addClass('hightlight');
        return false;
    } else comment.removeClass('hightlight');
    //organize the data properly
    var data = 'name=' + name.val() + '&email=' + email.val() + '&phone=' + 
    phone.val() + '&comment='  + encodeURIComponent(comment.val());
    //disabled all the text fields
    $('.text').attr('disabled','true');
    //show the loading sign
    $('.loading').show();
    //start the ajax
    $.ajax({
        //this is the php file that processes the data and send mail
        url: "process.php", 
        //GET method is used
        type: "GET",
        //pass the data         
        data: data,     
        //Do not cache the page
        cache: false,
        //success
        success: function (html) {              
            //if process.php returned 1/true (send mail success)
            if (html==1) {                  
                //hide the form
                $('.form').fadeOut('slow');                 
                //show the success message
                $('.done').fadeIn('slow');
            //if process.php returned 0/false (send mail failed)
            } else alert('Sorry, unexpected error. Please try again later.');               
        }       
    });
    //cancel the submit button default behaviours
    return false;
    }); 
}); 
</script>
<body>

<div class="block">
<div class="done">
<b>Thank you !</b> We have received your message. 
</div>
<div class="form">
<form method="post" action="process.php">
<h4><u>Basic Contact Details</u></h4>
<div style="display: inline-block;" class="element">
    <label>Name</label><input type="text" name="name"/>
</div>
   <div style="display: inline-block;" class="element">
   <label>Last Name: </label><input type="text" name="l_name"/>
   </div>
   <div class="element">
    <label>Phone Number</label>
    <input type="text" name="phone"/>
    </div>
<div class="element">
    <label>Email</label>
    <input type="text" name="email"/>
</div>
<div style="display: inline-block;" class="element">
  <label>Postcode: </label><input type="text" name="postcode" size="10" maxlength="10">
</div>
<div style="display: inline-block;" class="element">
<label>House Number: </label><input type="text" name="house_number" size="3">
</div>
<div style="display: inline-block;" class="element">
  <label>Street Name: </label><input type="text" name="street">
</div>
<div style="display: inline-block;" class="element">
  <label>County:</label>
    <select>
      <option name="select">--SELECT--</option>
      <option name="bedford">Bedford</option>
      <option name="dunstable">Dunstable</option>
      <option name="luton">Luton</option>
    </select>
</div>
<h4><u>Job Details</u></h4>
<div class="element">
<label>You Would Like To Book A:</label>
<select name="job_est">
  <option name="select">--SELECT--</options>
  <option name="job">Job</option>
  <option name="est">Estimation</option>
</select>
</div>
<br/>
<div class="element">
<label>Service Your Booking:</label>
<select>
  <option name="select">--SELECT--</option>
  <option name="gardening">Gardening</option>
  <option name="landscaping">Landscaping</option>
  <option name="painting">Painting & Decorating</option>
  <option name="decking">Decking & Fencing</option>
</select>
</div>
<br/>
<div class="element">
    <label>Any Additional Information </label>
    <textarea name="comment" class="text textarea" /></textarea>
</div>
<div class="element">
    <input type="submit" id="submit"/>
    <div class="loading"></div>
</div>
</form>
</div>
</div>
<div class="clear"></div>

你应该把selectbox的name属性改成value

<select name="job_est">
  <option value="select">--SELECT--</options>
  <option value="job">Job</option>
  <option value="est">Estimation</option>
</select>

在javascript中，它应该是

if (job_est.val() == 'select') {
    job_est.addClass('hightlight');
    return false;
}