การวนลูป ของ jquery .each ค่าแรกแสดง พอกด+เพิ่ม ค่าต่อไปไม่แสดง
Code (Java)
$("#age").change(function(){
var formData = new FormData($('form')[0]);
$.ajax({
url : "test.php",
data : formData ,
type : "POST",
cache: false,
contentType: false,
processData: false,
enctype : "multipart/form-data" ,
success : function( data ){
$("#showtext").html(data);
},
complete : function(){
}
});
});
Code (PHP)
<select class="form-control" name="age[]" id="age" required>
<option>ช่วงอายุ</option>
<option value="boy">ผู้ใหญ่ (10 ปีขึ้นไป)</option>
<option value="kid">เด็ก (2-9 ปี)</option>
<option value="baby">ทารก</option>
</select>
อยากให้กด เลือก select ตัวไหนก็ได้แล้วส่งข้อมูลไป ทั้งฟอม ไม่ใช่แค่ตัวแรกตัวเดียวนะครับ
select ตัวแรกส่งค่า ไปไฟล์ test.php ได้ พอกด + เพิ่ม select มาอีกตัว แต่ไม่มีค่าส่งไป แต่พอกลับมากดที ่select ตัวแรกก็ จะมาค่าวิ่งส่งไปทั้งหมด
อธิบายไม่เก่งนะครับ ผมยังงๆ เลย 555Tag : PHP, HTML/CSS, JavaScript, jQuery
ประวัติการแก้ไข 2016-06-13 12:09:04
Date :
2016-06-13 12:06:33
By :
promos33
View :
2799
Reply :
20
เปลี่ยน id="age"
เป็น class="age"
ID ควรจะมีแค่ อันเดียวใน document ไม่ควรมีหลายอัน (แม้มันจะมีได้ก็ตาม)
โดยพื้นฐาน เมื่อ jquery เรียกใช้ id เมื่อพบอันแรก แล้วจะไม่หาอันต่อไป
result ที่ได้จะมีอันเดียว เป็น indevendual class
แต่ถ้าเป็น คลาส จะ หาอันต่อไป result ที่ได้จะเป็น array class
Date :
2016-06-13 13:18:05
By :
Chaidhanan
$("#age").change(function(){
var formData = new FormData($('form')[0]);
$.ajax({
url : "test.php",
data : formData ,
type : "POST",
cache: false,
contentType: false,
processData: false,
enctype : "multipart/form-data" ,
success : function( data ){
$("#showtext").html(data);
},
complete : function(){
}
});
});
<select class="form-control" name="age[]" id="age" required>
<option>ช่วงอายุ</option>
<option value="boy">ผู้ใหญ่ (10 ปีขึ้นไป)</option>
<option value="kid">เด็ก (2-9 ปี)</option>
<option value="baby">ทารก</option>
</select>
เหมือนๆมันจะครอบอยู่ใน phpcode ถ้า name=age[] ส่งค่าไปเป็นอาร์เรย์แล้ว ผมคิดว่าถ้าเอาโค๊ด ajax มาใส่ไว้ในโค๊ด phpcode เลยมันน่าจะง่ายกว่า ถ้าหากใช้ลูป ของ jquery ไม่ถนัดนะครับ
โดยใช้ id=age[$i] ซึ่งเท่ากับว่าค่า id จะไม่ซ้ำกันเลย
ส่วนสคริปท์นี้
$("#age").change(function(){
var formData = new FormData($('form')[0]);
$.ajax({
url : "test.php",
data : formData ,
type : "POST",
cache: false,
contentType: false,
processData: false,
enctype : "multipart/form-data" ,
success : function( data ){
$("#showtext").html(data);
},
complete : function(){
}
});
});
เพิ่มตรง $('#age<?=$i?>').change()
ค่า $i จริงๆ เราจะดึงเป็น $row[id] มาก็ได้ ซึ่งค่าไม่ซ้ำกันอยู่แล้วครับ
Date :
2016-06-13 14:43:14
By :
Dragons_first
เปลี่ยน id เป็น class="age"
element ที่ add มาใหม่ document ยังไม่รู้จัก
ต้องใช้คำสั่ง
$(document).on( "change", ".age", function() {
});
หรือ
$('.parent').on( "change", ".age", function() {
});
Date :
2016-06-13 15:00:17
By :
fossil31
2 จุด นะครับ
จุดแรก
form-control age เพิ่มชื่อคลาส
var formData = new FormData($('form')[0]); /// ฟังก์ชั่น FormData() ไม่รู้มาไงนะครับ แต่ลอง alert ดูก่อนว่ามีค่ามาหรือเปล่าก่อนส่งไปหน้าประมวลผล
หรือเปลี่ยนตรงๆเป็นแบบตัวนี้ var formData = $('.age').val();
ปล.น่าจะพอไปต่อได้นะครับ ทีแรกเข้าใจผิดนึกว่าผ่าน php loop มา แต่ไม่ได้เข้าใจว่า select มาจาก database ครับ แค่บอกเผื่อไว้ อาจจะมีงานได้ใช้แบบนี้ก็เท่านั้นเองครับ
Date :
2016-06-13 16:31:50
By :
Dragons_first
อาร์เรย์ส่งค่ามาไม่หมดครับ คืออยากให้กลับไปใช้ id=age แต่ระบุค่าลงไป จะเป็น [0] [1] [2] แล้วแต่ตอนกดเพิ่มตัว select option น่ะครับ
เพราะตอนนี้เหมือนมันส่งค่ามาไม่ถูกมันเรียกใช้แค่อาร์เรย์ตัวแรกเท่านั้น ลองแก้ปัญหาตัวที่สร้าง ฟอร์มอีกทีครับ ให้มันส่งค่ามาใส่ id=age[i] ให้ได้ก็น่าจะจบแล้วครับ
Date :
2016-06-13 18:08:58
By :
Dragons_first
เหตุผลอยู่ คห 4
ทดลองโปรแกรมที่ ลิงค์ คห 5 ลองดูครับ
Date :
2016-06-13 18:08:59
By :
Chaidhanan
ขอบคุณครับ เดียวผมจะลองศึกษาต่อ นะครับเดียว ถ้างง หรือติดตรงไหนจะสอบถามเพิ่มนะครับ
Date :
2016-06-13 18:19:19
By :
promos33
ผมจะบอกสเต็ปให้นะครับ ถ้ายังมือใหม่
1.นับจำนวน element ที่ถูกสร้าง (ไม่เห็นโค๊ด แต่บอกว่ามันสร้าง select ไม่จำกัด) ที่สร้างขึ้นมา โดยอ้างอิงจากจำนวนที่ถูกสร้างขึ้นมาจริง เพราะข้อมูลจะได้ไม่ overflow หากเรากำหนดมันมากเกินจำนวนจริง
2.each(i).function(){
เอา ajax มาใส่ในนี้
});
3.เอาค่า i ไปใส่ใน onclick() ที่รับค่ามาจาก $('#age'+i).onclick()
4.ทบทวนลำดับการทำงานของโปรแกรมแล้วลอง1-3 ใหม่อีกรอบครับ
Date :
2016-06-14 09:40:01
By :
Dragons_first
i= ค่าใดๆ ที่รับต่อมาจากการสร้าง element ครับ
Date :
2016-06-14 10:23:32
By :
Dragons_first
ไม่จำเป็นต้องสนใจค่า i เพราะเราไม่ต้องกำหนด id ก็ได้
อาจจะเก็บค่าใดๆใน attribute data เพราะ data เก็บได้หลากหลาย data-name="john", data-price="1000", data-id="1"
ตอนดึงค่า data มาใช้ ก็ $(selector).data("price");
ส่วนการดึงค่าแบบวน loop
var data1 = [];
$('parent selector').each(function() {
data1.push($(this).val());
}):
หรือ
$('parent input[name=age]:checked').each(function() {
data1.push($(this).val());
});
//test->alert(data1[0]) หรือ console.log(data1[0]); //data1[n]
//post->ajax
data = {'field1': data1, อื่นๆถ้ามี}
$.post(action, data, function(res){
//statement
});
Date :
2016-06-14 11:17:39
By :
fossil31
Load balance : Server 03