jquery - 特定の Json レスポンスを指定してフォームを送信する方法

Question

私は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 を返した場合、フォームをプログラムで送信するにはどうすればよいですか?

score 0 · Accepted Answer

これはうまくいくはずです。これは、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;
 });
});

jquery - 特定の Json レスポンスを指定してフォームを送信する方法

1 に答える 1

Related

Reference