条件Ajax调用

时间：2012-11-13 02:52:19

标签： jquery ajax json

我有一个脚本执行客户端验证，然后触发AJAX帖子以将表单字段值提交到外部地址验证程序 - 然后返回JSON响应。

我在表单中有一个选择字段，允许某人手动输入他们的地址。我在这个选择选项中添加了一类“手册”。否则，他们可以选择任意数量的预定义地址。预定义的地址没有与之关联的类。

如果选择了预定义的选项，我不希望激活AJAX帖子。仅当select选项具有手动类时。但是，我想保留客户端验证。

这是我认为可行的：

if (!$("#ShipTos option:selected").hasClass("manual"))
    {
        $("#Forms").submit();
        return false;
    }

表单HTML 

    <form name="Form" id="Forms" method="post" action="WebCatPageServer.exe" class="uniForm">
     <input name="IsAjax" type="hidden" value="Yes" />
    <input name="Action" type="hidden" value="SHIPTOVALIDATE"/>
    <!-- <input name="Action" type="hidden" value="VerifyOrder"/>-->


<fieldset class="inlineLabels top">
   <h2>Order Details</h2>
    <div class="ctrlHolder first">
    <label for="orderdesc">Order Description</label>
       <input name="Order Desc" id="OrderDesc" type="text" class="textInput small" tabindex="1" value="SPI_PlaceOrder_Desc"/>
    </div>
       <div class="ctrlHolder">
      <label for="po">PO # <span class="redasterisk">*</span></label>
      <input name="Cust Po" id="PoJobNo" type="text" class="textInput small required" maxlength="20" tabindex="2" value="SPI_PlaceOrder_PONum"/>
    </div>
<!--    <div class="ctrlHolder">
      <label for="jobname">Job Name</label>
      <input name="Job Name" id="CustJobName" type="text" class="textInput small" maxlength="15" tabindex="3" value="SPI_PlaceOrder_JobName"/>
    </div> -->
    <div class="ctrlHolder">
      <label for="shipvia">Ship Via <span class="redasterisk">*</span></label>
      <select name="Ship Via" id="shipvia"  class="selectInput small required"  tabindex="4"/>
       <option value="" class="default">Select Ship Method</option>
        SPI_ShipVia
        </select>   
    </div>

    <div class="ctrlHolder" id="pickupdate">
    <label for="datepickup">Requested Pickup Date <span class="redasterisk">*</span></label>
    <input name="datepickup" id="datepickup" type="text" class="textInput small"  tabindex="5" value="SPI_PlaceOrder_DateReq">
    </div>

    <div class="ctrlHolder" id="shipdate">
    <label for="dateship">Requested Delivery Date <span class="redasterisk">*</span></label>
    <input name="dateship" id="dateship" type="text"  class="textInput small" value="" tabindex="6">
    </div>

    <div class="ctrlHolder" id="shipto">
     <label for="ShipTo">Ship To <span class="redasterisk">*</span></label>
    <select name="ShipTos" id="ShipTos" class="selectInput auto required" tabindex="7">
       <option value="">Select an Option</option>
       <option value="ShipToManual" class="manual">Manually Enter Address</option>
    SPI_ShipToList
    </select>
    <br />
    </div>
</fieldset>

 <fieldset class="inlineLabels" id="shipinfo">
   <h2>Shipping Information</h2>
    <div class="ctrlHolder first">
      <label for="YourName">Your Name <span class="redasterisk">*</span></label>
      <input name="Your Name" id="Your_Name" type="text" class="textInput small required"  tabindex="8" value="SPI_CustContact" />
    </div>
    <div class="ctrlHolder">
      <label for="CompanyName">Company Name <span class="redasterisk">*</span></label>
      <input name="Company Name" id="Company Name" type="text" class="textInput small required"  tabindex="9" value="SPI_CustCName"/>
    </div>
    <div class="ctrlHolder">
      <label for="Address1">Address 1 <span class="redasterisk">*</span></label>
      <input name="Address_1" id="Address_1" type="text" maxlength="30"  class="textInput small required" tabindex="10" value="SPI_CustAddr1"/>
    </div>
    <div class="ctrlHolder">
      <label for="Address2">Address 2</label>
      <input name="Address_2" id="Address_2" type="text" maxlength="30"  class="textInput small" tabindex="11" value="SPI_CustAddr2"/>
    </div>
    <div class="ctrlHolder">
      <label for="City">City <span class="redasterisk">*</span></label>
     <input name="City"  id="City" type="text" maxlength="25" class="textInput small required" tabindex="12" value="SPI_CustCity"/>
    </div>
    <div class="ctrlHolder">
      <label for="State">State <span class="redasterisk">*</span></label>
     <select name="State" id="State" class="selectInput small required" tabindex="13">
              <option value="">Select State</option>
              SPI_StateList 
            </select>
    </div>
    <div class="ctrlHolder">
      <label for="ZipCode">Zip Code <span class="redasterisk">*</span></label>
      <input name="Zip"  id="Zip" type="text" maxlength="6" class="textInput small required zipcode"  tabindex="14" value="SPI_CustZip"/>   
    </div>
    <div class="ctrlHolder">
      <label for="Phone">Phone <span class="redasterisk">*</span></label>
      <input name="Phone Number"  id="Phone" type="text" class="textInput small required phone" alt="phone-us"  tabindex="15" value="SPI_CustPhone"/>
    </div>
    <div class="ctrlHolder">
      <label for="Fax">Fax</label>
      <input name="FaxNumber"  id="Fax Number" type="text" class="textInput small fax" alt="phone-us"  tabindex="16" value="SPI_CustFax"/>
    </div>

    <div class="ctrlHolder">
      <label for="">E-mail <span class="redasterisk">*</span></label>
      <input name="Email" id="Email" type="text" class="textInput small required email"  tabindex="17" value="SPI_CustEmail"/>
    </div>
    </fieldset>

