พิมพ์หน้านี้ - ทำยังไงให้เมื่อเลือก radio button ใน jquery popup แล้วจะทำการใส่ค่าในinput ครับ

ทำยังไงให้เมื่อเลือก radio button ใน jquery popup แล้วจะทำการใส่ค่าในinput ครับ

ไม่รู้ผิดตรงไหนครับ

โค๊ด:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $(function() {

                $( "#MyDialog" ).dialog({
                    autoOpen: false,
                    height: 600,
                    width: 850,
                    modal: true,
                    buttons: {
                        "Save": function() {

                            $('.shirt_type').on('change', function(){
                              if(this.value == 1){
                                $('#sh_type').val("Hello");
                              }
                              if(this.value == 2)
                              {
                                $('#sh_type').val("World");
                              }
                              if(this.value == 3)
                              {
                                $('#sh_type').val("Yes");
                              }
                              if(this.value == 4)
                              {
                                $('#sh_type').val("Wow");
                              }
                            });
                            
                            $( this ).dialog( "close" );
                        },
                        "Cancel": function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
                        $('.shirt_type').val("");
                    }
                });

                $( "#choose_shirt" ).click(function() { $( "#MyDialog" ).dialog( "open" ); });
            });
        </script>
</head>
<body>
    <div id="MyDialog" title="Create Name">
    
    1<input type="radio" class="shirt_type" name="type" value="1" checked>
    
    2<input type="radio" class="shirt_type" name="type" value="2">
       
    3<input type="radio" class="shirt_type"  name="type" value="3">
         
    4<input type="radio" class="shirt_type"  name="type" value="4">
    </div>

   <button id="choose_shirt"> Pop Up </button>

    <table>
        <tr>
            <td>แบบเสื้อ :</td>
            <td><input type="text" id="sh_type" name="shirt_type" /></td>
        </tr>
          
    
    </table>
</body>
</html>

ต้องเอาใส่ไว้ใน event open ของ dialog ครับ //ตรวจจับ event "Change" = เมื่อเปลี่ยนค่าของ radio box ตอนไหนค่าใน text box ก็จะเปลี่ยนตามที่เขียนไว้
อันเดิมใส่ไว้ใน button "Save" ตรงนั้นจะทำงานเมื่อกดปุ่ม "Save" //กดปุ่ม "Save" > ตรวจจับ event "Change" >ปิด dialog

ประมาณนี้ครับ

โค๊ด:

...
buttons: {
                        "Save": function() {                       
                            
                            $( this ).dialog( "close" );
                        },
                        "Cancel": function() {
                            $( this ).dialog( "close" );
                        }
                    },
					open: function() {
						  $('.shirt_type').on('change', function(){
                              if(this.value == 1){
                                $('#sh_type').val("Hello");
                              }
                              if(this.value == 2)
                              {
                                $('#sh_type').val("World");
                              }
                              if(this.value == 3)
                              {
                                $('#sh_type').val("Yes");
                              }
                              if(this.value == 4)
                              {
                                $('#sh_type').val("Wow");
                              }
                            });
					},
                    close: function() {
                        $('.shirt_type').val("");
                    }
...

ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: BHunter ที่ 19 มกราคม 2017, 10:33:26