CODEWITHSUNDEEP
javascriptjquery
Arianule
Arianule

Reputation: 9043

Looping through textboxes using jquery

How can I go about in clearing these textboxes by looping through them using Jquery?

<div class="col-md-4" id="RegexInsert">
    <h4>New Regex Pattern</h4>
    <form role="form">
        <div class="form-group">
            <label for="firstName">Desription</label>
            <input type="text" class="form-control" id="txtRegexDesription" placeholder="Description" />
        </div>
        <div class="form-group">
            <label for="firstName">Regex pattern</label>
            <input type="text" class="form-control" id="txtRegexPattern" placeholder="Regex pattern(C#)" />
        </div>
        <div class="form-group">
            <label for="firstName">Data type</label>
            <input type="text" class="form-control" id="txtDataType" placeholder="Data type" />
        </div>
        <button type="button" class="btn btn-default btn-sm btnAddRegexPattern" data-applicationid=""><span class="glyphicon glyphicon-plus"></span>&nbsp;Add</button>
    </form>
</div>

I am doing the following which is not quite there yet.

$("#RegexInsert .inputs").each(function () {
    $('input').val('');
});

kind regards

Upvotes: 4

Views: 2476

Answers (6)

David Thomas
David Thomas

Reputation: 253318

To clear the input elements, as noted elsewhere:

$("#RegexInsert .inputs").val('');

To reset the input elements' values:

$("#RegexInsert .inputs").val(function(){
    return this.defaultValue;
});

Or, if you have multiple input-types (and this is, frankly, more complex than I at first assumed it would be...):

$('#reset').on('click', function(e){
    e.preventDefault();
    $('input, textarea, select option')
    .each(function(){
        var tag = this.tagName.toLowerCase(),
            type = this.type,
            prop, value;
        if ('undefined' !== typeof type) {
            switch (type) {
                case 'radio':
                case 'checkbox':
                    prop = 'checked';
                    break;
                case 'text':
                case 'textarea': // textarea elements seem to have a type
                                 // property, undexpectedly (in Chrome/Win XP)
                    prop = 'value';
                    break;
            }
        }
        else {
            switch (tag) {
                case 'option':
                    prop = 'selected';
                    break;
                case 'textarea':    // left this just in case the 'type' property
                    prop = 'value'; // is a Chrome/Webkit specific thing.
                    break;
            }
        }
        this[prop] = this['default' + prop.replace(/^./,function(a){
            return a.toUpperCase();
        })];
    });
});

JS Fiddle demo.

Upvotes: 6

dork
dork

Reputation: 4568

your original code

$("#RegexInsert .inputs").each(function () {
    $('input').val('');
});

.inputs doesn't exist anywhere in your HTML. If you are referring to the input tags, the your selector should be input.

$("#RegexInsert input").each(function () {
    $(this).val('');
});

Upvotes: 0

Alexandre FILLATRE
Alexandre FILLATRE

Reputation: 1327

You can do the following :

$("#RegexInsert input").each(function () {
    $(this).val(); // Gets the value
    $(this).val('newValue'); // Sets the value
});

In your case, you have a shortcut to clean all (the each() is implicit) :

$("#RegexInsert input").val('');

Beware though as this will clean any input that has a value attribute. You may want to consider stronger selector, like $("#RegexInsert input[type=text]")

Upvotes: 4

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

do like this:

$('#RegexInsert input.form-control').val('');

or:

$('.form-group input.form-control').val('');

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

You don't have to use a loop

$("#RegexInsert input").val('');

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

You don't need a loop, you can do it in a single selector:

$('.form-control').val('');

I'm not sure where .inputs in your example is coming from as it is not in your HTML. You can make the selector more generic if required:

$('#RegexInsert input[type="text"]').val('');

Upvotes: 11

Related Questions