Printing form

[msullens73]

I've created an order form that calculates a total for the quantity of a product ordered and also gives a grand total. What I would like to be able to do is allow the customer to print the form with only the fields they have "filled" in. The quantity is a drop down list of numbers and then the total is shown as well for each item. I don't want all items to print, only the ones they've ordered along with the contact info they have also entered.

TIA

[rocknbil]

No Javascript required; create a set of print selectors for the target items. Example, when displayed in the browser,

<input type="text" class="order-form">

Is a regular text field, you can style the class however you like (don't need to specify @media screen, but can.) but add this selector,

@media print {
.order-form { border:none; }
.non-print {display: none; }
}

And it will print without the text field border. You can do

<input type="submit" class="non-print" value="Submit">

for any items in the page - not just the form - you do not want to print.

[Fotiman]

I don't think rocknbil's suggestion is quite what you're looking for, but close. It's just missing the piece that applies to "only the fields they have filled in".

So start your form out with each input element having the non-print class. Then add onchange event handlers that remove the class if the value is not empty. That way, only the items that don't have that class will get printed.

[msullens73]

ok here's a snippet of the code I'm using for the form. this is one item that when a quantity is selected the javascript populates the total $ amount into the form field. as you can see the onChange being used as the quantity is changed, this is what handles the calculation.
is there anything other than onChange that will work?

<td><select name="Quantity" size="1" id="proudct1" onChange="quantity1()">
<option>0</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option>
</select></td>
<td>$ 39.00</td>
<td> <input readonly="readonly" type="text" id="item1" size="13"name="item1"></td></tr>