CODEWITHSUNDEEP
jqueryhtmljquery-ui
jvf
jvf

Reputation: 27

How to change the label text dynamically in jquery

HTML:

<center><p id="drag1" class="ui-widget-content"> Paragraph</p></center>

<div id="droppable" class="ui-sortable" ><ol></ol></div>

<div class="change">
<form>
Change title: <input type="text" id="titleName" />
<input type="button" value="ok" id="save" />
</form>
</div>

jquery:

$("#droppable").append('<li class="ui-state-default">' + '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' +
  '<div class="address" id="InputsWrapper_2' + addressFieldCount + '">' +
'<p>' + '<label class="add">Address:' + addressFieldCount + '</label>' + '<br>'  +
     '<textarea type="text" name="myaddress[]" id="field_' + addressFieldCount + '" placeholder="Address' + addressFieldCount + '" />' +
 '<button class="removeclass1">x</button>' +
   '</p>' + '<br>' + '</div>' + '</li>');

$('.add').click(function(){      
  var labelAddress = $('.add'+addressFieldCount+'');
$(".change").find('input[type="text"]').val($(".add").text()).show().focus();
});

$(".change").focusout(function() {

$("#droppable").find('label').text(this.value).show();
 $('.add').text($('#titleName').val()).val;
   });

When there are two or more text areas already dragged and dropped in the #droppable with label address1 and address2 and I want to change only the label address1 to the value typed in the textbox. how can I do it?

Upvotes: 1

Views: 6488

Answers (1)

Banana
Banana

Reputation: 7484

assuming this.value holds the textbox value (if you are inside an event handler that belongs to the textbox for example)

if you just want the first label, you can use .eq(0) or .first():

$("#droppable").find('label').eq(0).text(this.value).show();

note however, that .find() only searches the first level of child elements. if you need to search deeper, you can use the selector $(<what>,<where>):

$('label', $("#droppable")).eq(0).text(this.value).show();

and of course, if address1 is an id/class/whatever, you can just search like this:

$('.address1', $("#droppable")).eq(0).text(this.value).show();
$('#address1', $("#droppable")).eq(0).text(this.value).show();
$('label[name=address1]', $("#droppable")).eq(0).text(this.value).show();

UPDATE:

i believe this is what you tried to achieve, explanation in the comments:

$(function () {
    var addressFieldCount = 5;

    for (i = 1; i <= addressFieldCount; i++) {
        $("#droppable").append('<li class="ui-state-default">' + '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' +
            '<div class="address" id="InputsWrapper_2' + i + '">' +
            '<p>' + '<label class="add">Address:' + i + '</label>' + '<br>' +
            '<textarea type="text" name="myaddress[]" id="field_' + i + '" placeholder="Address' + i + '" />' +
            '<button class="removeclass1">x</button>' +
            '</p>' + '<br>' + '</div>' + '</li>');
    }


    $('.add').click(function () {
        //we save the index of the selected address. since we clicked the label, going
        //up 3 parents will get us the address div element and we store it's index somwhere safe
        $(".change").data("selectedAddress", $(this).parent().parent().parent().index());
        //since we are in the add's click handler, we can reference the current
        //add lable using $(this)
        $(".change").find('input[type="text"]').val($(this).text()).show().focus();
    });

    $(".change #titleName").focusout(function () {
        //first we retrieve the index of the address element that we stored earlier
        var selectedAddress = $(".change").data("selectedAddress");
        //next we retrieve the new title:
        var newTitle = $(this).val();
        //the next condition is to avoid changing the titles if you dont click an address first
        if (selectedAddress >= 0) {
            //since every address element only has 1 label, we can safely assume that if we 
            //use the address index, we will get the corresponding label
            $('label', $("#droppable")).eq(selectedAddress).text(newTitle).show();
        }
        //clear the textbox after we change the title
        $(this).val("");
        //clear selected address id
        $(".change").data("selectedAddress", "-1");

    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<center>
  <p id="drag1" class="ui-widget-content">Paragraph</p>
</center>
<div id="droppable" class="ui-sortable">
</div>
<div class="change">
  <form>Change title:
    <input type="text" id="titleName" />
    <input type="button" value="ok" id="save" />
  </form>
</div>

and here is a Fiddle for convenience

Upvotes: 2

Related Questions