0

I am trying to create a form using the jquery ui datepicker.
Everything works perfectly except that since I changed the design of the input fields the placeholder attribute is not removed when a date is picked.

Here is the fiddle: https://jsfiddle.net/deqguphb/

HTML

<form>
     <ol>
         <li>
           <input id="input1" name="input1" value="" placeholder="Input1: Working just fine"/>
           <label for="input1">Input1</label>
         </li>
         <li>
           <input id="input2" name="input2" value="" placeholder="Input2: The placeholder stays" />
           <label for="input2">Input2</label>
         </li>
         <li>
           <input id="input3" name="input2" value="" placeholder="Input3: The placeholder stays" />
           <label for="input3">Input3</label>
         </li>
    </ol>
</form>

Javascript

/* The focus effect */
$("input:not([value]),input[value='']").addClass('empty');

/* Input event handling */
$('input').on('input keyup', function() {  
      $(this).toggleClass('empty', !Boolean($(this).val()));
});

I do not know what event is fired after a date is picked. I tried with onKeyup and onChange but that did not solve the problem.

I would be beyond happy for a solution on this.

Schwesi
  • 4,753
  • 8
  • 37
  • 62

1 Answers1

0

I have updated your fiddle,

I have added two events to your each of the textbox for place holder.

onfocus="this.placeholder = ''" onblur="this.placeholder = 'Input1: Working just fine'"

Fiddle is : https://jsfiddle.net/deqguphb/4/

You need to use focus and blur event for textbox.

Hope this will help you :)

Bhargav Bhanderi
  • 182
  • 2
  • 8
  • Thank you for your answer! Unfortunately, I did not solve the problem. After a date is picked the label is still there 'below' the date. – Schwesi Mar 31 '15 at 09:30