Selector refinement -> Each non-empty input

Question

Could use a little help with this, it seems like there should be a cleaner way to write this out.

I want to select each text input in the #endowment div, that is not empty. Also, I am writing to a div called 'dyn_hidden', that I want to append each input with a value in it. So on each blur I'm deleting everything, and then adding each one back. Is there a better way for this?

Thanks!

jQuery("#endowment input[type='text']").blur( function() {

    // Empty out dyn_hidden div
    jQuery('#dyn_hidden').html('');

    jQuery("#endowment input[type='text']").each(function() {
        if(jQuery(this).val() !== "") { 
            end_fund      = '<input type="hidden" name="fund[]" value="'+jQuery(this).attr('title')+'">';                                                                                                                  
            end_amount    = '<input type="hidden" name="amount[]" value="'+jQuery(this).val()+'">';
            jQuery('#dyn_hidden').append(end_fund, end_amount);
        }
    });
});

You seem to be inserting element with Duplicate id's into your div.. This is not a valid HTML — Sushanth --, Oct 31 '12 at 19:34

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

You could do something like this as found in this question

 $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

edited May 23 '17 at 10:32

Community

1
1

answered Oct 31 '12 at 19:20

Pastor Bones

7,183
3
36
56

Even if I were to change the == "" to != "" this is still 1 action and two selector statements long, same as mine, I was wondering if it would be possible to select them with 1 action and 1 selector. – Jeremy A Oct 31 '12 at 19:39

score 1 · Answer 2 · answered Oct 31 '12 at 19:50

First when the DOM loads you can insert all the hidden inputs into your div .. So when the input blur is called you can just change the hidden input corresponding to that particular value..

You can use HTML 5 attributes to store the info of that particular textbox..

SOmething like this.. You can also eliminate the possibility of duplicated id's on your page..

jQuery(function() {
    // Insert all the input corresponding to the textboxes initially
    jQuery("#endowment input[type='text']").each(function(i) { // Use i in each as iterator to store the data-attribute
        // Store the value of the textbox in the data-id attribute
        // Add the data-attribute to the textbox that stores the index
        // of corresponding textbox
        $(this).attr('data-id', i);
        var end_fund = '<input type="hidden" name="fund[]" data-param="title-' + i + '" value="' + jQuery(this).attr('title') + '">';
        var end_amount = '<input type="hidden" name="amount[]" data-param="value-' + i + '" value="">';
        jQuery('#dyn_hidden').append(end_fund, end_amount);
    });

    // Blur function of text box
    jQuery("#endowment input[type='text']").blur(function() {
        // Just change the value of corresponding input field..
        if (this.value !== "") {
            var $index = $(this).data('id');
            // Find the hidden input with data-param= "value + $index  inside
            // the #dyn_hidden  div  
            // And then set the value to it...
            $('#dyn_hidden input[data-param="value-' + $index + '"]').val(this.value);
        }
    });
});

CODE

Thanks, the reason I was wiping out the div's html and then adding each element back individually was because there will be variable amounts of elements. Probably between 1-14. I've never used data param, but seems like it would be unnecessary to add empty elements to the page if they weren't going to get filled with values. — Jeremy A, Nov 01 '12 at 12:11
Also, what's the browser support for the data-x attributes? Are shims necessary since they aren't client facing? — Jeremy A, Nov 01 '12 at 12:14
nvm - I'll just answer that myself. 1. http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 ___ 2. http://caniuse.com/#search=dataset — Jeremy A, Nov 01 '12 at 12:19

Selector refinement -> Each non-empty input

2 Answers2