PHP ่javascript เช็คค่าว่างของ Option และ input แบบ Row id array ทำไงงะครับ

[modoindy]

(มีโค๊ด) ..PHP ่javascript เช็คค่าว่างของ Option  และ input  แบบ Row id  array ทำไงงะครับ
คือใน record ที่มีการวนลูปแสดงข้อมูลออกมาหลายๆ record
แต่ล่ะ record 1-4ช่อง ต้องกรอก ให้ครบ ไม่กรอก ไม่ผ่าน
บรรทัดไหนไม่กรอก เลยไม่ต้องตรวจจับเช๊ค
ลองไปส่องคนนี้มา  เหมือนจะ แต่ยัง ... https://www.thaicreate.com/php/forum/021719.html




*******CODE *******

โค้ด เลือก ขยาย

<input type="hidden" name="company_name[]" value="<?php echo $row["company_name"];?>">

    <input type="hidden" name="company_id[]" value="<?php echo $row["company_id"];?>"></td>



     <td>

       <select name="purchase_channel[]" id="purchase_channel[]" >

         <option value="" selected>-Select-</option>

         <option value="Direct">Direct</option>

         <option value="Agent">Agent</option>

       </select></td>

     <td>

       <input name="amount[]" type="text"style="text-align:right" size="4" id="amount<?php echo $i;?>"  

onKeyUp="javascript:doCal(<?php echo $i;?>);"  onChange="JavaScript:chkNum(this)" onKeyPress="return handleEnter(this, event)"></td>

    <td>

      <input name="price[]" type="text"style="text-align:right" size="4" id="price<?php echo $i;?>"  

onKeyUp="javascript:doCal(<?php echo $i;?>);" onChange="JavaScript:chkNum(this)" onKeyPress="return handleEnter(this, event)"></td>

     <td>

       <input name="sum[]" type="text"style="text-align:right" size="4" id="sum<?php echo $i;?>"  onChange="JavaScript:chkNum(this)" onKeyPress="return handleEnter(this, event)" readonly/></td>

   </tr>

<?php

 $i++;

}

?>

*******CODE *******[/color][/b]

[BOS]

อันนี้ผมลองเขียนเดาๆไปตามประสา เป็นการใช้ javascript ช่วยตรวจสอบก่อนทำการ submit ครับ ลองเอาไปประยุกต์ดูนะครับผม

็HTML

โค้ด เลือก ขยาย


<form action="" onsubmit="validate(this,event)">
<table>
<tr>
<td class="id">A</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td class="id">B</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td class="id">C</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>


Javascript

โค้ด เลือก ขยาย


function validate( el,ev ) {
ev.preventDefault();
var tr = el.querySelectorAll("tr");
var rows = true;
var rowr = [];
for ( var i=0; i<tr.length; i++ ) {
var row = tr[i];
var rowId = row.querySelector(".id");
if ( rowId ) {
rowId = rowId.innerHTML;
var col = row.querySelectorAll("select,input");
var cols = true;
for ( var j=0; j<col.length-1; j++ ) {
if ( col[j].value != col[j+1].value ){
cols = false;           
}
}
rowr.push(cols);
if ( !cols ) {
alert( "กรุณากรอกข้อมูลในแถว [[ " + rowId + " ]] ให้ครบถ้วน" );
//break;
}
}
}
if ( rowr.every(Boolean) ) {
alert( "Let's Go. !" );
//el.submit();
}
}


ref=>https://codepen.io/60ss/pen/bGGQNXL

[modoindy]

 
สุดยอดขอบคุณคราบ  ใช้เลย แต่ๆๆๆ
  ลองกรอก ครบB แล้ว...  มัน ทำไมยัง แจ้งเตือน    ว่าไม่ครบ

อันนี้ผมลองเขียนเดาๆไปตามประสา เป็นการใช้ javascript ช่วยตรวจสอบก่อนทำการ submit ครับ ลองเอาไปประยุกต์ดูนะครับผม

็HTML

โค้ด เลือก ขยาย


<form action="" onsubmit="validate(this,event)">
<table>
<tr>
<td class="id">A</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td class="id">B</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td class="id">C</td>
<td>
<select name="">
<option value="">- Select -</option>
<option value="1">Select 1</option>
<option value="2">Select 2</option>
</select>
</td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>


Javascript

โค้ด เลือก ขยาย


