Show last string when input value is empty?

Question

This is my HTML block

<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>

and the Jquery

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

Basically what this does is that whatever the user types in the input box, it will be displayed in the anchor tag.

Now, the problem I'm facing is that when the user types something and decides to delete the content in the input box, then the anchor tag will no longer have content. Ideally it should always show the previous content whenever the input box is focused. I hope my description of the problem is clear enough ...

Here's a link to JSFiddle http://jsfiddle.net/SpLsZ/

Answer 1

I have update your fiddle, check: http://jsfiddle.net/SpLsZ/2/

I put a data variable value in your anchor tag. When your text content is changing, I'm now checking if it has a value or not. If it is not, I'm retrieving data value and inserting it as text value.

<a href="#q1" 
    data-toggle="collapse" 
    data-parent="#accordion" 
    data-value="Question 1"
>Question 1</a>

$('.panel-body input').keyup(function () {
   var header = $(this).closest('.panel-collapse').prev('.panel-heading').find('a');

   if(this.value == "") {
      header.text(header.data("value"));
   } else {
      header.text(this.value);
   }
});

Answer 2

Try this:

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

Working Fiddle

Answer 3

Working Fiddle: http://jsfiddle.net/SpLsZ/4/

Change you HTML markup like so:

<a data-toggle="collapse" data-parent="#accordion" href="#q1">
    <span class="question">Question 1</span>
    <span class="answer"></span>
</a>

This way you don't have to worry about storing any values. And your JavaScript to:

$('.panel-body input').keyup(function () {
    var $link = $(this).closest('.panel-collapse').prev('.panel-heading').find('a');
    var $question = $link.find('.question');
    var $answer = $link.find('.answer');

    if (this.value) {
        $question.hide();
        $answer.text(this.value);
    } else {
        $question.show();
        $answer.empty();
    }
});

When you have any value you hide the qestion text and show the answer, if no value is entered show question and empty answer.

Answer 4

Try

$('.panel-body input').keyup(function () {
    $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(this.value);
}).blur(function () {
    if ($.trim(this.value) == '') {
        $(this).closest('.panel-collapse').prev('.panel-heading').find('a').text(function () {
            return $(this).data('default')
        });
    }
});
$('.panel-heading a').each(function () {
    $(this).data('default', $(this).text());
})

Demo: Fiddle