How to Submit Form Given Specific Json Response
- by dentalhero
I'm new to Json, so please excuse the newb question.
I have a form in which I'm conducting an Ajax post to submit address information to a backend script for validation.
Here's the form:
<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) <span id="charLeft"></span> 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 >" alt="Continue to Next Step" tabindex="20"/>
</div>
</fieldset>
</form>
AJAX Call
Here's the AJAX call:
$(function() {
$("#Forms").submit(function() {
$.ajax({
type: 'post',
url: 'WebCatPageServer.exe',
dataType : 'json',
data: $("#Forms").serialize(),
complete:function(data){
alert(data);
}
});
return false;
});
});
JSON Response
Here's the JSON response:
{"DidValidate":true,"Company Name":"A ACTION AIR*","AddrLine1":"5241 YANCEYVILLE","AddrLine2":"","City":"COLUMBIA","State":"SC","Zip":"","Modified":false,"AddressError":false,"ZipError":false}
Question:
How do I submit the form programatically if both AddressError and ZipError return with a false?
