Forms Address Block - problems referencing items in it via jquery

posted on June 15, 2016 • Show version history

I have the following HTML in the form according:

<li class="AddressBlock form-q label-left form-focused" id="q77" name="q77" attrtype="address" attr="Vendor_Address">
<label for="Field77" class="cf-label">Vendor Address<span class="cf-required">*</span></label>
<div class="cf-field">
 <div class="cf-address cf-fluid clearfix">
<div class="cf-full cf-val ws-invalid">
 <label for="Field77_DSG0" class="cf-helptext">Street Address</label>
<input type="text" required="required" value="" class="form-item-field  required Address1 user-error" 
style="margin-bottom: 3px;" name="Field77_DSG0" id="Field77_DSG0" 
aria-invalid="true" aria-describedby="errorbox-1">

If I try to reference it using:

$('.AddressBlock > .Address1').val();

I can't seem to reference it. However if I use:

$('#Field77_DSG0').val

It works fine. However do to the complecity of the script I am writing, I am hoping to use the classes I added onto the controls to make it more readable. Any idea what I am doing wrong? I've also tried '.AddressBlock > .Address1' (without the input).

0 0

posted on June 15, 2016

Ok, I found the answer. I tried this earlier, but it wasn't until just after this post that I tried it again.

$('.AddressBlock .Address1 ').val()

This worked. But I'm still not sure why the > didn't work - is it because it's more than one level below?

I think when I tried the above example I had something misspelled and tried to go further to find it (using >)

0 0

View 2 previous replies

replied on June 15, 2016

Hey Chris,

As to the > selector, you're right on. https://api.jquery.com/child-selector/

You would need to traverse deeper to reach your desired element.

You're DOM looks like:

<li>

<div>

<input></input> ** desired spot is 4 levels deep

You could also use $('.Address1 input') to grab the input element with the Address1 class.

Cheers,

Carl

1 0

replied on June 15, 2016

Thank for the confirmation!

Unfortunately I have to use a different address block later, so using .address1 won't work

But at least I know for sure what the issue was! I suppose I could've used a .find() as well.

0 0

replied on June 15, 2016

Ah.

What about

$('li.Address > div > div > div > input.Address1')

1 0

replied on June 15, 2016

I suppose that would work as well.. but my own

$('.AddressBlock .Address1 ').val()

worked to do the same. This was one of those mornings when you think to try something right after you ask a question.

When I was mentioning the find function, I meant this:

$('.AddressBlock').find(' .Address1 ').val()

0 0

replied on June 15, 2016

OH man. Right with you on the mornings. I misread. Glad you got it figured out, the double class selector you made is the way to go for sure. Much easier to read too.

0 0

Discussion

Discussion

Forms Address Block - problems referencing items in it via jquery

Comments 0

Follow-Ups 1

Found it!

Sign in to reply to this post.