CODEWITHSUNDEEP
jquerytextlabel
Leon Gaban
Leon Gaban

Reputation: 39018

jQuery how to target the label in my example

Having a strangely tough time trying to target and change the text of my label

<li>
    <label></label><br/>
    <input type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

My Variable:

// Phone Inputs
var inputphone = $("<li><label></label><br/><input type='tel' pattern='[0-9]{10}' class='added_phone' name='' value='' autocomplete='off' maxlength='20' /></li>");

The function with checks how many Phone objects exist and then create them on the page:

$(profileData.phones).each(function(i) {
    $('.new_option').append(inputphone);
    $('.added_phone').closest('label').text(profileData.phones[0].tag);
    $('.added_phone').attr('id', "added_"+profileData.phones[0].tag+"phone" + (i + 1));
        });
    $('.added_phone').attr('value', profileData.phones[0].label);
});

enter image description here

I'm able to find out that there is 1 or more phone objects, create and display the input, put the phone number into the field, but have not been able to target the label and put in the tag(name).

Tried closest, parent, label... code tunnel X_x

How would you approach this?

Upvotes: 2

Views: 2949

Answers (2)

David Thomas
David Thomas

Reputation: 253308

Well, given your following HTML:

<li>
    <label></label><br/>
    <input type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

Then, from the input, the label is:

$(this).parent().find('label');

Or:

$(this).prevAll('label');

Note that both these methods will potentially return multiple elements, should any li contain more than one label/input.

Incidentally, you're using the label wrong; it's meant to identify a relationship a text-label and a form's input (or textarea or select) elements:

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

Taking advantage of the for attribute of the label which must (if it's to work) be the same as the id attribute of the input (or similar element):

<li>
    <label for="inputID"></label><br/>
    <input id="inputID" type='tel' class='added_phone' name='' value='' maxlength='20' />
</li>

And, given that relationship, it becomes somewhat easier to associate the two (assuming that this refers to the input element):

$('label[for="' + this.id + '"]');

References:

Upvotes: 3

cssyphus
cssyphus

Reputation: 40038

You can use the .parent() and .find() selectors to locate the desired element:

jsFiddle here

HTML:

<div class="new_option"></div>
<input type="button" id="mybutt" value="Click Me">

$('#mybutt').click(function() {
    var inputphone = $("<li id='myLI'><label id='myLabel'></label><br/><input type='tel' class='added_phone' /></li>");
    $('.new_option').append(inputphone);
    alert($('.added_phone').parent().find('label').attr('id'));
});

And to update your label field itself:

updated jsFiddle here

$('#mybutt').click(function() {
    var inputphone = $("<li id='myLI'><label id='myLabel'></label><br/><input type='tel' class='added_phone' /></li>");
    $('.new_option').append(inputphone);
    //alert($('.added_phone').parent().find('label').attr('id'));
    $('.added_phone').parent().find('label').text('Hey there');
});

Upvotes: 2

Related Questions