如何提交给定特定Json响应的表单

时间：2012-11-12 04:56:04

标签： jquery ajax json

我是Json的新手，请原谅新问题。

我有一个表单，我正在进行Ajax发布，将地址信息提交给后端脚本进行验证。

以下是表格：

<form name="Form" id="Forms" method="post" action="WebCatPageServer.exe" class="uniForm">
<input name="Action" type="hidden" value="SHIPTOVALIDATE"/>
<input name="IsAjax" type="hidden" value="Yes"/>
<!-- <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=""/>
</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="dgnfg"/>
    </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=""/>
    </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>
        <option value="OT - Our Truck" class="del" selected>Our Truck</option>
<option value="WC - Will Call" class="pick">Will Call</option>

        </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="11/09/2012">
    </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>
    <option value="0">A ACTION AIR*, 5241 YANCEYVILLE, COLUMBIA, SC 29214-0001</option>
<option value="1">A ACTION AIR*, 649 spring lane, sanford, NC 27330</option>
<option value="2">A ACTION AIR*, 1313 south briggs avenue, durham, NC 27703</option>
<option value="3">A ACTION AIR*, 112 cricket hill lane, cary, NC 27513</option>
<option value="4">A ACTION AIR*, 2911 duke homestead road, durham, NC 27705</option>
<option value="5">A ACTION AIR*, chickem poop, atlanta, GA 60609</option>

    </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="" />
    </div>
    <div class="ctrlHolder">
      <label for="CompanyName">Company Name <span class="redasterisk">*</span></label>
      <input name="Company Name" id="CompanyName" type="text" class="textInput small required"  tabindex="9" value="A ACTION AIR*"/>
    </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="5241 YANCEYVILLE"/>
    </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=""/>
    </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="COLUMBIA"/>
    </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>
              <option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachussetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC" selected>South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>

            </select>
    </div>
    <div class="ctrlHolder">
      <label for="ZipCode">Zip Code <span class="redasterisk">*</span></label>
      <input name="Zip"  id="Zip" type="text" maxlength="10" class="textInput small required zipcode"  tabindex="14" value=""/> 
    </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="(336)954-5009"/>
    </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=""/>
    </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=""/>
    </div>
    </fieldset>

<fieldset class="inlineLabels">
<h2>Order/Shipping Notes</h2>
<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>


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

AJAX致电

这是AJAX电话：

$(function() {
$("#Forms").submit(function() {
$.ajax({
  type: 'post',
  url: 'WebCatPageServer.exe',
  dataType : 'json',
  data: $("#Forms").serialize(),
  complete:function(data){
 alert(data);
}
});
    return false;
});
});

JSON响应 这是JSON响应：

{"DidValidate":true,"Company Name":"A ACTION AIR*","AddrLine1":"5241 YANCEYVILLE","AddrLine2":"","City":"COLUMBIA","State":"SC","Zip":"","Modified":false,"AddressError":false,"ZipError":false}

问题： 如果AddressError和ZipError都返回false，那么如何以编程方式提交表单？

1 个答案:

答案 0 :(得分：0)

这应该有效。它使用的事实是，通过javascript的submit（）提交的表单不会再次进行验证。

$(function() {
  $("#Forms").submit(function() {
    document.Form.Action.value="SHIPTOVALIDATE";
    $.ajax({
      type: 'post',
      url: 'WebCatPageServer.exe',
      dataType : 'json',
      data: $("#Forms").serialize(),
      complete:function(data){
        alert(data);
        if (validation succeeded) { // put here your rules for returned data valid.
          document.Form.Action.value="DOTHEREALACTION";
          document.Form.submit ();
        }
      }
    });
    return false;
 });
});
相关问题
最新问题