How Do I Print Only Full Textarea In Html Form

Question

0.00/5 (No votes)

See more:

i got many textarea how do i send them to print but only the full one if i got an empty one he doesn't print him

thanks for the help

Posted 3-Dec-14 2:43am

Mich1309

Add a Solution

Comments

Ishpreet Kaur 3-Dec-14 11:56am

What you have tried so far? Where did you stuck?
Can you post some code whatever you have tried?

RedDk 3-Dec-14 13:40pm

Often the outlook for printing HTML webpages is grim due to all the weirdness in panels that show in some browsers and fail to load in others. If a print of a page is all you need and you're not too sorry about Visual Studio being only 32-bit, then use VS to open that page in DESIGN mode. Then just DELETE everything that is grubby or not spot on.

Experiment.

3 solutions

Solution 2

If you want to print only content of textarea, you may try this.

For more Information: Print Div Content Using JavaScript[^]

Posted 3-Dec-14 22:45pm

Sk Borhan Uddin

Solution 1

Check if the TextArea is empty or not. You can easily check with the help with JavaScript or jQuery.

Then if the TextArea is not empty after this check, the. Print that.

Demo

[Demo] Hide Empty TextAreas before Printing the Window[^]

Posted 3-Dec-14 7:12am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 3-Dec-14 21:41pm

v2

Comments

Mich1309 4-Dec-14 2:46am

can show me an example please?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-14 2:48am

Did you try anything?

Mich1309 4-Dec-14 3:01am

window.onbeforeprint = function () {
$.each("textarea", function (i, e) {
if (!$(e).val()) {
alert('123');
}
});
};

i want before the the print to hide all empty text area in the form

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-14 3:41am

Don't use this Event as it is not supported by modern browsers. See my updated solution. I have included the demo. See how I have done this.

jaket-cp 4-Dec-14 4:58am

I like your idea, very nice.
I have put in a solution to use css and javascript with your solution in mind.
Please take a look.
Also 5ed yours :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-14 5:05am

That is also cool. :)

Thanks. :)

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Accepted Answer · 2014-12-03T22:55:00

Solution 3

You could try using css and javascript in conjunction to get your desired effect.

CSS

/*for print css - do not display textarea if it has a class of empty*/
@media print {
    textarea.empty{display:none;}
}

JavaScript

//test if textarea has value, during page start-up and onblur, add empty class to textarea if it is empty
$(document).ready(function (){
    $('textarea').each(function (i, e) {
        if (!$(e).val()) {
            $(e).addClass("empty");
        }

        $(e).bind("blur", function() {
            if (!$(this).val()) {
                $(this).addClass("empty");
            }
            else{
                $(this).removeClass("empty");
            }
        });
    });
});

If a container ancestor div is required to not be printed:

CSS

/*change the media print css to not display div*/
@media print {
    div.empty{display:none;}
}

JavaScript

//modify the javascript to point to the ancestor div
//do it for all addClass and removeClass
           //$(e).addClass("empty");
           $(this).parent("div").addClass("empty");

Posted 3-Dec-14 22:55pm

jaket-cp

Updated 3-Dec-14 23:26pm

v2

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Dec-14 5:05am

+5.

jaket-cp 4-Dec-14 5:07am

thanks :)

Mich1309 4-Dec-14 5:05am

i like your solution but i have a small problem near all the textarea i have a label also if the textarea is empty i want that all the line will disappear

Mich1309 4-Dec-14 5:08am

jaket-cp 4-Dec-14 5:28am

I've modify solution, you should be able to figure it out from there.
If not, pop me another comment.
good coding :)

Mich1309 4-Dec-14 6:01am

the labels are still visible
thank you
(:

jaket-cp 4-Dec-14 6:49am

did you get it to work?

Mich1309 4-Dec-14 6:50am

no );

jaket-cp 4-Dec-14 6:52am

okay, so labels are still showing.
are the textarea still showing?

Mich1309 4-Dec-14 6:58am

only the labels are still showing

jaket-cp 4-Dec-14 7:01am

okay, maybe you didn't manage to implement the javascript part correctly.
I forked solutions 1 demo - have a look, it should help you out
http://jsfiddle.net/3wm0gpfa/2/

Mich1309 4-Dec-14 7:04am

let me check

Mich1309 4-Dec-14 7:17am

still not work i think its because the parent("div")

jaket-cp 4-Dec-14 7:21am

Not sure why it is not working for you.
Did you change all to parent("div") as in demo?

Mich1309 4-Dec-14 7:21am

yes very strange

Mich1309 4-Dec-14 7:26am

i don't have a button in my form like u did
i simply want before the print preview to see the form only with the full fields
or maybe because i have different id's on all my divs

jaket-cp 4-Dec-14 7:31am

I left the print button in for testing convenience.
Also the id in the div should not matter, css and javascript are reference the div and not id.
Put the css div.empty{border:solid 5px green;} in to see if the div gets a green border when the textarea is empty.

Mich1309 4-Dec-14 7:34am

Mich1309 4-Dec-14 7:37am

its gettin the green border

Mich1309 4-Dec-14 7:41am

when i'm dropping my css style the the js function work but when its on it dosen't work

Mich1309 4-Dec-14 7:45am

all my div are set with

/*display: inline;*/

when i removed that its worked

jaket-cp 4-Dec-14 7:48am

okay that could be the issue.
I have update the demo with new markup
http://jsfiddle.net/3wm0gpfa/3/
update this one with your one and I will have a look

Mich1309 4-Dec-14 8:05am

its work bro thankssss

jaket-cp 4-Dec-14 8:15am

Okay that is good - glad I could help.
I also worked on another demo http://jsfiddle.net/3wm0gpfa/4/
The reason why it does not work with the style="display:inline" in the div. Due to the nature of css (c for Cascading), the style take precedence over the class.