how to get the input text value which is inside the table column in Dialog in Karate - ui-automation

I got a table like below that renders in the dialog box. I am trying to capture the value of input which is inside the column.
The Xpath is /html/body/div[9]/div[2]/table/tbody/tr[8]/td[2]/table/tbody/tr[1]/td[1]/input'
I did try multiple ways to get required value but could't get it so someone help me how to capture input value which is inside the particular , full xpath and css path is not working.
<table>
<tbody>
<tr>
<td>Room type:</td>
<td><b>
Deluxe Balcony Riverview - All Inclusive
</b>
</td>
</tr>
<tr>
<td>Date:</td>
<td><b>
01 Mar 2022
</b>
</td>
</tr>
<tr>
<td>Minimum Stay:</td>
<td>
<input name="txtMinimumStay" type="text" value="1" id="txtMinimumStay" class="helper" title="The minimum nights a guest must stay in this room type" style="width:40px;">
night(s)
</td>
</tr>
<tr>
</tr>
<tr>
<td>Maximum Stay:</td>
<td>
<input name="txtMaximumStay" type="text" value="0" id="txtMaximumStay" class="helper" title="The maximum nights a guest can stay in this room type" style="width:40px;">night(s)
</td>
</tr>
<tr>
<td>Sold:
</td>
<td><b>
0
room(s)</b>
</td>
</tr>
<tr>
<td>Allocation:</td>
<td>
<table>
<tbody>
<tr>
<td width="70px">
<input name="textAllocation" value="0" id="textAllocation" type="text" style="width: 50px">
</td>
<td style="font-size: 9px">Extra adult rate (per night):</td>
<td>
<input name="txtAdultPrice" type="text" value="21" maxlength="4" id="txtAdultPrice" class="helper" title="Extra person charge for adults" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator1" style="display:none;">Please only enter a whole number for the adult rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Rate:</td>
<td>
<br>
<table>
<tbody>
<tr>
<td width="70px">
<input name="txtQuickRate" type="text" id="txtQuickRate" style="width: 50px;" value="85">
$AUD
</td>
<td style="font-size: 9px">Extra child 1 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChildPrice" type="text" value="15" maxlength="4" id="txtChildPrice" class="helper" title="Extra person charge for children 1" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator2" style="display:none;">Please only enter a whole number for the child 1 rate</span>
</td>
</tr>
<tr>
<td></td>
<td style="font-size: 9px">Extra child 2 rate (per night):</td>
<td>
</td>
<td>
<input name="txtChild2Price" type="text" value="7" maxlength="4" id="txtChild2Price" class="helper" title="Extra person charge for children 2" onchange="updateGuestCapacity(false)" style="width:40px;">
$AUD
<br>
<span id="Regularexpressionvalidator3" style="display:none;">Please only enter a whole number for the child 2 rate</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Availability Status:
</td>
<td>
<table id="rblStopSellDialog" cellspacing="0" cellpadding="0" style="font-size:8pt;border-collapse:collapse;">
<tbody>
<tr>
<td><input id="rblStopSellDialog_0" type="radio" name="rblStopSellDialog" value="0" checked="checked"><label for="rblStopSellDialog_0">Available</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_1" type="radio" name="rblStopSellDialog" value="1"><label for="rblStopSellDialog_1">Stop sell</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_2" type="radio" name="rblStopSellDialog" value="2"><label for="rblStopSellDialog_2">Closed to arrival</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_3" type="radio" name="rblStopSellDialog" value="3"><label for="rblStopSellDialog_3">Closed to departure</label></td>
</tr>
<tr>
<td><input id="rblStopSellDialog_4" type="radio" name="rblStopSellDialog" value="4"><label for="rblStopSellDialog_4">On Request</label></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Related

I have this code, when submited the form dont refresh, someone know how refresh after submit on october cms?

<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</form>

Protractor expect specific text siblings of selector

I have a table like this:
<table>
<tbody>
...
<tr>
<td>
<div class="radio-inline">
<input name="sms_provider" type="radio" value="2" id="2">
<label class="text-gray-dark" for="2"> </label>
</div>
</td>
<td data-label="Server name">ServerA3</td>
<td data-label="Description"></td>
<td data-label="Status">
<label class="text-success">
<clr-icon shape="check"></clr-icon>
Default
</label>
</td>
<td data-label="Actions">
<a href="http://example.com/public/smsconfigurations/2/edit" data-tooltip="Edit Server">
<clr-icon shape="pencil" size="22" style="width: 22px; height: 22px;"></clr-icon>
</a>
</td>
</tr>
...
</tbody>
</table>
Now I wanna to check ServerA3 has Default status or no. As matter of fact I expect ServerA3 has Default text as siblings. What should I do?
I try with this code, but it doesn't work:
expect(element(by.xpath('//td[contains(text(), "ServerA3")]')).getWebElement().getDriver().findElement(by.css('*[data-label="status"]')).getText()).toContain('Default');
var status = element(by.xpath('//tr[td[.="ServerA3"]]/td[#data-label="Status"]'))
.getAttribute('innerText');
expect(status).toEqual('Default')

