CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coder95
Coder95

Reputation: 93

Jquery - Contact field interaction

Hey guys I'm trying to create contect filed interaction. When we click on any field that label text should go up.I tried but didn't work and also attched my code for more clarity. Can you guys help me? Thanks:)

$('.form-grid').keyup(function() {
  if ($(this).val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});
.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}
<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Upvotes: 1

Views: 62

Answers (3)

Terry
Terry

Reputation: 66133

That is because the $(this) element in your code actually refers to the div.form-grid node, which does not have a value attached to it. What you want is to select the nested input/textarea element, i.e. $(this).find('input, textarea').first().val():

$('.form-grid').keyup(function() {
  if ($(this).find('input, textarea').first().val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});

See proof-of-concept below:

$('.form-grid').keyup(function() {
  if ($(this).find('input, textarea').first().val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});
.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>

However, I would suggest not binding the keyup event listener to the wrapping div.form-grid. What you can do, is to bind the input event listener to the input element inside div.form-grid, and then simply toggle the class on the parent element instead:

$('.form-grid input, .form-grid textarea').on('input', function() {
  var $formGrid = $(this).closest('.form-grid');
  if (this.value)
    $formGrid.addClass('active');
  else
    $formGrid.removeClass('active');
});
.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>

Upvotes: 3

Karthikeyan
Karthikeyan

Reputation: 183

Try this method, its working fine.

$('.form-grid').on("input", function() {
         $('.form-grid').removeClass('active');
        $(this).addClass('active');

});

Upvotes: 0

Murugesan Rathinam
Murugesan Rathinam

Reputation: 158

Add class respect to each input for handling lable tag

<div class="form-grid">
  <textarea></textarea>
  <label for="text_input"> Message </label>
</div>

In script keyup function

  $('label[for="text_input"]').hide()

Try it.

Upvotes: -1

Related Questions