ซึ่งข้อมูลแต่ละอัน จะแบ่งเป็นหน้าแถบเมนู เป็นแบบนี้
โค้ด: เลือกทั้งหมด
<div class="panel-body">
<form class="form-horizontal" name="form" method="post" action="">
<br>
<div class="col-md-12">
<div class="form-group">
<label for="inputname" class="col-sm-2 control-label"><?php echo $lang_name; ?> : </label>
<div class="col-sm-10">
<input required name="name" type="text" class="form-control" placeholder="<?php echo $lang_pleaseyourname ?>" value="">
</div>
</div>
<br>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#html" aria-controls="html" role="tab" data-toggle="tab"><?php echo $lang_htmllist; ?></a></li>
<li role="presentation"><a href="#image2" aria-controls="image2" role="tab" data-toggle="tab"><?php echo $lang_imagelist; ?></a></li>
<li role="presentation"><a href="#form2" aria-controls="form2" role="tab" data-toggle="tab"><?php echo $lang_formlist; ?></a></li>
</ul>
<!--------------แถบเมนู code html------------------>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="html"><br>
<div class="col-md-12">
<div class="form-group">
<label for="inputarea-value" class="col-sm-2 control-label"><?php echo $lang_html; ?> :</label>
<div class="col-sm-10">
<div>
<textarea name="html2" id="html2" ></textarea>
<script>
CKEDITOR.replace('html2');
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
</script>
</div>
</div>
</div>
</div>
</div>
<!--------------แถบเมนู image------------------>
<div role="tabpanel" class="tab-pane" id="image2"><br>
<div class="col-md-12">
<div class="form-group">
<label for="inputarea-value" class="col-sm-2 control-label"><?php echo $lang_image; ?> :</label>
<div class="col-sm-10">
<input type="file" name="upload_file" ><br/>
</div>
</div>
</div>
</div>
<!--------------แถบเมนู Form ------------------>
<div role="tabpanel" class="tab-pane" id="form2"><br>
<div class="col-md-9">
<div>
<label for="inputarea-value" class="col-sm-2 control-label"><?php echo $lang_com_logo; ?> :</label>
<div class="col-sm-10">
<input type="file" name="image" ><br />
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_company_name; ?> :</label>
<div class="col-sm-5">
<input type="text" name="com_name" class="form-control" autocomplete="off" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_com_address; ?> :</label>
<div class="col-sm-5">
<input type="text" name="com_address" class="form-control" autocomplete="off" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_com_phone; ?> :</label>
<div class="col-sm-5">
<input type="text" name="com_phone" class="form-control" autocomplete="off" value="">
</div>
<label for="inputarea-value" class="col-sm-1 control-label"><?php echo $lang_com_fax; ?>:</label>
<div class="col-sm-3">
<input type="text" name="com_fax" class="form-control" autocomplete="off" value="">
</div>
</div>
<br><br> <br> <br>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_cus_name; ?> :</label>
<div class="col-sm-5">
<input type="text" name="cus_name" class="form-control" autocomplete="off" value="">
</div>
<label for="inputarea-value" class="col-sm-1 control-label"><?php echo $lang_invoice_number; ?> :</label>
<div class="col-sm-3">
<input type="text" name="invoice_number" class="form-control" autocomplete="off" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_cus_address; ?> :</label>
<div class="col-sm-5">
<input type="text" name="cus_address" class="form-control" autocomplete="off" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_invoice_date; ?> :</label>
<div class="col-sm-5">
<input type="text" name="invoice_date" class="form-control" autocomplete="off" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_cus_tax_id ?> :</label>
<div class="col-sm-3">
<input type="text" name="qty" class="form-control" autocomplete="off" placeholder="" value="">
</div>
<script>
function hiddenn(pvar) {
if(pvar==0){
document.getElementById("branch_no").style.display = 'none';
}else{
document.getElementById("branch_no").style.display = '';
}
}
</script>
<body onload="hiddenn('0')">
<input type="radio" name="branch_no" autocomplete="off" placeholder=""
value="0" onClick="hiddenn('0')" /> <?php echo $lang_id_head_office ?>
<input type="radio" name="branch_no" autocomplete="off" placeholder=""
value="1" onClick="hiddenn('1')" /> <?php echo $lang_branch_no ?>
<textarea rows="1" cols="10" type="text" name="branch_no" id="branch_no" placeholder="สาขาที่"></textarea>
</div><br>
<!---- ตารางในฟอร์ม------->
<div class="row">
<div class="col-md-12 table-responsive" align="center">
<table id="myTable" border='1'>
<tr>
<td align="center" width="10%"><?php echo "ลำดับ"; ?> </td>
<td align="center" width="35%"><?php echo "รายการ"; ?> </td>
<td align="center" width="35%"><?php echo "จำนวน"; ?> </td>
<td align="center" width="20%"><?php echo "ราคา/หน่วย"; ?> </td>
<td align="center" width="40%"><?php echo "จำนวนเงิน"; ?> </td>
</tr>
<td><input type="text" name="idd" class="form-control" autocomplete="off" placeholder="" value=""> </td>
<td>
<input type="text" name="name2" class="form-control" autocomplete="off" placeholder="" value="">
</td>
<td>
<input type="text" name="qty" class="form-control" autocomplete="off" placeholder="" value="">
</td>
<td>
<input type="text" name="price" class="form-control" autocomplete="off" placeholder="" value="">
</td>
<td>
<input type="text" name="total" class="form-control" autocomplete="off" placeholder="" value="">
</td>
</table>
</div>
</div>
<br>
<button onclick="add_row()">+</button>
<button onclick="del_row()">-</button>
<script>
function add_row() {
var table = document.getElementById("myTable");
count_rows = table.getElementsByTagName("tr").length;
var row = table.insertRow(count_rows);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input type='number' name='id'"+count_rows+" value>";
cell2.innerHTML = "<input type='text' name='name2'"+count_rows+" value>";
cell3.innerHTML = "<input type='number' name='qty'"+count_rows+" value>";
cell4.innerHTML = "<input type='number' name='price'"+count_rows+" value>";
cell5.innerHTML = "<input type='number' name='total'"+count_rows+" value>";
}
function del_row(){
var table = document.getElementById("myTable");
count_rows = table.getElementsByTagName("tr").length;
document.getElementById("myTable").deleteRow(count_rows-1);
}
</script>
<!----------------------------->
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_note ?> :</label>
<div class="col-sm-9">
<input type="text" name="note" class="form-control" autocomplete="off" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_payment_method ?> :</label>
<div class="col-sm-9">
<input type="radio" name="payment_method" autocomplete="off" placeholder="" value="cash"> <?php echo $lang_payment1 ?>
<input type="radio" name="payment_method" autocomplete="off" placeholder="" value="tmoney"> <?php echo $lang_payment2 ?>
<input type="radio" name="payment_method" autocomplete="off" placeholder="" value="check"> <?php echo $lang_payment3 ?>
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_bank_name ?> :</label>
<div class="col-sm-9">
<input type="text" name="bank_name" class="form-control" autocomplete="off" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="inputarea-value" class="col-sm-3 control-label"><?php echo $lang_note ?> :</label>
<div class="col-sm-9">
<input type="text" name="note" class="form-control" autocomplete="off" placeholder="" value="">
</div>
</div>
</div>
</div>
</div>
<!-- -----------------ปุ่มคำสั่ง submit / reset--------------->
</div>
</div>
<div class="col-md-12">
<div align="center" class="g-recaptcha" required data-sitekey="<?php echo $keyrecaptcha; ?>"></div><br>
</div><br>
<div class="col-md-12">
<center>
<input class=" btn btn-success" type="submit" name="submit" value="<?php echo $lang_converter; ?>" />
<input type="reset" name="reset" class="btn btn-warning" onclick="window.location = 'index2.php?lang=<?php echo $lang; ?>';">
</center>
</div>
</form>
</div>
สมมติ กรอกข้อมูลฟอร์มแรก ซึ่งฟอร์มของแถบเมนู 2 และ3 นั้นมีค่าว่าง เลยกำหนดให้ insert แค่ตารางของฟอร์มแรกเท่านั้น