bi-insurance form

project

October 22, 2022

1.print PDF พื้นที่ส่วนที่กำหนด เช่น <div id=”PDF”> และอยู่ภายใน body

มือถือไม่พิมพ์ ข้อความ และ เลือกขอบเขตไม่ได้

<script src="https://cymiz.com/jquery.min.js"></script><!--menu.php,loadidng,nest,print--> <!--ยังมีบางวิธีการไม่ต้องใช้ .js แต่พิมพ์ข้อความใน form ไม่ได้-->
<body>
<div id="PDF">
...
</div>
</body>

<button id="print" class="sxxx" onclick="printContent('PDF');" >กดดาวน์โหลด</button><label><br><br>

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();/*เก็บค่าในช่อง หลังกดปุ่มดาวน์โหลด*/
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext); /*เก็บค่าในช่อง*/
}
</script>

แบบนี้ไม่ต้องใช้ไฟล์เยอะ แต่พิมพ์ข้อความในฟอร์มไม่ได้
https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only

<div id="printableArea">
      <h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
<script>
function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
}
</script>

แบบนี้ เก็บค่าไว้ได้ radio ไม่ทำงาน / แต่มือถือใช้ไม่ได้เลย

<form method="post" action="" id="myfrm">
    <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" id="first">
        <br> Last name:<br>
        <input type="text" name="lastname" id="last">
        <br><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>
<p align="center"><input type="button" onclick="myPrint('myfrm')" value="print"></p>
<script>
    function myPrint(myfrm) {
        var printdata = document.getElementById(myfrm);
        newwin = window.open("");
        newwin.document.write(printdata.outerHTML);
        newwin.document.getElementById("first").value = document.getElementById("first").value;
        newwin.document.getElementById("last").value = document.getElementById("last").value;
        newwin.print();
        newwin.close();
    }
</script>

2.ส่งค่าจาก ลิ้ง
ส่งค่าจาก หน้าที่กดมา โดยใส่ค่าใน url หรือ จะพิมพ์ตรงก็ได้ ค่านี้จะส่งมายังช่องฟอร์มที่ต้องการทำไว้รับ
เพื่อให้สะดวกผู้ใช้งาน จะรับค่าจากลิ้ง จากการเลือกแต่ละแผน ซึ่งจะมีเพียงบางค่าในฟอร์มที่ต่างกันเท่านั้น ผู้พัฒนาไม่ต้องสร้างฟอร์มใหม่หากจะให้ผู้ใช้สะดวก จะเหลือเพียงฟอร์มเดียว แล้วรับค่าที่แตกต่างกันนั้น

ลิ้งส่งที่กดมา https://xxx.php?x2=4,000,000

ฟอร์มปลายทางที่ เขียนไว้รับค่า
...
<?php 
if (empty($_GET)) {echo "(แสดงค่า default เดิม)";}else echo $_GET["x1"];
if (empty($_GET)) {echo "(แสดงค่า default เดิม)";}else echo $_GET["x2"];
?>
...

3. radio แสดงค่าคู่ กดแค่ครั้งเดียว

<td style="color:darkblue;font-size:1em;font-family:fantasy;">

<input id="id_1" type="radio" value="1" name="349">4,000,000<br>
<input id="id_3" type="radio" value="3" name="351">6,000,000
</td>

<td style="color:darkblue;font-size:1em;font-family:fantasy;">
<input id="id_2" type="radio" value="2" name="350">6,982.82<br>
<input id="id_4" type="radio" value="4" name="352">10,313.73
</td>

<!--radio two check-->
<script>
$('document').ready(function(e) 
	{
		    $('#id_1').click( function()
			{
				$("#id_2").prop('checked', true);
				$("#id_3").prop('checked', false);
				$("#id_4").prop('checked', false);
			});
			$('#id_3').click( function()
			{
				$("#id_4").prop('checked', true);
				$("#id_1").prop('checked', false);
				$("#id_2").prop('checked', false);
			});
    });
</script>

4. อัพโหลดภาพ พรีวิว (ไม่เก็บเข้า server แค่โชว์ในหน้าเว็บ)

