Send text into input field only if it's empty

Question

I have a portion of a form that "pops" out of it's normal place, and binds itself to the side of the viewport. When this happens, certain elements are hidden, leaving me with only the data that is immediately critical.

My problem is that I can't seem to get the copied data into only those cells with matching classes that DO NOT contain data.

I'm fairly certain the problem lies in my JS:

$('.spec-table-quote-button').click(function() {
    var toCopy = $(this).closest('tr').find('td:eq(1)').text();
    var copyInto = $(".part-number-input").val('');
    $(copyInto).val(toCopy);
    $('.add-field').click();
});

Here's a fiddle to see all the pieces: http://jsfiddle.net/UjPAk/

Any help is greatly appreciated. Many thanks in advance!

score 4 · Accepted Answer · answered Mar 06 '14 at 16:23

4

Replace

var copyInto = $(".part-number-input").val('')

with

var copyInto = $(".part-number-input").filter(function() { return $(this).val() == '' });

.val('') sets the value of all the matched things to an empty string. It doesn't filter the match list to elements whose values are an empty string.

answered Mar 06 '14 at 16:23

Joel Spadin

436
3
7

Gotcha. Barely stepping beyond the basics with JS/jquery. I will have to research how filter() works. Thanks again! – Todd Mar 06 '14 at 16:29
According to http://stackoverflow.com/a/1299468/349353, you could also do something like `$('.part-number-input[value=""]')` (instead of filter). – peterjmag Mar 06 '14 at 17:46
True. The filter method would allow you to be more flexible as to what constitutes "doesn't contain data" though. You could, for instance, check that the value is neither empty nor whitespace. – Joel Spadin Mar 06 '14 at 20:02
@peterjmag, I went down a lot of paths like that.. :text[value=""], etc., but none of those worked (update the fiddle, you'll see). I did have something that checked the length ( if (copyInto.length === 0) function()...), but that only worked to block any subsequent attempts to fill any cells with data. For other problems, I think you might be right, but for this particular case, probably because the targeting of the cell is based on class and not something as definitive as an ID, that solution does not work. – Todd Mar 07 '14 at 07:43
@twf1985: You're right, `[value=""]` doesn't actually work here. As it turns out, attribute selectors like that only work for attributes that are explicitly declared in the HTML (not those dynamically created or modified by JS). Check out http://jsfiddle.net/peterjmag/fud8p/ for a quick demo. (This is true of both jQuery and CSS, so `$('input[value="something"]')` will target the same elements as `input[value="something"] {}`.) – peterjmag Mar 09 '14 at 18:32

score 2 · Answer 2 · edited Mar 06 '14 at 16:14

2

Use

var copyInto = $(".part-number-input");
copyInto.val(toCopy);

instead of

var copyInto = $(".part-number-input").val('');
$(copyInto).val(toCopy);

I think code is self explanatory.

edited Mar 06 '14 at 16:14

Tushar Gupta - curioustushar

58,085
24
103
107

answered Mar 06 '14 at 16:09

Satpal

132,252
13
159
168

These two sets of lines are doing the same thing (other than the second empties the "into" first). The first is simply more efficient. – Matthew Wilcoxson Mar 06 '14 at 16:35
Tried it in the fiddle, doesn't work. Repeats the same problem of inputting the data into all of the elements with the appropriate class. Thanks for trying. – Todd Mar 07 '14 at 07:47

score 0 · Answer 3 · answered Mar 06 '14 at 16:18

0

try :

$('.spec-table-quote-button').click(function() {
    var toCopy = $(this).closest('tr').find('td:eq(1)').text();
    $(".part-number-input").val(toCopy);
    $('.add-field').click();
});

answered Mar 06 '14 at 16:18

knightsb

337
3
11

This will input data into the cell, but doesn't check to make sure the cell is empty first. With each added field, any newly chosen value to send over gets replicated in each input field in the series with matching class. Thank you for trying. – Todd Mar 07 '14 at 07:51

Send text into input field only if it's empty

3 Answers3