jQuery Mobile "Same as Billing" address checkbox
I was having some trouble using jQuery Mobile and getting the standard sign-up form with Billing / Delivery address fields with a check-box to populate Delivery if same as billing to work.
Eventually I came up with this:
$("#samelabel").click(function() {
if ($('#same').is(':checked')) {
var address = $('#address').val(); $('#deladdress').val(address);
var suburb = $('#suburb').val(); $('#delsuburb').val(suburb);
var state = $("#state option:selected").val(); $("#delstate option[value='"+state+"']").attr('selected', 'selected'); $('#delstatecontext .ui-btn-text').text(state);
var postcode = $('#postcode').val(); $('#delpostcode').val(postcode);
var country = $('#country').val(); $('#delcountry').val(country);
} else {
$('#deladdress').val('');
$('#delsuburb').val('');
$("#state option:selected").attr('selected', '');
$('#delstatecontext .ui-btn-text').text('SELECT');
$('#delpostcode').val('');
$('#delcountry').val('');
}
});
The transfer of values from text-box to text-box was pretty straight forward but jQuery mobile replaces the label in a select list with crap loads of markup. I was trying to use .closest() to come up with a way of replacing the <span> attribute with class of .ui-btn-text but I couldn't get it.
Here is the HTML to go with the above js:
<h2>Billing Address</h2>
<div data-role="fieldcontain"><label for="address">Address</label><input type="text" name="address" id="address" required /></div>
<div data-role="fieldcontain"><label for="suburb">Suburb</label><input type="text" name="suburb" id="suburb" required /></div>
<div data-role="fieldcontain">
<label for="state">State</label>
<select name="state" id="state" required>
<option value="">SELECT</option>
<option value="NSW">NSW</option>
<option value="ACT">ACT</option>
<option value="QLD" >QLD</option>
<option value="VIC">VIC</option>
<option value="TAS">TAS</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
</select>
</div>
<div data-role="fieldcontain"><label for="postcode">Postcode</label><input type="number" name="postcode" id="postcode" required /></div>
<div data-role="fieldcontain"><label for="country">Country</label><input type="text" name="country" id="country" required /></div>
<h2>Delivery Address</h2>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Delivery address same as billing</legend>
<input type="checkbox" name="same" id="same" class="custom" value="1" />
<label for="same" id="samelabel">Same as billing address?</label>
</fieldset>
</div>
<div data-role="fieldcontain"><label for="deladdress">Address</label><input type="text" name="deladdress" id="deladdress" required /></div>
<div data-role="fieldcontain"><label for="delsuburb">Suburb</label><input type="text" name="delsuburb" id="delsuburb" required /></div>
<div data-role="fieldcontain" id="delstatecontext">
<label for="delstate">State</label>
<select name="delstate" id="delstate" required>
<option value="">SELECT</option>
<option value="NSW">NSW</option>
<option value="ACT">ACT</option>
<option value="QLD" >QLD</option>
<option value="VIC">VIC</option>
<option value="TAS">TAS</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
</select>
</div>
<div data-role="fieldcontain"><label for="delpostcode">Postcode</label><input type="number" name="delpostcode" id="delpostcode" required /></div>
<div data-role="fieldcontain"><label for="delcountry">Country</label><input type="text" name="delcountry" id="delcountry" required /></div>
Remember this is for jQuery Mobile so if anyone has any better way of achieving this within the jQuery mobile framework please let me know.
scripts required:
jquery.mobile-1.0a3.css
code.jquery.com/jquery-1.5.min.js
jquery.mobile-1.0a3