function validate( el,ev ) {
ev.preventDefault();
var tr = el.querySelectorAll("tr");
var rows = true;
var rowr = [];
for ( var i=0; i<tr.length; i++ ) {
var row = tr[i];
var rowId = row.querySelector(".id");
if ( rowId ) {
rowId = rowId.innerHTML;
var col = row.querySelectorAll("select,input");
var cols = true;
for ( var j=0; j<col.length-1; j++ ) {
if ( col[j].value != col[j+1].value ){
cols = false;            
}
}
rowr.push(cols);
if ( !cols ) {
alert( "กรุณากรอกข้อมูลในแถว [[ " + rowId + " ]] ให้ครบถ้วน" );
//break;
}
}
}
if ( rowr.every(Boolean) ) {
alert( "Let's Go. !" );
//el.submit();
}
}


ref=>https://codepen.io/60ss/pen/bGGQNXL

[BOS]

ขอโทษทีครับ ผมพลาด

แก้ตรงนี้นะครับ

จาก

โค้ด เลือก ขยาย


for ( var j=0; j<col.length-1; j++ ) {
if ( col[j].value != col[j+1].value ){
cols = false;           
}
}

เป็น

โค้ด เลือก ขยาย


for ( var j=1; j<col.length; j++ ) {
var b = col[j-1].value ? 1 : 0;
var c = col[j].value ? 1 : 0;
if ( b != c ){
cols = false;           
}
}

https://codepen.io/60ss/pen/bGGQNXL

สุดยอดขอบคุณคราบ  ใช้เลย แต่ๆๆๆ
   ลองกรอก ครบB แล้ว...  มัน ทำไมยัง แจ้งเตือน    ว่าไม่ครบ

[modoindy]

ได้แล้วคราบ ผ่านไป  alert( "Let's Go. !" );
****************************
อยากเข้าใจ ช่วยอธิบายขอ รุ้บ้างได้ไหมคราบ

ถ้า ค่ามัน มีมากกว่า acb  เป็น array echo $i  ++

<td class="id">(<?php echo $i;?>)<?php echo $row["company_name"];?></td>

เราจะกำหนดอย่างไร
var b = col[j-1].value ? 1 : 0;
   var c = col[j].value ? 1 : 0;

ขอโทษทีครับ ผมพลาด

แก้ตรงนี้นะครับ

จาก

โค้ด เลือก ขยาย


for ( var j=0; j<col.length-1; j++ ) {
if ( col[j].value != col[j+1].value ){
cols = false;          
}
}

เป็น

โค้ด เลือก ขยาย


for ( var j=1; j<col.length; j++ ) {
var b = col[j-1].value ? 1 : 0;
var c = col[j].value ? 1 : 0;
if ( b != c ){
cols = false;            
}
}

https://codepen.io/60ss/pen/bGGQNXL

[BOS]

ก็ไม่ต้องกำหนดอะไรเพิ่มเติมนะครับ เพราะใน js function ที่ผมเขียน มันก็วน loop เอาค่าทั้งหมดมาตรวจสอบอยู่แล้วครับ
ส่วนชุดนี้เป็นการตรวจสอบค่า input ใน แต่ละ row คือถ้ามีการป้อนข้อมูลใน input ตัวใดๆใน row นั้นๆ แต่ป้อนไม่ครบ ก็จะเป็น false ส่วน b และ c เป็นเพียงตัวแปร ที่ใช้เก็บค่า input ใน loop เพื่อมาเปรียบเทียบ (ไม่ได้เกี่ยวกับจำนวนหรือชื่อแถวนะครับ)

โค้ด เลือก ขยาย


var cols = true;
for ( var j=1; j<col.length; j++ ) {
var b = col[j-1].value ? 1 : 0; // b : before : ค่าของ input ตำแหน่งก่อนหน้า
var c = col[j].value ? 1 : 0; // c : current : ค่าของ input ณ ตำแหน่งปัจจุบัน
if ( b != c ){
cols = false;           
}
}


ส่วน ถ้าค่า มีมากกว่า abc ก็มีการวน loop tr อยู่แล้วไงครับ จะมีอีกสักกี่แถว มันก็วนเอามาจนหมดครับ

สรุปแล้ว โค้ดชุดนี้ยังใช้ได้ แม้จะมีการเพิ่มแถวใหม่อีก หรือ เพิ่ม input อื่นๆอีกกี่ตัวก็ตาม แค่เป็นไปตามรูปแบบที่กำหนดไว้ประมาณนี้ครับผม

อยากเข้าใจ ช่วยอธิบายขอ รุ้บ้างได้ไหมคราบ

ถ้า ค่ามัน มีมากกว่า acb  เป็น array echo $i  ++

<td class="id">(<?php echo $i;?>)<?php echo $row["company_name"];?></td>

