เงื่อนไขการ show/hide textbox มาให้กรอกข้อมูล ในการ clone หลายแถว

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เงื่อนไขการ show/hide textbox มาให้กรอกข้อมูล ในการ clone หลายแถว

เงื่อนไขการ show/hide textbox มาให้กรอกข้อมูล ในการ clone หลายแถว

ตามรูปนะคะ คือ เวลาเลือก select ประเภท = เช่า จะขึ้น textbox ระยะเวลาการเช่า มาให้กรอกข้อมูล
แต่พอกดปุ่ม บวก เพื่อจะเพิ่มสินค้าอีกตัว ยังไม่ทันเลือกประเภท มันก็ clone ตัว textbox มาด้วยค่ะ

codeการ clone
<script language="JavaScript">
$(document).ready(function(){
    $("#addRow").click(function(){
        var html = $(".tramount:last").html();
        var last_id = parseInt($(".tramount:last").attr("id").split("_")[1]);
        var new_id = last_id+1;
        var newRow = '<tr class="tramount" id="tramount_'+new_id+'">'; 
        newRow += html.replace(new RegExp("_"+last_id,"g"), "_"+new_id);
        newRow += "</tr>";
        $("#tblamount tbody").append(newRow);
    });
    $("#removeRow").click(function(){
        if($(".tramount").length > 1) $(".tramount:last").remove()
    });
    $('input[name="cost[]"], input[name="amount[]"]').change(function(){
        var total = 0.0;
        $(".tramount").each(function(){
            var now_id = parseInt($(this).attr("id").split("_")[1]);
            var cnt = parseInt($("#amount_"+now_id).val());
            var price = parseFloat($("#cost_"+now_id).val());
            var row = (cnt*price);
            if(row!= NaN && row>0) total += row;            
        });
        $("#sum").val(total);        
    });
});
</script>
code การ show/hide textbox 
<script language="javascript">
$(document).ready(function() {
	$('#rentPrice').hide(); //hide field on start
 
	$('#type_1').change(function() {
 
	 var $index = $('#type_1').index(this);
 
	 if($('#type_1').val() == 'เช่า') { //if this value is NOT selected
	 $('#rentPrice').show(); //this field is hidden
	 } 
	 else {
	 $('#rentPrice').hide();//else it is shown
 
	 }
        });
 });
</script>
อยากรู้ว่าจะทำยังไง ให้ไม่ clone มาทั้งหมดค่ะ ให้โชว์ textbox เฉพาะตอนเลือก select ประเภท = เช่า เท่านั้น


Saranya2532 25-08-2014 14:06:32

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 11
ขอบคุณมากๆเลยค่ะ ที่ช่วยเหลือ smileysmiley


saranya2532 29-08-2014 16:39
 ความคิดเห็นที่ 12
ถ้าต้องการ clone ข้อมูลที่เป็น <input type="radio"/>
 เช่น 
 <td>
<input type="radio" name="status[]"  value="new">new<br/>
<input type="radio" name="status[]"  value="used">used
</td>
<td>
<input type="radio" name="updates[]"  value="0">out of Stock<br/>
<input type="radio" name="updates[]"  value="1">สินค้าว่าง<br/>
<input type="radio" name="updates[]"  value="2">งานเช่า
</td>

