CODEWITHSUNDEEP
jquery
Arif Sami
Arif Sami

Reputation: 317

How to select previous input element outside current div but with same parent div

My HTML code is:

<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
</div>

All I want is if I click second or third input element and if previous one is empty an alert box must be show.

Upvotes: 1

Views: 334

Answers (4)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

First thing you need to do is add the ids for all the inputs. The next would be looping through the inputs. May be this is not scalable, but this works if the number of inputs are less:

$(function () {
  $("input:text").focus(function () {
    myID = this.id;
    $("input").each(function () {
      if (this.id == myID)
        return;
      if (this.value.trim().length == 0)
        alert("Please fill the previous one.");
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="n1" id="n1" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="n2" id="n2" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="n3" id="n3" />
    </div>
  </div>
</div>

Second Attempt:

$(function () {
  $("input:text").focus(function () {
    myID = this.id;
    for (i = 1; i < parseInt(myID[1]); i++)
      if ($("#n" + i).val().trim().length == 0) {
        alert("Please fill the previous one.");
        return;
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="n1" id="n1" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="n2" id="n2" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="n3" id="n3" />
    </div>
  </div>
</div>

Upvotes: 0

Diego Polido Santana
Diego Polido Santana

Reputation: 1435

try this:

$(".required-input").click(function() {
  $($(".required-input").get().reverse()).each(function() {
    if($(this).val() === "") {
      $(this).focus();
      return;
    }
  })
})

and you need to add this custom class on your inputs:

  <div id="subjects">
    <div class="group">
      <label for="n1">1. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
    <div class="group">
      <label for="n2">2. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
    <div class="group">
      <label for="n3">3. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
  </div>

Plunker: https://plnkr.co/edit/uQJMNEGxEjDnewkXp5wr?p=preview

Upvotes: 2

Ryan Dantzler
Ryan Dantzler

Reputation: 1144

$('input').on('click', function() {
  var index = $('#subjects input').index(this);

  if (index > 0 && $('#subjects input').eq(index-1).val() == '')
    alert("Previous input is empty");
});

https://jsfiddle.net/bdvte1cm/1/

Upvotes: 3

gaetanoM
gaetanoM

Reputation: 42054

Your HTML has some lacks:

when you specify a label like:

<label for="n1">1. Name</label>

the corresponding input field must be:

<input type="text" name="" id="n1" />

The id cannot be void or different from the for attribute of label.

The snippet:

$(function () {
  // for each input except the first one, when you click...
  $('#subjects').find(':text:gt(0)').on('click', function(e) {
    // get the first input
    var firstEle = $('#subjects').find(':text:eq(0)');
    // check if it's empty
    if (firstEle.val().length == 0) {
      alert('empty');
      firstEle.focus();
    }
  })
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>


<div id="subjects">
    <div class="group">
        <label for="n1">1. Name</label>
        <div class="child">
            <input type="text" name="" id="n1" />
        </div>
    </div>
    <div class="group">
        <label for="n2">2. Name</label>
        <div class="child">
            <input type="text" name="" id="n2" />
        </div>
    </div>
    <div class="group">
        <label for="n3">3. Name</label>
        <div class="child">
            <input type="text" name="" id="n3" />
        </div>
    </div>
</div>

Upvotes: 0

Related Questions