เราจะกำหนดอย่างไร
var b = col[j-1].value ? 1 : 0;
   var c = col[j].value ? 1 : 0;

[modoindy]

แล้ว ผมจะให้
<form action="/action_page.php
 ต้องไปใส่ ตรงไหน ของ javaคราบ กรอกครบแล้ว  
 alert( "Let's Go. !" );    
ขอบคุณมากเลยคราบ

ก็ไม่ต้องกำหนดอะไรเพิ่มเติมนะครับ เพราะใน js function ที่ผมเขียน มันก็วน loop เอาค่าทั้งหมดมาตรวจสอบอยู่แล้วครับ
ส่วนชุดนี้เป็นการตรวจสอบค่า input ใน แต่ละ row คือถ้ามีการป้อนข้อมูลใน input ตัวใดๆใน row นั้นๆ แต่ป้อนไม่ครบ ก็จะเป็น false ส่วน b และ c เป็นเพียงตัวแปร ที่ใช้เก็บค่า input ใน loop เพื่อมาเปรียบเทียบ (ไม่ได้เกี่ยวกับจำนวนหรือชื่อแถวนะครับ)

โค้ด เลือก ขยาย


var cols = true;
for ( var j=1; j<col.length; j++ ) {
var b = col[j-1].value ? 1 : 0; // b : before : ค่าของ input ตำแหน่งก่อนหน้า
var c = col[j].value ? 1 : 0; // c : current : ค่าของ input ณ ตำแหน่งปัจจุบัน
if ( b != c ){
cols = false;            
}
}


ส่วน ถ้าค่า มีมากกว่า abc ก็มีการวน loop tr อยู่แล้วไงครับ จะมีอีกสักกี่แถว มันก็วนเอามาจนหมดครับ

สรุปแล้ว โค้ดชุดนี้ยังใช้ได้ แม้จะมีการเพิ่มแถวใหม่อีก หรือ เพิ่ม input อื่นๆอีกกี่ตัวก็ตาม แค่เป็นไปตามรูปแบบที่กำหนดไว้ประมาณนี้ครับผม

อยากเข้าใจ ช่วยอธิบายขอ รุ้บ้างได้ไหมคราบ

ถ้า ค่ามัน มีมากกว่า acb  เป็น array echo $i  ++

<td class="id">(<?php echo $i;?>)<?php echo $row["company_name"];?></td>

เราจะกำหนดอย่างไร
var b = col[j-1].value ? 1 : 0;
   var c = col[j].value ? 1 : 0;

[BOS]

แล้ว ผมจะให้
<form action="/action_page.php  ต้องไปใส่ ตรงไหน ของ javaคราบ กรอกครบแล้ว 
  ยังเด้ง  alert( "Let's Go. !" );   

ขอบคุณมากเลยคราบ
ไปถามคนในเฟส ไม่แนะนำ มีแต่ อวดรู้
    

แก้จาก

โค้ด เลือก ขยาย

if ( rowr.every(Boolean) ) {
alert( "Let's Go. !" );
//el.submit();
}

เป็น

โค้ด เลือก ขยาย

if ( rowr.every(Boolean) ) {
el.submit();
}

ครับ

[modoindy]

                  

[pinkam0327]

ขอดูโค้ดได้ไหมครับ

1.พอไม่กรอก row  ** อะไรเลย   กด submit ได้เฉย 55  // จะหาทางแก้ดูคราบ
2 . ตย ภาพ .กรอกเพียง แค่ 1 row .. เด้ง java มาหมด เลย  ตัวอย่างมี row 12 
    แถม input ที่ซ่อน  td id เด้งมาโชว์ 12 ไล่กด โอเค   javascript:void(0);

[modoindy]

                 

[modoindy]

เราจะใส่อะไร..เพิ่มครบ
ถ้าไม่กรอกเลย ดัก ให้เตือนกรอกสักช่อง
เพราะตอนนี้ ไม่่กรอกเลยกด
ไปที่ action
เลย คราบ  el.submit();[/color][/size]

ขอโทษทีครับ ผมพลาด

แก้ตรงนี้นะครับ

จาก

โค้ด เลือก ขยาย


for ( var j=0; j<col.length-1; j++ ) {
if ( col[j].value != col[j+1].value ){
cols = false;          
}
}

เป็น

โค้ด เลือก ขยาย


for ( var j=1; j<col.length; j++ ) {
var b = col[j-1].value ? 1 : 0;
var c = col[j].value ? 1 : 0;
if ( b != c ){
cols = false;            
}
}

https://codepen.io/60ss/pen/bGGQNXL

[/quote]