ถ้าต้องการใส่ข้อมูลตรงนี้ต้องใส่ว่าไงค่ะ
<script type="text/javascript">
$(function () {

    
    
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
            $(".datarow:eq(0)").clone(true)
        .find("input").attr("value", "").end()
        .find("select").attr("value", "").end() //     
    .appendTo($(".place-datarow"));

	
    $("#removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});
});
</script>     



saranya2532 16-09-2014 11:53
 ความคิดเห็นที่ 13
การ clone เป้นการเลือก ทั้งแถว ถ้าจะให้ clone อะไร ก็เอาส่วนนั้นไปไว้ใน tr ที่ต้องการ clone

ส่วนกำหนดให้ล้างค่าเมื่อ clone แล้ว

            $(".datarow:eq(0)").clone(true)  
        .find("input").attr("value", "").end()  
        .find("select").attr("value", "").end() //       
        .find(":radio").prop("checked",false).end() //       
    .appendTo($(".place-datarow"));  
  



ninenik 16-09-2014
 ความคิดเห็นที่ 14
ใช่ค่ะ ก็ทำเป็น  TR แต่ตอนเรียกมาใช้ มันเป็นแบบรูปค่ะ



คือ ถ้าเพิ่มอีกแถวนึง ที่เลือก radio button ไว้ในแถวแรก จะมาอยู่ที่แถว2 แทน  อย่างในรูป สภาพที่เห็นจะเป็น new/used/new/used ซึ่งสามารถเลือกได้แค่อันเดียวค่ะ 


saranya2532 16-09-2014 15:32
 ความคิดเห็นที่ 15
radio ติดชื่อเหมือนกันเลยไม่ได้ ต้องประยุกต์ เปลี่ยนชื่อ radio แต่ละชุด  อย่างแรกให้ กำหนด css ให้แต่ละชุด เอาไว้อ้างอิง ด้วย class

 <td>  
<input type="radio" class="css_radio1" name="status[]"  value="new">new<br/>  
<input type="radio" class="css_radio1" name="status[]"  value="used">used  
</td>  
<td>  
<input type="radio" class="css_radio2" name="updates[]"  value="0">out of Stock<br/>  
<input type="radio" class="css_radio2" name="updates[]"  value="1">สินค้าว่าง<br/>  
<input type="radio" class="css_radio2" name="updates[]"  value="2">งานเช่า  
</td>  

แล้วก็ใช้ ตัวแปร กำหนดลำดับ สำหรับเปลี่ยนชื่อ  ถ้าเพิ่มแถวก็ + ค่า ลดแถว ก็ลดค่า
ค่าที่ได้ หรือชื่อใหม่แต่ละแถว ก็จะเป็น status[] status1[] status2[.....

ลองไล่ดูโค้ดด้านล่าง แล้วดึงที่ใช้ไปประยุกต์]



    var indexObj=0;
    $("#addRow").on("click",function(){  
        indexObj++;
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .find(":radio.css_radio1").prop("checked",false).attr("name","status"+indexObj+"[]").end()  //  
        .find(":radio.css_radio2").prop("checked",false).attr("name","updates"+indexObj+"[]").end()  //  
        .appendTo($(".place-datarow"));     
          
    }); 
    
    $("#removeRow").on("click",function(){   
        indexObj--;




ninenik 16-09-2014
 ความคิดเห็นที่ 16
เรื่อง clone 
สำหรับการ upload file 
ถ้าใส่โค้ด <input type="file" name="fileUpload[]" value="<? echo $rs['file'];?>"/> ค่าจะไม่ขึ้นตามรูป


ถ้าใส่โค้ด <input type="file" name="fileUpload[]" /><? echo $rs['file'];?> ค่าจะขึ้นตามรูป


จะทำยังไงให้เห็นชื่อไฟล์ และสามารถ เพิ่มการ clone แถวโดยที่ ไม่ขึ้นชื่อไฟล์ก่อนๆคะ 
ตย. กด+ เพื่อเพิ่ม แต่มีชื่อไฟล์แรกติดมาด้วย 


ในโค้ดส่วน script นี้ต้องแก้ว่ายังไงคะ

$(".firstTr:eq(0)").clone(true) 
.find("input").attr("value","").end()
.find("textarea").attr("value","").end()
.find("select").attr("value","").end()
.appendTo($("#myTbl"));














bsaranya 10-07-2015 16:30
 ความคิดเห็นที่ 17
คลุมข้อมความด้วย div แล้วกำหนด class .ให้เช่น

<div class="show_file_name">Filename </div>     


ส่วนการจัดการในโค้ด clone ก็กำหนดเพิ่มประมาณนี้ เช่น

$(".firstTr:eq(0)").clone(true)   
.find("input").attr("value","").end()  
.find("textarea").attr("value","").end()  
.find(".show_file_name").text("").end()
.find("select").attr("value","").end()  
.appendTo($("#myTbl"));    


ninenik 10-07-2015
 ความคิดเห็นที่ 18
ขอบคุณค่ะ


bsaranya 13-07-2015 11:03






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