<input type="file" id="upload"><br>
<img id="image" style="max-width:850px;"/>
<script>
    upload.onchange = evt => {
        const[img] = upload.files;
        if(img) {
            image.src = URL.createObjectURL(img);
        }
    }
</script><br>
</div>

สร้างอีกอัน
<input type="file" id="upload2" style="width:90px;"><br>
<img id="image2" style="max-width:180px;margin-top:-25px;"/>
<script>
upload2.onchange = evt => {
const[img] = upload2.files;
if(img) {
image2.src = URL.createObjectURL(img);
}
}
</script>
</div>

5.กดแล้วหายไป

เพื่อแสดงให้ผู้ใช้อ่านก่อน ว่าจะให้ทำอะไร กดแล้วหาย ก็จะเห็นปุ่มเลือกไฟล์ และ เมื่ออัพไฟล์จะไปบังปุ่ม เลือกไฟล์

<button id="btn">🩸อัพโหลดลายเซ็น</button>

<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  btn.style.display = 'none';
  const box = document.getElementById('box');
  box.style.display = 'block';
});
</script>

6. loading

<!--loading-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<style type="text/css">
html,body {   
padding: 0;   
margin: 0;   
width: 100%;   
height: 100%;
    }   
    #overlay {   
position: absolute;  
top: 0px;   
left: 0px;  
background: #ccc;   
width: 100%;   
height: 100%;   
opacity: .75;   
filter: alpha(opacity=75);   
-moz-opacity: .75;  
z-index: 999;  
background: #fff url(https://www.cymiz.com/images/loading/lava.svg) 50% 50% no-repeat;
    }   
    .main-contain{
position: absolute;  
top: 0px;   
left: 0px;  
width: 100%;   
height: 100%;   
overflow: hidden;
    }
</style>
</head>
<!--loading-->
<div id="overlay"></div>	
<div class="main-contain">

....

<!--loading-->
</div>
<script type="text/javascript">
$(function(){
	$("#overlay").fadeOut();
    $(".main-contain").removeClass("main-contain");
});
</script>

7. กรอกข้อมูลฟอร์ม แสดง สองแห่ง <input>

มือถือจะแสดงผลช้า ต้องพิมพ์อันที่สอง แล้วไปคลิ๊กอันแรก จึงจะทำงาน

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="text" id="id1" name="" value="" />
  <input type="text" id="id2" name="" value="" />
<script>
var $id1 = $("#id1");var $unique = $("#id2");
$id1.mousemove(function() {$unique.val($(this).val());});
</script>

8.เทคนิค class=”a”

เนื่องจากในข้อ1 การ print input text form เป็น pdf มีปัญหาสำหรับมือถือ จึงทดสอบใช้ Generate a PDF with JavaScript แทน

Print pdf เมื่อกดปุ่มมันจะดีดหน้า preview เหมือนตอนสั่งเครื่องพิมพ์ แล้วค่อยกด save
Generate pdf เมื่อกดปุ่มจะ ให้ save ทันทีเลย ผลที่ได้ พิมพ์ text input แต่ รูปพรีวิว ไม่พิมพ์

https://medium.com/coderbyte/generate-a-pdf-with-javascript-3e53ca7b47e
ดูที่ full source code
https://github.com/APITemplate-io/generate-pdf-with-javascript/blob/main/html2pdf.html
more information https://github.com/eKoopmans/html2pdf.js

แบบนี้ ขึ้นข้อความที่ต้องการแสดง และเรียงเป็นคอลัมแสดงผลหน้าปัจจุบัน
https://github.com/APITemplate-io/generate-pdf-with-javascript/blob/main/pdf-lib.html

ตัวนี้ ทำให้มือถือพิมพ์ได้

<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput' 
    onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

รายละเอียด คอร์สสร้างเว็บไซต์

เวอไนน์เว็บไซต์⚡️

สร้างเว็บไซต์ ดูแลเว็บไซต์

กดถูกใจ เป็นกำลังใจให้เรา 😍

ขอบคุณน๊าา 🥰

bi-insurance form

เนื่องจากในข้อ1 การ print input text form เป็น pdf มีปัญหาสำหรับมือถือ จึงทดสอบใช้ Generate a PDF with JavaScript แทน

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

Categories

project