Get value of placeholder in empty input field with jquery?

user_1837608 0
Viewed 11674

Something is weird and I'm stumped.

When I have an input field with placeholder, eg:

<input id="box1" placeholder="not applicable">

I've always been able to grab the user input, or if input is left empty, the placeholder value with jquery as such:

var text = $('#box1').val();

No big deal. using jquery .val() always did the trick. Then I started seeing some code output errors in previously working apps wherein empty inputs were not capturing the placeholder value.

Did something change with the javascript engine that would account for this? Or is there a new way to get the placeholder value if the input field is empty?

See this example: 

$('#done').on('click', function(){
   if($('#box3').val() == ''){
            var box3 = $(this).data('placeholder');
        } else {
        var box3 = $('#box3').val();
        }
  $('#output').val(box3);
});

// Clicking the button doesn't capture the placeholder value if empty?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input id="box3" placeholder="not applicable">
<br><br>
<button id="done">
Done
</button>
<br><br>
<textarea id="output"></textarea>
<br><br>
<p>
Why doesn't the button click capture the value of the placeholder in this instance, using jquery 3.1.1?
</p>

placeholder user-input jquery
1 Answers

Use attr('placeholder'). Also, your use of this inside the if statement was faulty. It referred to the subject of the click function. 

$('#done').on('click', function(){
   if($('#box3').val() == ''){
            var box3 = $('#box3').attr('placeholder');
        } else {
           var box3 = $('#box3').val();
        }
  $('#output').val(box3);
});

// Clicking the button doesn't capture the placeholder value if empty?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input id="box3" placeholder="not applicable">
<br><br>
<button id="done">
Done
</button>
<br><br>
<textarea id="output"></textarea>
<br><br>
<p>
Why doesn't the button click capture the value of the placeholder in this instance, using jquery 3.1.1?
</p>

user_12648040
Related