Populating form fields with comma seperated strings in unordered list onclick with jQuery/Javascript
- by RyanP13
Hi,
I have an address lookup system which returns addresses in an unordered list like so:
<p>Please select your address from the list below</p>
<div id="selectAddress">
<ul>
<li>HNO 412,addressLine2,addressLine8</li>
<li>HNO 413,addressLine2,addressLine8</li>
<li>HNO 414,addressLine2,addressLine8</li>
</ul>
</div>
When someone clicks on an li containing the address i use the folloqing jQuery to split it and populate the following form fields.
var $customerAddress = $("form#detailsForm input[name*='customerAddress']");
$("div#selectAddress ul li").click(function(){
$(this).removeClass("addressHover");
$("li.addressClick").removeClass("addressClick");
$(this).addClass("addressClick");
var $splitAddress = $(this).text().split(",");
$($customerAddress).closest("tr").removeClass("hide");
$($customerAddress).each(function(){
var $inputCount = $(this).index($customerAddress);
$(this).val($splitAddress[$inputCount]);
});
$.cookies.set('cpqbAddressInputs', 'visible');
});
Form fields:
<tr>
<th>
<label for="customerAddressLine1">Address *</label>
</th>
<td colspan="3">
<input type="text" name="customerAddressLine1" maxlength="40" value="" id="customerAddressLine1" class="text" />
</td>
However it only seems to populate the first line of the address and not lines two and three.
I could easily do this manually but i wanted to abstract it so that it could be expanded to cater for any amounts of address lines.
