SELF DECLARATION | SOURCE CODE

Text Box with Copy Option
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Microsoft Word - 8M5-*M0.>#?$ ˘K7#> *$M0</title>
    <meta name="author" content="Devnand Mishra" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            text-indent: 0;
        }
        
        .s1 {
            color: black;
            font-family: "Nirmala UI", sans-serif;
            font-style: normal;
            font-weight: normal;
            text-decoration: underline;
            font-size: 14pt;
        }
        
        p {
            color: black;
            font-family: "Nirmala UI", sans-serif;
            font-style: normal;
            font-weight: normal;
            text-decoration: none;
            font-size: 12pt;
            margin: 0pt;
        }
        
        .s2 {
            color: black;
            font-family: "Times New Roman", serif;
            font-style: normal;
            font-weight: normal;
            text-decoration: none;
            font-size: 12pt;
        }
        
        .s3 {
            color: #00F;
            font-family: "Times New Roman", serif;
            font-style: normal;
            font-weight: normal;
            text-decoration: none;
            font-size: 12pt;
        }
        
        .spacer {
            display: inline-block;
            width: 50px;
            /* 5 spaces */
        }
        
        img {
            max-width: 100px;
            max-height: 50px;
        }
    </style>
</head>

<body>
    <form id="declarationForm">
        <p style="text-indent: 0pt;text-align: left;"><br /></p>
        <p class="s1" style="padding-left: 53pt;text-indent: 0pt;text-align: center;"> संख्या-874/एक-9-2014-रा-9 दिनांक 16 जून 2014 का संलग्नक</p>
        <p style="text-indent: 0pt;text-align: left;"><br /></p>
        <p class="s1" style="text-indent: 0pt;text-align: center;">स्व-प्रमाणित घोषणा-पत्र</p>
        <p style="text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 10pt;text-indent: 0pt;text-align: left;">
            मै <input type="text" name="applicantName" placeholder="Name" required /><span class="spacer"></span>पुत्र/पुत्री <input type="text" name="parentName" placeholder="Parent's Name" required />
        </p>
        <p style="padding-top: 1pt;text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 10pt;text-indent: 0pt;text-align: left;">
            उम्र <input type="number" name="age" placeholder="Age" required /><span class="spacer"></span>वर्ष <input type="date" name="date" required /><span class="spacer"></span> व्यवसाय <input type="text" name="occupation" placeholder="Occupation"
                required />
        </p>
        <p style="padding-top: 1pt;text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;">
            निवासी <input type="text" name="address" placeholder="Address" required />
        </p>
        <p style="padding-top: 3pt;text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 5pt;text-indent: 0pt;line-height: 145%;text-align: left;">
            प्रमाणित करते हुये घोषणा करता हूँ कि आवेदन पत्र मे दिये गये विवरण/तथ्य मेरी व्यक्तिगत जानकारी एवं विश्वास में शुद्ध एवं सत्य हैं। मैं मिथ्या विवरणों/तथ्यों को देने के परिणामों से भली-भाति अवगत हूँ। यदि आवेदन पत्र में दिए गये कोई विवरण/तथ्य मिथ्या पाये
            जाते हैं, तो मैं,मेरे विरुद्ध भा0द0वि0 1960 की धारा-199 व 200 एवं प्रभावी किसी अन्य विधि के अंतर्गत अभियोजन एवं दण्ड के लिये,स्वयं उत्तरदायी होऊँगा ।
        </p>
        <p style="text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;">
            स्थान <input type="text" name="place" placeholder="Place" required /><span class="spacer"></span>आवेदक के हस्ताक्षर <input type="file" accept="image/*" id="signatureUpload" required />
        </p>
        <p style="padding-top: 1pt;text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;">
            दिनांक <input type="date" name="date" required /><span class="spacer"></span>आवेदक का नाम <input type="text" name="applicantFullName" placeholder="Applicant's Full Name" required />
        </p>
        <p style="text-indent: 0pt;text-align: left;"><br /></p>
        <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;">
            <button type="button" onclick="submitForm()">Submit</button>
        </p>
    </form>

    <script>
        function submitForm() {
            const form = document.getElementById('declarationForm');
            if (form.checkValidity()) {
                const inputs = form.querySelectorAll('input[type="text"], input[type="number"], input[type="date"]');
                inputs.forEach(input => {
                    const value = input.value;
                    const span = document.createElement('span');
                    span.style.fontWeight = 'bold';
                    span.textContent = value;
                    input.replaceWith(span);
                });

                const signatureUpload = document.getElementById('signatureUpload');
                if (signatureUpload.files.length > 0) {
                    const img = document.createElement('img');
                    img.src = URL.createObjectURL(signatureUpload.files[0]);
                    signatureUpload.replaceWith(img);
                }

                const submitButton = document.querySelector('button');
                submitButton.textContent = 'Print';
                submitButton.onclick = function() {
                    hideButtons();
                    window.print();
                    restoreButtons();
                };

                const downloadButton = document.createElement('button');
                downloadButton.textContent = 'Download as JPG';
                downloadButton.id = 'downloadButton';
                downloadButton.onclick = function() {
                    hideButtons();
                    html2canvas(document.body).then(canvas => {
                        const link = document.createElement('a');
                        link.download = 'form.jpg';
                        link.href = canvas.toDataURL('image/jpeg');
                        link.click();
                        restoreButtons();
                    });
                };
                document.body.appendChild(downloadButton);
            } else {
                alert('Please fill all required fields.');
            }
        }

        function hideButtons() {
            document.querySelector('button').style.display = 'none';
            const downloadButton = document.getElementById('downloadButton');
            if (downloadButton) downloadButton.style.display = 'none';
        }

        function restoreButtons() {
            document.querySelector('button').style.display = 'inline';
            const downloadButton = document.getElementById('downloadButton');
            if (downloadButton) downloadButton.style.display = 'inline';
        }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</body>

</html>
Search Your Topic!

SELF DECLARATION | SOURCE CODE

एक टिप्पणी भेजें

0 टिप्पणियाँ

Search Your Topic !

Menu Footer Widget

Popular Posts

HTML Text Formatting

HTML ZERO TO HERO

HTML Editors

Mega Menu Code for Blogger site

HTML Basic

Tags

Recent Post

HTML Editors

HTML Basic

HTML Elements

संपर्क फ़ॉर्म

Label

BIG TECHNICAL MINDS

Search Your Topic!

SELF DECLARATION | SOURCE CODE

एक टिप्पणी भेजें

0 टिप्पणियाँ

Search Your Topic !

Menu Footer Widget

Social Plugin

Popular Posts

Tags

Recent Post

संपर्क फ़ॉर्म

Label

🎉 Happy New Year! 🎉

Powered By BIG TECHNICAL MINDS

BIG TECHNICAL MINDS
