Question

within a form I have a section that allows the user to build out a search query. Within the options the user has the ability to select different operators ( contains, does not contain, like, between).

When the user selects between I insert a new input field after the drop down menu which would server as a to from field see image:

The issue I am having is how I am testing for the existence of the field. Currently I am doing this based upon the value of the object. This approach does not work if the field was not originally set to between. I.E if it is on contains and I select like the field is removed.

I think I need to count the number of text input fields in the current div and then if the number is greater than 2 remove one otherwise do nothing.

Where I am stuck is in the ability to count the input elements for the current div

I have tried:

var cnt = $(this, 'div .operClass input:text').length;

but this counts all inputs in the form vs the current row.

Can anyone point me in the right direction on when an option is selected to count and return the number of input fields for the current div that the selector is inside?

Thanks in advance,

jscript

$(document).ready(function () {
            $('#add').click(function () {
                InsertFields();
            });
            //insert first row
            function InsertFields() {
                $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            }
            //add additional row 
            //used second funciton to reset bindings
            $('#newAdd').live('click', function () {
                $("<div class='additionalrow'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator' class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            });
            //remove row
            $('#btnRemove').live('click', function () {
                $(this).parent().remove();
            });

            $('.operClass').change(function () {
                var foo = $('.operClass option:selected').val();
                alert(foo); 
            });

            $('select').live('change', '.operClass', function () {
                var sb = $(this, '.operClass option:selected').val();
                var ci = $(this, '.operClass');
                insertFromField(sb, ci);
            });
            //insert field after between option or remove it if it exists
            function insertFromField(param1, param2, param3) {

                if (param1 == "BETWEEN") {
                    $("<input type='text' name='fieldValue1' id='fieldvalue1' value='' size='20' />").insertAfter(param2);    
                }
                else {
                //need to test count of existing input fields for the current row here if n > 1 remove the second field else do nothing.
                    $(param2).next().remove();
                }
            }
        });  

html

<div id="queryFields">
            <select name="condition">
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
            <input type="text" name="fieldname" id="fieldName" size="20" />
            <select  name="operator">
                <option id="opt1" value="CONTAINS">Contains</option>
                <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option>
                <option id="opt3" value="LIKE">Like</option>
                <option id="opt4" value="BETWEEN">Between</option>
            </select>
            <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" />
            <input type="button" id="add" value="Add" /> 
        </div>

Answer 1

You can do this

var $selector = $(this); /* Assuming the selector is `this` */
var count = $selector.siblings("input:text").length;

No extra classes needed.

If you only want to match text inputs AFTER the select, you can use:

$selector.nextAll("input:text").length;

This won’t match the first text input before each select.