on change function in jquery for textbox

Question

I have series of textboxes i want on change function at the last textbox.i have tired as follows,

<div id="filterMeasurement" class="col-md-4 col-sm-6 col-xs-12 filterControls" style="display: none;">
    <h4>Measurements in (mm)</h4>
    <div class="mea-bx">
        <h5>Length </h5>
        <div>
            <input name="txtLengthFrom" type="text" id="txtLengthFrom" class="textSmLeft" placeholder="from" />
            <input name="txtLengthTo" type="text" id="txtLengthTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
    <div class="mea-bx">
        <h5>Width </h5>
        <div>
            <input name="txtWidthFrom" type="text" id="txtWidthFrom" class="textSmLeft" placeholder="from" />
            <input name="txtWidthTo" type="text" id="txtWidthTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
    <div class="mea-bx">
        <h5>Height </h5>
        <div>
            <input name="txtHeightFrom" type="text" id="txtHeightFrom" class="textSmLeft" placeholder="from" />
            <input name="txtHeightTo" type="text" id="txtHeightTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
</div>

jQuery:

$("#filterMeasurement").find('input[type=text]').change(function () {
    var lengthfrom = $("#txtLengthFrom").val();
    var lengthto = $("#txtLengthTo").val();
    var widthfrom = $("#txtWidthFrom").val();
    var widthto = $("#txtWidthTo").val();
    var heightfrom = $("#txtHeightFrom").val();
    var heightto = $("#txtHeightTo").val();
    if (lengthfrom != '' && lengthto != '' && widthfrom != '' && widthto != '' && heightfrom != '' && heightto != '') {
        UpdateGrid();
    }
    else {alert("Fill all the fields")}
});

Here for each textbox on change throwing alert in else block.How can i get alert only on last textbox on change by checking all textboxes as mandatory?

Can anyone please help me out??

Thanks in advance.

I think this one will usefull for you. http://stackoverflow.com/questions/1481152/how-to-detect-a-textboxs-content-has-changed — vipul sorathiya, Mar 17 '16 at 06:25
With `style="display: none;"` at `html` `alert()` would be called where no user input ? — guest271314, Mar 17 '16 at 06:36

Rino Raj · Answer 1 · 2016-03-17T06:30:13.237

0

Use

$("#filterMeasurement").find('input[type=text]:last')

► .last() :method returns the last element of the selected elements.

OR

$("#filterMeasurement").find('input[type=text]').last()

► :last : selector selects the last element.

OR

$("#filterMeasurement").find('input[type=text]:last-child')

► :last-child :can match more than one: one for each parent

edited Mar 17 '16 at 06:30

answered Mar 17 '16 at 06:24

Rino Raj

6,264
2
27
42

guest271314 · Answer 2 · 2016-03-17T14:37:14.047

How can i get alert only on last textbox on change by checking all textboxes as mandatory?

Try removing style="display: none;" from #filterMeasurement" element at html to allow user to input text ? Not certain how .change() handler could call alert() if user not able to input text to element not appear to rendered in document ?

You could use $.grep() to check if input elements having id beginning with txt and having value .length is equal to or equal less 1 to input .length ; call alert() at input .length - 1 ; call UpdateGrid() at input .length equal to input elements having value

var inputs = $("[id^=txt]");

function UpdateGrid() {
  alert("complete")
}

$("#filterMeasurement").find("input[type=text]").change(function () {
    var res = $.grep(inputs, function(el) {
      return el.value.length > 0 && !/^\s+$/.test(el.value)
    });
  
    if (res.length === inputs.length) {
      UpdateGrid();
    }
    else {
      // get alert only on last textbox on change 
      // by checking all textboxes as mandatory
      // if any input elements do not have value 
      // then alert("Fill all the fields") 
      //if (res.length === inputs.length - 1) {
         alert("Fill all the fields")
      //}
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="filterMeasurement" class="col-md-4 col-sm-6 col-xs-12 filterControls">
    <h4>Measurements in (mm)</h4>
    <div class="mea-bx">
        <h5>Length </h5>
        <div>
            <input name="txtLengthFrom" type="text" id="txtLengthFrom" class="textSmLeft" placeholder="from" />
            <input name="txtLengthTo" type="text" id="txtLengthTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
    <div class="mea-bx">
        <h5>Width </h5>
        <div>
            <input name="txtWidthFrom" type="text" id="txtWidthFrom" class="textSmLeft" placeholder="from" />
            <input name="txtWidthTo" type="text" id="txtWidthTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
    <div class="mea-bx">
        <h5>Height </h5>
        <div>
            <input name="txtHeightFrom" type="text" id="txtHeightFrom" class="textSmLeft" placeholder="from" />
            <input name="txtHeightTo" type="text" id="txtHeightTo" class="textSmRight" placeholder="to" />
        </div>
    </div>
</div>

i want a small change over here,have to check one or more textboxes is empty.but here it is checking only one textbox — Jenny, Mar 17 '16 at 07:29
@Janani _" want a small change over here,have to check one or more textboxes is empty.but here it is checking only one textbox"_ Not certain interpret correctly ? What is requirement ? `alert()` if any `input` elements do not have value , or if five of six `input` elements have value ? — guest271314, Mar 17 '16 at 07:49
if any input elements do not have value then alert("Fill all the fields") — Jenny, Mar 17 '16 at 08:45
@Janani _"if any input elements do not have value then alert("Fill all the fields") "_ You can comment `if` condition within `else` ; see updated post — guest271314, Mar 17 '16 at 14:38

on change function in jquery for textbox

2 Answers2