Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > แก้ไม่ตก เรื่อง javascript (Hide , Show)

แก้ไม่ตก เรื่อง javascript (Hide , Show)

เริ่มหัวข้อใหม่

ฟ้าใส

โพสกระทู้ ( 258 )
บทความ ( 0 )

คือ ตรง select เลือก Type น่ะค่ะ

เมือเลือก GO ก็จะแสดงช่อง GO อย่างเดียว
เมื่อเลือก Comeback ก็จะแสดงช่อง Comeback อย่างเดียว
เมื่อเลือก GO and Comeback ก็จะแสดงช่อง Go and Comeback นะคะ

ในส่วนนี้ทำได้แล้วค่ะ ประเด็นคือ เมื่อคืนค่าให้ Select box เป็น selected แล้ว ตรง Go และ Comeback ไม่แสดงอ่ะค่ะ ต้องแก้ Code อย่างไรคะ

code select box
Code (PHP)

<div class="form-group">
<label>Type</label>
<select class="form-control" name="type" required>
	<option value="">Please Select</option>
	<option>Go Only</option>
	<option>Comback Only</option>
	<option selected='select' value="Go and Comeback">Go and Comeback</option>
</select>
</div>

<div class="form-group" style="width:45%; margin-left:5%" id="go">
<label>Go</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' name="go" class="form-control" value="<?php echo $Start;?>" required>
 <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
 </span>
</div>
</div>

<div class="form-group" style="width:45%; margin-left:5%" id="comeback">
<label>Comeback</label>
<div class='input-group date' id='datetimepicker2'>
 <input type='text' name="comeback" class="form-control" value="<?php echo $End;?>" required>
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
</div>

ส่วนอันนี้เป็น javascript นะคะ
Code (JavaScript)

$(document).ready(function(){
     $("#go").hide();
     $("#comeback").hide();
		     
     $('select').change(function(){	
		        
     var sss =	$(this).val();

     	if(sss == ""){
     		$("#go").hide()
    		$("#comeback").hide();	
     	}

     	if(sss == "Go Only"){
     		$("#go").show()
    		$("#comeback").hide()	
		$("#comeback :input").prop('required',null);		    		
     	}

     	if(sss == 'Comback Only'){
     		$("#go").hide();
		$("#go :input").prop('required',null);		    		
     		$("#comeback").show();
     	}

     	if(sss == "Go and Comeback"){
     		$("#go").show()
     		$("#comeback").show();
     	}
         
   });

รบกวนพี่ๆด้วยนะคะ

Tag : PHP, JavaScript, Windows

Date : 2016-05-10 09:27:21

By : naked13

View : 752

Reply : 5

No. 1

ALTELMA

โพสกระทู้ ( 752 )
บทความ ( 3 )

หมายถึงตอน Refresh หน้าหรือเปล่าครับ?

Date : 2016-05-10 09:53:55

By : ALTELMA

No. 2

ฟ้าใส

โพสกระทู้ ( 258 )
บทความ ( 0 )

ถ้าให้เลือกช่อง Type แบบปกติ มันสามารถทำได้ค่ะ
แต่ถ้าเรากำหนดช่อง Type ให้เป็น selected เหมือนว่ามันทำงานผิดพลาดน่ะค่ะ

ที่ตั้งเป้าไว้คือ ตั้งค่าเริ่มต้นเป็น Go and Comeback (โดยการกำหนดเป็น selected) และช่อง textbox (go และ comeback) แสดงผมน่ะค่ะ

Date : 2016-05-10 10:10:48

By : naked13

No. 3

ALTELMA

โพสกระทู้ ( 752 )
บทความ ( 3 )

ตอบความคิดเห็นที่ : 2 เขียนโดย : naked13 เมื่อวันที่ 2016-05-10 10:10:48

รายละเอียดของการตอบ ::

น่าจะความหมายเดียวกันนะครับ
ทำได้โดยการเขียนซ้ำข้างนอก Event change เพื่อให้ตอนโหลดหน้ามาใหม่ สั่ง Run script ที่เขียนไว้
ตอนนี้ที่มันไม่เปลี่ยนเพราะ

Scripts ที่เขียนทำงานแค่ตอน select change เท่านั้น ทุกครั้งที่เราโหลดเพจ หรือเข้ามาหน้านี้ หรือเริ่มต้น อะไรก็แล้วแต่ บลาๆๆ
มันก็จะไม่ทำงานครับ

Code (JavaScript)

$(document).ready(function(){
     $("#go").hide();
     $("#comeback").hide();

     var sss = $('select'').val();

     	if(sss == ""){
     		$("#go").hide()
    		$("#comeback").hide();	
     	}

     	if(sss == "Go Only"){
     		$("#go").show()
    		$("#comeback").hide()	
		$("#comeback :input").prop('required',null);		    		
     	}

     	if(sss == 'Comback Only'){
     		$("#go").hide();
		$("#go :input").prop('required',null);		    		
     		$("#comeback").show();
     	}

     	if(sss == "Go and Comeback"){
     		$("#go").show()
     		$("#comeback").show();
     	}
		     
     $('select').change(function(){	
		        
     var sss =	$(this).val();

     	if(sss == ""){
     		$("#go").hide()
    		$("#comeback").hide();	
     	}

     	if(sss == "Go Only"){
     		$("#go").show()
    		$("#comeback").hide()	
		$("#comeback :input").prop('required',null);		    		
     	}

     	if(sss == 'Comback Only'){
     		$("#go").hide();
		$("#go :input").prop('required',null);		    		
     		$("#comeback").show();
     	}

     	if(sss == "Go and Comeback"){
     		$("#go").show()
     		$("#comeback").show();
     	}
         
   });

อ่านมาถึงตรงนี้ แล้วคิดว่าการทำงานมันซ้ำซ้อน แนะนำให้สร้าง Function เรียกใช้งานครั้งเดียว

Code (JavaScript)

function optionGoBackSelection(target) {
    var sss =	target.val();

    if(sss == "") {
       $("#go").hide()
       $("#comeback").hide();	
    }

    if(sss == "Go Only") {
       $("#go").show()
       $("#comeback").hide()	
       $("#comeback :input").prop('required',null);		    		
    }

    if(sss == 'Comback Only') {
       $("#go").hide();
       $("#go :input").prop('required',null);		    		
       $("#comeback").show();
    }

    if(sss == "Go and Comeback"){
       $("#go").show()
       $("#comeback").show();
    }
}

$(document).ready(function(){
    optionGoBackSelection($('select'));

    $('select').change(function(){
        optionGoBackSelection($(this));
    })
}

ประวัติการแก้ไข
2016-05-10 10:27:45

Date : 2016-05-10 10:27:10

By : ALTELMA

No. 4

ฟ้าใส

โพสกระทู้ ( 258 )
บทความ ( 0 )

ขอบคุณมากๆเลยค่ะ แบบนี้เลยที่ต้องการ

Date : 2016-05-10 10:38:33

By : naked13

No. 5

ฟ้าใส

โพสกระทู้ ( 258 )
บทความ ( 0 )

แล้วเวลาเรียกใช้ function เรียกใช้อย่างไรคะ

คือ ตอนนี้หนูลองเรียกใช้ แม้จะเลือก GO เป็น selected ช่อง GO และ Comeback ก็แสดงทั้งสองช่องอ่ะค่ะ

ประวัติการแก้ไข
2016-05-10 11:42:06

Date : 2016-05-10 11:06:42

By : naked13

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : แก้ไม่ตก เรื่อง javascript (Hide , Show)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก