Displaying text on button click

Question

I have some JS code that when the user clicks the "add" button, some text is displayed to a textarea.

The code seems to be working OK. However, I realize I must refactor the code so that I am using only the one on click function instead of the six that I have for each of the 6 add buttons.

$('#row_split_id_cover_letter_details_first_paragraph').prepend('<div id="id_standard_suggestion_01" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a1" class="margin-bottom-15">Standard Sentence Number 1.1. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_01" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_02" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a2" class="margin-bottom-15">Standard Sentence Number 1.2. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_02" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_03" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a3" class="margin-bottom-15">Standard Sentence Number 1.3. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_03" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_04" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a4" class="margin-bottom-15">Standard Sentence Number 1.4. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_04" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_05" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a5" class="margin-bottom-15">Standard Sentence Number 1.5. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_05" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div><div id="id_standard_suggestion_06" class="cover_letter_suggestion_content margin-bottom-15"><span id="id_1a6" class="margin-bottom-15">Standard Sentence Number 1.6. </span><span class="cover_letter_suggestion_add_button"><button id="id_add_standard_suggestion_paragragh01_06" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button></span></div>');

$(function () {
    $('#id_add_standard_suggestion_paragragh01_01').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a1');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_02').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a2');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_03').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a3');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_04').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a4');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_05').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a5');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });

    $('#id_add_standard_suggestion_paragragh01_06').on('click', function () {
        var divTA1 = document.getElementById('id_cover_letter_details_first_paragraph');
        var divGS1 = document.getElementById('id_1a6');
        divTA1.innerHTML = divTA1.innerHTML + divGS1.innerHTML;
    });
});

Here is a working fiddle.

"Refactoring" is not needed in titles. Every question here is about refactoring. — Jamal, Commented Nov 25, 2015 at 7:52

Tushar · Accepted Answer · 2015-11-25 08:42:38Z

Don't add HTML in DOM from jQuery, add it from server side.

Changes in HTML

Removed all ids as it is not used
Removed redundant attribute type="button" from buttons.

Use HTML structure as follow:

<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.1. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.2. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.3. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.4. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.5. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>
<div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.6. </span>
    <span class="cover_letter_suggestion_add_button">
        <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
    </span>
</div>

Javascript

Use common class to bind event on all elements, cover_letter_suggestion_add_button in this case
Use the DOM traversal methods to get the elements corresponding to the clicked element, using $(this) to reference to clicked element and prev to get the previous sibling.

Code:

$(document).ready(function () {
    $('.cover_letter_suggestion_add_button button').on('click', function () {
        // Get text of the previous span element
        var text = $(this).closest('.cover_letter_suggestion_add_button').prev().text();

        $('#id_cover_letter_details_first_paragraph').val(function (i, oldVal) {
            return oldVal + text; // Append the value of the prev. span to the textarea
        });
    });
});

Demo

$(document).ready(function() {
  $('.cover_letter_suggestion_add_button button').on('click', function() {
    var text = $(this).closest('.cover_letter_suggestion_add_button')
      .prev().text();
    $('#id_cover_letter_details_first_paragraph').val(function(i, oldVal) {
      return oldVal + text;
    });
  });
});

.cover_letter_suggestion_content {
  background-color: #ededed;
  border: 1px solid #a8a8a8;
  padding: 10px;
}
.cover_letter_suggestion_add_button {
  display: block;
  text-align: right;
}
.textAreaSplit {
  height: 200px;
  max-height: 600px;
  max-width: 50%;
  min-height: 100px;
  min-width: 50%;
  resize: vertical;
}
.textAreaSplitContainer {
  background-color: #f6f6f6;
  border: 1px solid #d9d9d9;
  display: inline-block;
  height: 200px;
  max-height: 600px;
  max-width: 45%;
  min-height: 100px;
  min-width: 45%;
  overflow: scroll;
  overflow-x: hidden;
  padding: 10px;
  resize: none;
  /* container is resized by resizing the textarea */
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="row_id_cover_letter_details_first_paragraph" class="form-group  ">
  <label for="id_cover_letter_details_first_paragraph" class="control-label ">Paragraph 1:</label>
  <div class="controls ">
    <span id="row_id_cover_letter_details_first_paragraph">
            <textarea cols="40" data-parsley-maxlength="2000" id="id_cover_letter_details_first_paragraph" maxlength="2000" name="cover_letter_details_first_paragraph" rows="10" class="textAreaSplit kmw-disabled keymanweb-font" data-parsley-id="8695" data-parsley-required="false"></textarea>
            <span class="parsley-errors-list" id="parsley-id-8695"></span>
    </span>
    <p class="help-block">2,000 character limit</p>
  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.1. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.2. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.3. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.4. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.5. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
  <div class="cover_letter_suggestion_content margin-bottom-15">
    <span class="margin-bottom-15">Standard Sentence Number 1.6. </span>
    <span class="cover_letter_suggestion_add_button">
            <button class="btn btn-xs rounded btn-primary">{% trans "Add" %}</button>
        </span>

  </div>
</div>

@Tashar, I don't understand, your demo is not working. Nothing happens on click of Add button. — user3354539, Commented Nov 25, 2015 at 6:44
@user3354539 You've to first type some text in textarea and then click on add button — Tushar, Commented Nov 25, 2015 at 6:45
@Tashar, that is not the functionality of the original code. Why did you change the functionality? What you did makes no sense! Take a look at the fiddle I supplied for the actual functionality. — user3354539, Commented Nov 25, 2015 at 7:28
@user3354539 Can you please explain what is the code in question doing and what is expected — Tushar, Commented Nov 25, 2015 at 7:29

khairul.ikhwan · Accepted Answer · 2015-11-25 09:18:59Z

You can utilize data attribute in the button to assign the span id to it. For instance <button id="id_add_standard_suggestion_paragraph01_01" data-span-target="id_1a1" class="btn btn-xs rounded btn-primary" type="button">{% trans "Add" %}</button>. By doing this, you can use it inside the click event. Javascript should be as per below

$(function () {
    $("button[id^='id_add_standard_suggestion_paragraph']").on('click', function(){
        var divTA = $('#id_cover_letter_details_first_paragraph');
        var spanTarget = $(this).data('span-target');
        divTA.append($("#" + spanTarget).html());
    });   
});

DEMO

Stack Exchange Network

Displaying text on button click

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.

Hot Network Questions

Displaying text on button click

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascriptjquery or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
or ask your own question.