CODEWITHSUNDEEP
javascriptjqueryhtml
InYourDreamz
InYourDreamz

Reputation: 71

Change text in the anchor tag while typing in text input in Jquery

Ok, this sounds easy, but I'm having problems trying to identify the anchor tag. The HTML block repeats itself.

<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#q1">
     Question 1
    </a>
  </h4>
</div>
<div id="q1" class="panel-collapse collapse">
  <div class="panel-body">
    <div class="form-group">
      <label for="inputQ1" class="col-sm-2 control-label">Question</label>
      <div class="col-sm-7">
        <input type="text" class="form-control" id="inputQ1" placeholder="e.g How was our service?">
      </div>
    </div>
  </div>
</div>

I got the answer I need over here how to show text while typing in textarea in jquery

What I need to know is, how do I make it so that the text in the anchor tag changes? I don't want to put in an ID for all of them. I should be using parent() and siblings(), right?

Upvotes: 0

Views: 1022

Answers (6)

feco
feco

Reputation: 89

I think the best (because the logic) if you could create a parent around this code (if you can)

<div class="parent">
  <h4>
    <a>...</a>
  </h4>
  <div>
     <input>
  </div>
</div>

in the event $(this) is your input

you can use $(this).closest('parent').find('a') to find the for the

Upvotes: 1

Felix
Felix

Reputation: 38102

You can use:

$('#inputQ1').keyup(function(){
    var $this = $(this);
    $this.closest('#q1').prev().find('a').html($this.val());
});

Fiddle Demo

Upvotes: 1

Liftoff
Liftoff

Reputation: 25372

You can do this with keyup and html:

$(document).ready(function(){

    $("#text").keyup(function(){

        $("#q1").html($(this).val());

    });

});

Where #text is the textarea and #q1 is the anchor:

JSFiddle

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

jQuery(function ($) {
    $('.panel-body input').keyup(function(){
        $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value)
    })
});

Demo: Fiddle

Note: To be more specific I might add an additional class as shown in this fiddle

Upvotes: 3

user3064914
user3064914

Reputation: 959

try this

$('.panel-title a').text( 'new text' );

Upvotes: 0

Justinas
Justinas

Reputation: 43441

Try using anchor parent:

$('.panel-title a').text( /* textarea text */ );

Upvotes: 0

Related Questions