jQuery print function, how to use iteration?

Question

I am making a print function for printing a list within a div. When the print button is clicked, the data in the inputs for the list is placed a new input that will be printed. I have been asked to remove blank inputs and have the filled ones appear together. I have been told to use a while iteration, but I don't even know how to go about doing that.

My inputs that send the data to be printed are the printArea_# and placed in the printLoad_#

I was given this code, but don't know how to use it...

$('#mydiv').children('input [type=text]').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

This is my working print function, it places the data into the new input for printing, but still displays the empty data as well, ( I am sure there is a much cleaner way to do this too.)

function print_list() {
    $('input[id=printLoad_1]').val($('input[class=printArea_1]').val());
    $('input[id=printLoad_2]').val($('input[class=printArea_2]').val());
    $('input[id=printLoad_3]').val($('input[class=printArea_3]').val());
    $('input[id=printLoad_4]').val($('input[class=printArea_4]').val());
    $('input[id=printLoad_5]').val($('input[class=printArea_5]').val());
    $('input[id=printLoad_6]').val($('input[class=printArea_6]').val());
    $('input[id=printLoad_7]').val($('input[class=printArea_7]').val());
    $('input[id=printLoad_8]').val($('input[class=printArea_8]').val());
    $('input[id=printLoad_9]').val($('input[class=printArea_9]').val());
        $(".printing_list").printElement(
            {
            overrideElementCSS:[
                '/css/print_fixer.css',
                { href:'/css/print_fixer.css',media:'print'}],
            //leaveOpen:true,
            //printMode:'popup',

            });
}

I want to hide unfilled table rows until data has been placed into one of the inputs. Here is an example of one of my table rows.

       <tr id="num_1">
                <td><input id="printLoad_1" type="text" style="width:700px;" /></td>
       </tr>

tymeJV · Accepted Answer · 2013-06-13 16:07:25Z

1

Probably something like this:

var inputLength = $("input[id^='printLoad']").length;

for (var i = 1; i <= inputLength; i++) {
    $('input[id=printLoad_' + i + ']').val($('input[class=printArea_' + i + ']').val());
    if ($('input[id=printLoad_1]').val($('input[class=printArea_1]').val() == "") {
        $("#num_" + i).hide();
    }
}

answered Jun 13, 2013 at 16:07

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2089255 Over a year ago

There is an error on the If line, I have no idea what it is either lol.

tymeJV Over a year ago

@user2089255 Loops are definitely something to familiarize yourself with, glad I could help. If it answers your question, please mark it as an answer :)

user2089255 Over a year ago

Thanks guys, appreciate the help. This worked well for my needs!

Collectives™ on Stack Overflow

jQuery print function, how to use iteration?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related