To Get Text From A Locater Using Selenium IDE

<br>
<br>
To add new COT click on "Add New COT"
<div class="stepandbutton">
<div class="globalbuttoncell">
<a class="buttonlink blockpage" onclick="javascript:addnewcot();" href="#">Add New COT</a>
</div>
</div>
<input id="ComingFromForm" type="hidden" value="ComingFromForm" name="ComingFromForm">
<input id="priorCOT" type="hidden" value="" name="priorCOT">
<input id="rtncode" type="hidden" value="false" name="rtncode">
<input id="refresh" type="hidden" value="NO" name="refresh">
<input id="PDate" type="hidden" value="" name="PDate">
<table>
<thead>
<tr>
<th align="center"> *Trade Class</th>
<th align="center">*Description</th>
<th>Category </th>
<th>Exclude from AMP</th>
<th>Exclude from AMP 5i</th>
<th>Exclude from ASP</th>
<th>Exclude from BP</th>
<th>Exclude from NFAMP </th>
<th>Exclude from Texas </th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="center">
<input id="COT" class="data" type="text" value="" style="width:100px;" name="COT">
</td>
<td align="center">
<input id="Desc" class="data" type="text" value="" style="width:250px;" name="Desc">
</td>
<td align="center">
<select id="COTCategory" class="data small" name="COTCategory">
</td>
<td align="center">
<td align="center">
<td align="center">
<td align="center">
<td align="center">
<td align="center">
</tr>
</tbody>
</table>
</form>
<br>
<br>
I need to verify only ""To add new COT click on "Add New COT""" which is in the 3rd line is present.I have tried with //br[contains(text(),"To add new COT click on "Add New COT"")]. But it showing error that locator is not found.Please suggest another ways to verify it.
This is ugly but would "work":
<tr>
<td>verifyText</td>
<td>//body</td>
<td>*To add new COT click on "Add New COT"*</td>
</tr>
But as the commenter above mentions you don't want the br element. What you want to locate on is the element that you didn't provide that lives ABOVE the code you attached to. That would be best.

zurb ink email wrapper doesnt span across full width

I'm having issues with Zurb Ink's email. So it looks fine in desktop, however it there is this gap when it hits the media queries and it seems to be doing it with the containers when its stacked on top of each other. I want it to span the whole width.
http://i.stack.imgur.com/xygNK.png
Here is my code:
<table class="container" id="hero-container">
<!-- hero logo -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td id="hero-logo"><img id="logoImage" src="images/hero-logo.png" alt="Hero In The News" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero logo -->
<!-- hero image -->
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td><img id="headerImage" src="images/hero-img.png" alt="City of San Jose - Capital of Silicon Valley" /></td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- /hero image -->
<!-- hero main article -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="heading1 text-pad">Residents can Pace Energy Use <br/>with New Program</td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad"><p>The city of San Jose has implemented a program to help residents pace their water and energy consumption. </p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- button -->
<tr>
<td>
<table class="row">
<tr>
<td>
<div class="wrapper last">
<table class="twelve columns">
<tr>
<td class="text-pad link"><p>Read Full Article</p></td>
<td class="expander"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--/button -->
<!-- /hero main article -->
</table>
<!-- articles row 1 -->
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Energy Efficiency Program Ushers Green Jobs into Kern</h2>
<p>The green economy has arrived in Kern County, and not a moment...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Stockton Gets a New “HERO”</h2>
<p>From insulation to more efficient air conditioning to solar panels to...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /articles row 1-->
<!-- articles row 2 -->
<table class="container article-container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper article-wrapper">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Fresno estimates $56M from HERO program</h2>
<p>Officials with the City of Fresno expect to see more than $56 M...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last article-wrapper-last">
<table class="six columns article">
<tr>
<td class="text-pad">
<h2>Lompoc City Council approves HERO Program</h2>
<p>A new program that helps homeowners make energy and...</p>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Caveat: I am new to Ink myself. What "jumps out" at me is that you're using a container on the outside and multiple rows inside. For full width, swap the row and container classes --> so that the table with class row contains a table with class container.

Form has Disabled Inputs, How to make Processing Page not try to process disabled fields?