<fieldset class="inlineLabels">
<h2>Order/Shipping Notes</h2>
<!-- SPI_Html_Optional_OrdNotes
<div class="ctrlHolder first">
      <label for="notes">Order Notes </label>
      <textarea name="OrderNotes" id="ta" cols="26" rows="7" tabindex="18"></textarea><br />
      <p class="formHint"><b>(Maximum characters: 175) &nbsp; <span id="charLeft"></span>  &nbsp; Characters left</b><br />
(Cross streets, special instructions, etc.)</p>
    <br />
    </div>
SPI_Html_Optional_OrdNotes -->
<!-- SPI_Html_Require_OrdNotes
         <div class="ctrlHolder">
      <label for="notes">Order Notes (Cross streets, etc.) <span class="redasterisk">*</span></label>
      <textarea name="OrderNotes" id="notes" cols="26" rows="7" tabindex="19"> </textarea>
        <p class="formHint">(Cross streets, special instructions, etc.)</p>
    <br />
    </div>  
SPI_Html_Require_OrdNotes -->
</fieldset>
<fieldset class="inlineLabels">
<h2>Continue To Next Step</h2>
<div class="buttonHolder">
<label for="freightmsg">**Applicable freight charges will be applied at the time of invoicing.**</label>
<input name="continuetocheckout" type="submit" class="button red smallrounded" value="Continue &gt;" alt="Continue to Next Step" tabindex="20"/>
</div>
</fieldset>
</form>

验证＆amp; AJAX函数 

jQuery(document).ready(function($) {
  $.metadata.setType("attr", "validate");
  $("#Forms").validate({
    rules: {
      datepickup: {
      required: true,
      date: true
    },
    dateship: {
      required: true,
      date: true
  }}
});
});

$(function() {
  //$("#Forms").submit(function() {
  $("input[name='continuetocheckout']").click(function() {
    if (!$("#Forms").valid())
      return false;

if (!$("#ShipTos option:selected").hasClass("manual"))
{
    $("#Forms").submit();
    return false;
}

    $.ajax({
      type: 'post',
      url: 'WebCatPageServer.exe',
      dataType : 'json',
      data: $("#Forms").serialize(),
      success:function(data){
       $.each(data, function(index, val) {
         $("input[name='"+index+"'], select[name='"+index+"']").val(val);
       });
       if (data.AddressError==false && data.ZipError == false )
       {
          $("input[name='Action']").val('VerifyOrder');
          $("input[name='IsAjax']").val("No");
          $("#Forms").submit();
         return true;
       }
       else
       {
          if(data.ZipError==true && data.AddressError==false)
          {
            $("input[name='City'], select[name='State'], input[name='Zip']").addClass('error');
            $("input[name='City']").after('<label class="error" for="Zip" generated="true">This City/State/Zip is not valid. Please correct.</label>')
          }
          if(data.AddressError==true && data.ZipError==true)
          {
            $("input[name='City'], select[name='State'], input[name='Zip'], input[name='Address_1']").addClass('error');
            $("input[name='Address_1']").after('<label class="error" for="Address_1" generated="true">This address is not valid. Please correct.</label>')
          }
          return false;
       }
    }
    });
    return false;
  });
});
</script>

感谢您的帮助！

0 个答案:

没有答案
相关问题
最新问题