How to call jquery/javascript event on form load?

Question

I have created some custom input in which it show an animation when get focused. It's working fine when input fields are blank because when value of input is null/blank then input set to defaults (i.e State-1) (See jsFiddle) and when it has some value it remains on it's new state after the animation(State-2).

I want that all input must be checked on form load,it should check all the input fields, if those who have some value then the input must be on State-2 else on state-1

NOTE: If you have any better way to achieve this than mine then please share with me.

HTML Sample Code:

<div class="container">
  <div class="form-wrapper">
    <label>Name</label>
    <input type="text" class="form-input">
  </div>
</div>

JS :


$('.form-wrapper .form-input').focus(function () {
    $(this).parent().find('label').addClass('hasValue');
    $(this).addClass('hasValueInput');

});

$('.form-wrapper .form-input').blur(function () {
    if (!$(this).val()) {
        $(this).parent().find('label').removeClass('hasValue');
    }
    $(this).removeClass('hasValueInput');
});

CSS:

.form-wrapper label {
  font-size: 110%;
  position: absolute !important;
  top: 10px;
  box-sizing: border-box;
  color: #80868b;
  left: 20px;
  z-index: 10;
  width: auto;
  padding: 1px;
  transition: font-size 0.2s, transform 0.2s;
}

.form-input{
  padding:5px;
}


.hasValue {
  color: #000 !important ;
  font-size: 90% !important;
  font-weight: 700;
  background-color: white;
  z-index: 2;
  transform: translate(0px, -10px);
}

.hasValueInput {
  box-shadow: none !important;
  border: 2px solid #17a2b8 !important ;
}

https://jsfiddle.net/knb8qp1o/2/

gaetanoM · Accepted Answer · 2020-08-23 21:03:27Z

You can chain to your event handler the .trigger() event:

$('.form-wrapper .form-input').focus(function () {
...................
}).trigger('focus');

$('.form-wrapper .form-input').focus(function () {
    $(this).parent().find('label').addClass('hasValue');
    $(this).addClass('hasValueInput');

}).trigger('focus');

$('.form-wrapper .form-input').blur(function () {
    if (!$(this).val()) {
        $(this).parent().find('label').removeClass('hasValue');
    }
    $(this).removeClass('hasValueInput');
});

.form-wrapper label {
  font-size: 110%;
  position: absolute !important;
  top: 10px;
  box-sizing: border-box;
  color: #80868b;
  left: 20px;
  z-index: 10;
  width: auto;
  padding: 1px;
  transition: font-size 0.2s, transform 0.2s;
}

.form-input{
  padding:5px;
}


.hasValue {
  color: #000 !important ;
  font-size: 90% !important;
  font-weight: 700;
  background-color: white;
  z-index: 2;
  transform: translate(0px, -10px);
}

.hasValueInput {
  box-shadow: none !important;
  border: 2px solid #17a2b8 !important ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="form-wrapper">
    <label>Name</label>
    <input type="text" class="form-input" value="startvalue">
  </div>
</div>

Your updated fiddle here.

Collectives™ on Stack Overflow

How to call jquery/javascript event on form load?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related