Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,032

HOME > PHP > PHP Forum > ขอแนวทางในการใช้ textbox และ Checkbox multi ด้วย AJAX ครับ



 

ขอแนวทางในการใช้ textbox และ Checkbox multi ด้วย AJAX ครับ

 



Topic : 136669



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



สถานะออฟไลน์




กรณีผมมี Check box อยู่ 3 ตัว ต้องการ
Code (PHP)
<input type="text"   id="search" value="1">
<input type="checkbox" name="chk1"  id="chk1" value="1">
<input type="checkbox" name="chk2"  id="chk2" value="2">
<input type="checkbox" name="chk3"  id="chk3" value="3">

ต้องการให้ทั้ง 3 มันเข้าไปอยู่ใน function javascript ด้านล่าง เราควรใช้ Event ไหนครับ แล้วรูปแบบควรเขียนยังไงครับ

Code (JavaScript)
//Getting value from "ajax.php".

function fill(Value) {

   //Assigning value to "search" div in "search.php" file.
   $('#search').val(Value);

   //Hiding "display" div in "search.php" file.

   $('#display').show();

}

$(document).ready(function() {



   $("#search").keyup(function() {

    
       var name = $('#search').val();

        
       //Validating, if "name" is empty.

       if (name == "") {

           //Assigning empty value to "display" div in "search.php" file.

           //$("#display").html("ไม่พบข้อมูล");
           $("#display").load(location.href + " #display");
           

       }

       //If name is not empty.

       else {

           //AJAX is called.

           $.ajax({

               //AJAX type is "Post".

               type: "POST",

               //Data will be sent to "ajax.php".

               url: "ajax.php",

               //Data, that will be sent to "ajax.php".

               data: {

                   //Assigning value of "name" into "search" variable.

                   search: name

               },

               //If result found, this funtion will be called.

               success: function(html) {

                   //Assigning result to "display" div in "search.php" file.

                   $("#display").html(html).show();

               }

           });

       }

   });

});




หน้า ajax.php
Code (PHP)
<div class="row gutters-sm" id="display">
            <div class="col-12">
<?php
//Including Database configuration file.

include "config/config_inc.php";

//Getting value of "search" variable from "script.js".

if (isset($_POST['search'])) {

//Search box value assigning to $Name variable.

   $Name = $_POST['search'];


//Search query

    //$Query = "SELECT tb_profile.* FROM tb_profile WHERE th_name LIKE '%$Name%' or th_sname LIKE '%$Name%' ";
    $Query = "SELECT tb_profile.*,tb_contact.*,tb_data_identity.* FROM tb_profile 
    LEFT JOIN tb_contact ON (tb_profile.id_card =tb_contact.id_card)
    LEFT JOIN tb_data_identity ON (tb_contact.id_card =tb_data_identity.id_card)
     WHERE th_name LIKE '%$Name%' or th_sname LIKE '%$Name%' or phone_num LIKE '%$Name%' or blood_type LIKE '%$Name%' ";

//Query execution

   $ExecQuery = MySQLi_query($con, $Query);

//Creating unordered list to display result.


   //Fetching result from database.

   while ($Result = MySQLi_fetch_array($ExecQuery)) {

       ?>
               <div class="card cardmobi">
                            <div class="card-body ">
                                <span class="a"><small><?=$Result['position_number']?></small></span>
                                <span class="a"><small><?=$Result['position_now']?></small></span>
                                <span class="a"><small>สังกัด:</small></span>
                                <span class="a"><button class="depart btn bnt-sm btn-success"><?=$Result['department']?></button></span>
                                <span class="rankName"><small style="color:gray;">ยศ ชื่อ นามสกุล <br/><?=$Result['rank'];?> <?=$Result['th_name'];?> <?=$Result['th_sname'];?></small></span>
                                <img src="assets/img/img_profile/<?=$Result['id_card']?>.png" class="cardround"/>
                            </div> 
                        </div>
                        <div style="height:4px"></div>
        <?php

            }}
        ?>




Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2022-04-28 20:04:22 By : gmgo View : 491 Reply : 5
 

 
แยกระหว่าง Backend และ Frontend ให้ออก
แล้วมันจะไม่ออกมาเป็นท่านี้

ส่วนการ post + data
- serialize() แบบนี้ง่ายสุดแต่ให้เอา form มาครอบ
หรือ
- แยก get value มาทีละตัวแล้วจับยัดลง json

หรือจะ fetch + FormData แล้วแต่ถนัด






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-29 07:58:52 By : Guest
 


 

No. 2



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



สถานะออฟไลน์


ตัว checkbox มันอยู่หน้าhtml อยู่แล้วครับไม่ได้อยู่ หน้าajax ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-29 09:05:24 By : gmgo
 

 

No. 3



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



สถานะออฟไลน์


เดี๋ยวลอง แบบjson ดูครับ พอจะนึกออกละครับ ขอบคุณครับผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-29 09:08:03 By : gmgo
 


 
ในขณะเดียวกัน
เมื่อ on change ที่ checkbox ก็ต้องส่งค่า search ไปด้วยเช่นกัน ?

checkbox: on change
search: on keyup

ก็ให้เรียกไปที่ function เดียวกัน (Reuse Function)
ภายในฟังก์ชั่นก็ ajax, fetch, axios, ... etc
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-29 15:19:37 By : Guest
 


 

No. 5



โพสกระทู้ ( 4,734 )
บทความ ( 8 )



สถานะออฟไลน์


Code
<input class="process-my-checkbox" type="checkbox" name="chk1" id="chk1" value="1"> <input class="process-my-checkbox" type="checkbox" name="chk2" id="chk2" value="2"> <input class="process-my-checkbox" type="checkbox" name="chk3" id="chk3" value="3"> <div id="debug"> </div>



Code (JavaScript)

function doWhatever(checkbox) {
	let debugElement = document.getElementById('debug');
    let debugHTML = 'check box id ' + checkbox.getAttribute('id') + ' ';
    if (checkbox.checked === true) {
    	debugHTML += 'checked';
    } else {
    	debugHTML += 'unchecked';
    }
    debugElement.insertAdjacentHTML('beforeend', debugHTML + '<br>');
}


window.onload = () => {
	let allTargetCheckboxes = document.querySelectorAll('.process-my-checkbox');
    if (allTargetCheckboxes) {
    	allTargetCheckboxes.forEach((item) => {
        	item.addEventListener('click', (e) => {
            	let thisCheckbox = e.target;
                doWhatever(thisCheckbox);
            });
        });
    }
};



https://jsfiddle.net/dto1qj98/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-29 19:24:51 By : mr.v
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอแนวทางในการใช้ textbox และ Checkbox multi ด้วย AJAX ครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่