I'm trying to change the placeholder of a textarea with the press of a checkbox button. I just can't get it to change.

To be clear, I'm trying to set a placeholder NOT a value.

My textarea:

<textarea name="problem" id="problem" rows="3" class="form-control" cols="45" placeholder="Describe your ticket reason in as few words as possible."></textarea>

My JavaScript:

<div class="onoffswitch">
  <input type="checkbox" onchange="changeplh()" name="onoffswitch" class="onoffswitch-checkbox" value="1" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
  <script>
    function changeplh() {
      debugger;
      var sel = document.getElementById("myonoffswitch");
      var textbx = document.getElementById("problem");
      var indexe = sel.selectedIndex;

      if (indexe == 0) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "age");

      }
      if (indexe == 1) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "name");
      }
    }
  </script>
</div>

What I specifically need - a checkbox button that changes a placeholder of a textarea to 2 different options. EX: Click it once, it says "age", click it again it says "name", click it again it says "age" etc.

I'm trying to change the placeholder of a textarea with the press of a checkbox button. I just can't get it to change.

To be clear, I'm trying to set a placeholder NOT a value.

My textarea:

<textarea name="problem" id="problem" rows="3" class="form-control" cols="45" placeholder="Describe your ticket reason in as few words as possible."></textarea>

My JavaScript:

<div class="onoffswitch">
  <input type="checkbox" onchange="changeplh()" name="onoffswitch" class="onoffswitch-checkbox" value="1" id="myonoffswitch" checked>
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
  <script>
    function changeplh() {
      debugger;
      var sel = document.getElementById("myonoffswitch");
      var textbx = document.getElementById("problem");
      var indexe = sel.selectedIndex;

      if (indexe == 0) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "age");

      }
      if (indexe == 1) {
        $("#problem").val('');
        $("#problem").prop("placeholder", "name");
      }
    }
  </script>
</div>

What I specifically need - a checkbox button that changes a placeholder of a textarea to 2 different options. EX: Click it once, it says "age", click it again it says "name", click it again it says "age" etc.

• javascript
• jquery
• html
• placeholder

Share Improve this question Follow edited Nov 11, 2020 at 14:35 Mosh Feu 29.4k1818 gold badges9393 silver badges141141 bronze badges asked Jan 5, 2016 at 21:42 GrumpyCroutonGrumpyCrouton 8,61977 gold badges3737 silver badges8080 bronze badges 2

• you have indexe = sel.selectedIndex, but the element with id of myonoffswitch is not a <select> element, also your textarea does not have an id of problem – Patrick Evans Commented Jan 5, 2016 at 21:49
• @PatrickEvans stupid me, I posted the wrong textarea. – GrumpyCrouton Commented Jan 5, 2016 at 21:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your code is a little bit messy (for example, you have no #problem in your code) so I just created a simple demo of changing the placeholder.

$('#problem').change(function() {
  $('textarea').attr('placeholder', $(this).is(':checked') ? 'name' : 'age');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" style="height:150px" name="techProblem" placeholder="Describe the issue in as few words as possible."></textarea>

<label><input type="checkbox" id="problem" /> Change placeholder</label>