I have a form where I disable the Shipping address when they click the "Same as Billing address" checkbox via JQuery.
When the form is submitted, the disabled fields (shipping) obviously do not pass any data but my processing form is saying that those specific fields are undefined.
How can I make the processing form not look for the values of the disabled fields (shipping), if they are disabled?
HERE IS THE PROCESSING FORM:
<cfset orderno = #numberFormat(randrange(00001,99999), "00000")#>
<cfmail to="xxx" from="xxx" subject="xxxx ORDER No. #orderno#" server="xxx" username="xx" password="xxx" type="html">
<img src="http://www.mmprint.com/index_files/maillogo.jpg" width="500" height="85" /> <br /><br /> <font face="Arial" size="+3"><strong>NEW LIVE JOB - <font color="##FF0000">CMS-1500 BLANK </font> Form Order No. <cfoutput>#orderno#</cfoutput> </strong>
<table border="1" bordercolor="##660000" cellpadding="2" cellspacing="0">
<tr>
<td colspan="2"><h2>CMS-1500 Order Information:</h2></td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Quantity:</td><td align="left" valign="top">#form.qty#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Type:</td><td align="left" valign="top">#form.cctype#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">CC Number:</td><td align="left" valign="top">#form.ccnumber#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">CC Month:</td><td align="left" valign="top">#form.ccmonth#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">CC Year:</td><td align="left" valign="top">#form.ccyear#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">CSV:</td><td align="left" valign="top">#form.csv#</td>
</tr>
<!-- Billing Info -->
<tr>
<td><h2>Billing Information:</h2></td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Company Name:</td><td align="left" valign="top">#form.bconame#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">First Name:</td><td align="left" valign="top">#form.bfname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Last Name:</td><td align="left" valign="top">#form.blname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.baddress#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.baddress2#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.bcity#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.bstate#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.bzip#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Email:</td><td align="left" valign="top">#form.email#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Comments:</td><td align="left" valign="top">#form.comments#</td>
</tr>
</table>
<br />
<br />
<!-- SHIPPING INFO -->
<table border="1" bordercolor="##660000" cellpadding="2" cellspacing="0">
<tr>
<td><h2>Shipping Information:</h2></td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Company Name:</td><td align="left" valign="top">#form.coname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">First Name:</td><td align="left" valign="top">#form.fname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Last Name:</td><td align="left" valign="top">#form.lname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.address#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address 2:</td><td align="left" valign="top">#form.address2#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">City:</td><td align="left" valign="top">#form.city#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">State:</td><td align="left" valign="top">#form.state#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Zip:</td><td align="left" valign="top">#form.zip#</td>
</tr>
</table>
</font>
</cfmail>
<cfmail to="#form.email#" from="xxx" bcc="xxx" subject="Thank You for your order - No. #orderno#" server="xxx" username="xxx" password="xxx" type="html">
<p><img src="xxx" width="500" height="85" /></p>
<p><font face="Arial" size="+1"><strong><font color="##006600">Order Confirmation- </font>- No. <cfoutput>#orderno#</cfoutput> </strong>
</font></p>
<font face="Arial" size="1"><p>Your order for <cfoutput>#qty#</cfoutput>xxx has been successfully received.</p>
<p>If your order is received by 2PM (ET) they will ship the same day!</p>
<p>Questions or Comments? Please call us at 1-877-mmprint or 516-334-1603 or email info#mmprint.com </p></font>
<table border="1" bordercolor="##660000" cellpadding="2" cellspacing="0">
<tr>
<td><h2>Shipping Information:</h2></td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Company Name:</td><td align="left" valign="top">#form.coname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">First Name:</td><td align="left" valign="top">#form.fname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Last Name:</td><td align="left" valign="top">#form.lname#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address:</td><td align="left" valign="top">#form.address#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Address 2:</td><td align="left" valign="top">#form.address2#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">City:</td><td align="left" valign="top">#form.city#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">State:</td><td align="left" valign="top">#form.state#</td>
</tr>
<tr>
<td bgcolor="##CCCCCC" align="left" valign="top">Zip:</td><td align="left" valign="top">#form.zip#</td>
</tr>
</table>
</cfmail>
<cflocation url="thanks.cfm?name=#form.bfname#" addtoken="no">
HERE IS THE FORM ITSELF:
<form action="process.cfm" id="blank-form" method="post" class="vertical">
<div class="col_4 ">
<fieldset>
<legend>Choose Your Quantity:</legend>
<p>
<select id="qty" name="qty" size="4" data-validation="required" data-validation-error-msg="Please Select a Quantity." >
<option value="100 Blank">100 - Blank CMS 1500 </option>
<option value="250 Blank">250 - Blank CMS 1500 </option>
<option value="500 Blank ">500 - Blank CMS 1500 </option>
<option value="1000 Blank">1000 - Blank CMS 1500 </option>
</select>
</p> <div style="font-size:0.7em; text-align:right;">*plus shipping and handling</div>
</fieldset>
<!-- CREDIT CARD -->
<fieldset>
<legend><i class="icon-lock"></i> Payment Information </legend>
<label for="cctype">Type</label>
<select id="cctype" name="cctype" data-validation="required">
<option value="VISA">VISA</option>
<option value="MC">Mastercard</option>
<option value="AMEX">AMEX</option>
<option value="DISC">Discover</option>
</select>
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" data-validation="number" data-validation-error-msg="Please Enter a Valid Credit Card Number." >
<div class="col_5"> <label for="ccmonth">Expiration</label>
<select name="ccmonth" id="ccmonth" data-validation="required">
<option value = "1">January</option>
<option value = "2">February</option>
<option value = "3">March</option>
<option value = "4">April</option>
<option value = "5">May</option>
<option value = "6">June</option>
<option value = "7">July</option>
<option value = "8">August</option>
<option value = "9">September</option>
<option value = "10">October</option>
<option value = "11">November</option>
<option value = "12">December</option>
</select></div>
<div class="col_4"> <label for="ccyear">Year</label>
<select name="ccyear" id="ccyear" data-validation="required">
<option value = "2014" >2014</option>
<option value = "2015">2015</option>
<option value = "2016">2016</option>
<option value = "2017">2017</option>
<option value = "2018">2018</option>
<option value = "2019">2019</option>
<option value = "2020">2020</option>
</select></div>
<div class="col_3"><label for="csv" >CSV #</label>
<input type="text" name="csv" id="csv" data-validation="required" data-validation-error-msg=" "></div>
</fieldset>
<fieldset><legend>Email & Phone</legend>
<input type="text" placeholder="your#email.com" name="email" id="email" data-validation="email" data-validation-error-msg="Please enter a valid email where you can receive your order confirmation.">
<input type="text" placeholder="555-505-5050" name="phone" id="phone" data-validation="number" data-validation-error-msg="Please enter a phone number where we can contact you."></fieldset>
</div>
<div class="col_4">
<fieldset>
<legend>Billing Information</legend>
<p><input type="checkbox" id="sameasbilling"> Ship to Same As Billing Address</p>
<label for="bconame">Company Name</label>
<input type="text" id="bconame" name="bconame" minlength="2"/>
<label for="bfname">First Name</label>
<input type="text" id="bfname" name="bfname" minlength="2" data-validation="required"/>
<label for="blname">Last Name</label>
<input type="text" id="blname" name="blname" minlength="2" data-validation="required"/>
<label for="baddress">Address</label>
<input type="text" id="baddress" name="baddress" minlength="2" data-validation="required"/>
<label for="baddress2">Suite/Apt #</label>
<input type="text" id="baddress2" name="baddress2" />
<label for="bcity">City</label>
<input type="text" id="bcity" name="bcity" data-validation="required" />
<label for="bstate">State</label>
<input type="text" id="bstate" name="bstate" minlength="2" data-validation="required" />
<label for="bzip">Zip</label>
<input type="text" id="bzip" name="bzip" minlength="5" data-validation="required"/>
</fieldset>
</div>
<div class="col_4" id="shipping">
<fieldset>
<legend>Shipping Information</legend><br><br>
<label for="coname">Company Name</label>
<input type="text" id="coname" name="coname" minlength="2" />
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" minlength="2" data-validation="required"/>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" minlength="2" data-validation="required" />
<label for="address">Address</label>
<input type="text" id="address" name="address" minlength="2" data-validation="required"/>
<label for="address2">Suite/Apt #</label>
<input type="text" id="address2" name="address2" />
<label for="city">City</label>
<input type="text" id="city" name="city" data-validation="required"/>
<label for="state">State</label>
<input type="text" id="state" name="state" minlength="2" data-validation="required"/>
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" minlength="5" data-validation="required" />
</fieldset>
</div>
<div class="row">
<fieldset>
<legend>Comments | Special Instructions</legend>
<textarea id="comments" name="comments"></textarea>
<div class="right">
<button class="pop orange">Send the order!</button></div>
</form>
THE JQUERY:
<script>
$(document).ready(function() {
$('#sameasbilling').change(function(){
if ($('#sameasbilling').is(':checked')){
$('#shipping :input').addClass('disabled').prop('disabled', true).attr("value","Same As Billing");
} else {
$('#shipping :input').removeClass('disabled').prop('disabled', false).removeAttr("value");
}
});
$.validate();
})
</script>
I figured out that I can simply use
<cfparam name="form.name" default = "Default text">
to replace the missing fields when the form is processed.
I only accept this solution because my form is short. I'm sure there is a better way to do this for bigger forms that handle lots of data.
Hope this will help someone else.