Changing placeholder with `this` on multiple elements via checkbox

Question

Currently I have two search inputs on every page using the same classes. What I am trying to do is change the placeholder text of this element when the checkbox isnt checked here is what I have so far. Also Codepen

HTML

<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
  <div class="container">
    <div class="row">
      <div class="search-scroll">
        <div class="pull-left">
          <input autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
        </div>
        <div class="pull-right">
          <label>
            <input class="translateSearch" type="checkbox" checked="checked">
            <span>Translate</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</nav>

JS

$('.translateSearch').on('change', function(e) {
  if ($(this).is(':checked') == true) {
    $('.translateSearch').not($(this)).attr('checked', true);
  } else {
    $('.translateSearch').not($(this)).attr('checked', false);
    $('.translateSearch').attr('placeholder', 'Search using exact terms.');
  }
});

I just cant seem to get it to work with the placeholder. Any ideas?

Possible duplicate of [Change Placeholder Text using jQuery](http://stackoverflow.com/questions/9232810/change-placeholder-text-using-jquery) — Dan, Aug 21 '16 at 03:19

Karin · Accepted Answer · 2016-08-21T03:17:11.317

The following JS will set the placeholder on your text input with class SearchInput. I assumed you wanted the placeholder there instead of on the translateSearch checkbox as implied by the original code. Also made a change that restored the original placeholder text when the box is checked.

$('.translateSearch').on('change', function(e) {
  if ($(this).prop('checked')) {
    $('.SearchInput').attr('placeholder', 'Have your search terms translated to Chinese.');
  } else {
    $('.SearchInput').attr('placeholder', 'Search using exact terms.');
  }
});

Also as a note - you don't need to manually to the checkbox behaviors as they are done automatically by default.

Here's a link to the CodePen: http://codepen.io/anon/pen/akxxOk

score 1 · Answer 2 · answered Aug 21 '16 at 03:11

I am not sure what purpose the if/else statement serves in your JS.

I simplified it so it updates the placeholder (has to be on the proper class, in this case SearchInput) without any else condition:

$('.translateSearch').on('change', function(e) {
  if ($(this).is(':checked') === false) {
    $('.SearchInput').attr('placeholder', 'Search using exact terms.');
  }
});

Here is an updated Codepen

score 1 · Answer 3 · answered Aug 21 '16 at 03:15

You try to change the text of the checkbox not your input. So if you add a id to your input :

$('.translateSearch').on('change', function(e) {
  if ($(this).is(':checked') == true) {
    $('.translateSearch').not($(this)).attr('checked', true);
    $('#inputToChange').attr('placeholder', "Have your search terms translated to Chinese.");
  } else {
    $('.translateSearch').not($(this)).attr('checked', false);
    $('#inputToChange').attr('placeholder', 'Search using exact terms.');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-secondary-scroll-mobile" role="navigation">
  <div class="container">
    <div class="row">
      <div class="search-scroll">
        <div class="pull-left">
          <input id="inputToChange" autocomplete="off" class="form-control SearchInput" name="search" placeholder="Have your search terms translated to Chinese." value="" type="text">
        </div>
        <div class="pull-right">
          <label>
            <input class="translateSearch" type="checkbox" checked="checked">
            <span>Translate</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</nav>

Changing placeholder with `this` on multiple elements via checkbox

3 Answers3