Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown?

Check out this image for reference

I would like to achieve something similar, how can I do that? Any assistance would be highly appreciated. :)

Here is another image for better understanding

Lastly, here is a snippet of my code.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function printWebpage(t) {
            t.style.display = "none";
            window.print();
            t.style.display = "block";
        }
    </script>
</head>
<body>
    <h1>ALQUIZA SURVEYING OFFICE</h1>
    <h3>CONTRACTUAL PAYROLL</h3>
    Name: <input type="text" id="name" name="name"/>
    <br/><br/>
    Survey: <input type="text" id="survey" name="survey"/>
    <br/><br/>
    Payment:
    <select id="payment" name="payment">
        <option>Choose</option>
        <option>Single</option>
        <option>Double</option>
    </select>
    <br/><br/>
    Team:
    <select id="team" name="team">
        <option>Choose</option>
        <option>Team A</option>
        <option>Team B</option>
    </select>
    <br/><br/>
    <button onclick="printWebpage(this)">Print Webpage</button>
</body>
</html>

Answer №1

If you're interested, check out this related question:

Answer №2

Learn about the benefits of using CSS media queries:

/* Specific styling for print mode only */
@media print {
    /* Customize your elements here */
    input[type=text] {
        border: none;
    }
    /* ... */
}

Check out this tutorial to understand how to implement them in your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the initial 100 links using XPath and PHP

I wrote the following code to extract href's (links) from a web resource that contains more than 1000 links: $dom = new DOMDocument(); @$dom->loadHTMLFile('https://www.domain.me/'); $xpath = new DOMXPath($dom); $entries = $xpath->quer ...

Set YouTube Playlist to start from a random index when embedded

I've been trying to figure out how to set my embedded playlist to start with a random video. Here's what I attempted: <iframe src="https://www.youtube.com/embed/videoseries?list=PLPmj00V6sF0s0k3Homcg1jkP0mLjddPgJ&index=<?php print(ran ...

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

Utilizing Adjacent Sibling Selectors within the context of a specific enclosing class

I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...

The Mantine date picker is causing an error stating that objects are not valid as a React child

I'm currently experimenting with utilizing Mantine Date in NextJS. The goal is to have the selected date displayed in the HTML text heading when a user clicks on it. For instance, if a user selects January 1st, 2023, the text should show like this: Da ...

Utilize JavaScript to extract an image from an external URL by specifying its attributes (id, class)

Is it possible to fetch an image from an external website by using its CSS id or class in conjunction with JavaScript/jQuery's get methods? If so, could someone provide guidance on how to achieve this task? ...

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

Encountering a 404 error while trying to use the autolinker

I have been struggling with this issue for the past day and can't seem to solve it on my own. Essentially, I am attempting to use Autolinker.js to automatically convert URLs into clickable hyperlinks in my chat application. However, every time I try ...

Adjusting the height of a row in Bootstrap can sometimes result in column content overflowing

.row-2 { padding: 20px; margin: 100px auto; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 10px; height: 300px; } .fa-solid { ...

H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet: <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="moda ...

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

Add PHP functionality to insert a jQuery array of select2 tags

After browsing numerous threads on various platforms regarding this issue, I have yet to find a solution. Therefore, I am reaching out for help once again. I am currently utilizing the select2 jQuery plugin and aiming to insert tags into an SQL database us ...

Step-by-step guide on positioning mid and bottom text using Bootstrap grid system

After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...

Is it possible to position the Sprite image to the right of the anchor tag?

I have a CSS sprite image that is functioning correctly, but I am encountering an issue where the image is displaying on the left side of the anchor tag's text instead of the right. You can view the sprite image here. Expected result: [Mylinktext]&l ...

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

Organizing CSS DIV code by sections for desktops and mobile devices

My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...