Member Avatar for Goddy_1

I want to add multiple Record. Add 1 record if it is to insert 1 record , but if 5 recoed data will insert 5 record. Sorry i'm not good english

images 1
Click Here
images 2
Click Here

<?php

include_once("connect.inc.php");    
if (isset($_POST['submit'])) {

$i = 0;
foreach ($_POST as $val) {
    $province_id = $_POST['province_id'][$i];
    $travel_id = $_POST['travel_id'][$i];

    mysql_query("INSERT INTO travel_list (province_id, travel_id) VALUES ('$province_id', '$travel_id')");
$i++;
} 
}
 ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="js/bootstrap.min.js"></script>
<title>Untitled Document</title>
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="respond.js"></script>
<form action="index.php" method="post"> <!--ส่งค่า post ไปหน้าเดิม -->
<table width="896" border="1">
    <thead>
        <tr>
            <th width="239">จังหวัด</th>
            <th width="552">สถานที่ท่องเที่ยว</th>
            <th width="83"><input type="hidden" id="txtNum" value="1" size="2" /></th>
        </tr>
        <tr>
            <th width="239">
                <select id="selProvince" name="province_id[]" > <!--Default จังหวััด-->
                    <option value="">กรุณาเลือกจังหวัด</option>
                <?PHP 
                    $SelectPr="SELECT * FROM province";
                    $QueryPro=mysql_query($SelectPr);
                    while($Pro=mysql_fetch_array($QueryPro)){
                ?>
                    <option value="<?=$Pro['province_id']?>"><?=$Pro['province_name']?></option>
                <?PHP } ?>
                </select>
            </th>
            <th width="552"><select name ="travel_id[]" id="selTravel" >
                <option value="">กรุณาเลือกจังหวัด</option></select></th>
            <th width="83"><button type="button" id="btnP">เพิ่มรายการ</button></th>
        </tr>
        <tr><td colspan="3"><center>รายการที่เพิ่ม</center></td></tr>
    </thead>

    <tbody>

    </tbody>

</table>
<input name="submit" type="submit" value="add">

</form>
<br><br><br>
<!--ทอสอบ ค่าแสดงผล Muti Atrray-->

</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 440 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for Goddy_1

<script src="respond.js"></script>

    $(document).ready(function(e) { //เมื่อเพจพร้อมใช้งาน

        $('#selProvince').on('change',function(){ // เมื่อ Change จังหวัด
            var province=$(this).val(); // รับค่าจังหวัด
            var selTravel=$('#selTravel').empty(); // ดึง Select Option มาทำค่างว่า
            $.ajax({url : 'check.php', // url
                type : 'POST', // รูปแบบส่ง
                data : 'province_id='+province, // ข้อมูลที่ส่งไป
                datatype : 'json', // รูปแบบ
                success : function(result){ // เมื่อ Respond ได้แค่า result
                    var obj=jQuery.parseJSON(result); 
                    var opt="<option value='' selected='selected'>เลือกสถานที่ท่องเที่ยว"; // Create Element 
                    $.each(obj,function(key,val){ // วน Loop array json
                        opt+="<option value='"+val['travel_id']+"'>"+val['travel_name']+""; // เพิ่ม Option เข้าไปในตัวแปร
                    });
                    selTravel.html(opt);  // เพิ่มตัวแปร html เข้าไปใน Select Option 
                }
            });
        });

        $('#btnP').on('click',function(){ // เมื่อ Click ปุ๋ม เพิ่มรายการ
            var selProvince=$('#selProvince'); // ดึงเฉพาะ Element id จังหวัด
            var selTravel=$('#selTravel'); // ดึงเฉพาะ Element id สถานที่ที่องเที่ยว
            var Num=$('#txtNum').val(); // ค่าจำนวนนับ
            if(selProvince.val() != "" && selTravel.val() != ""){ // เมื่อค่าจังหวัด และ ค่าท่องเที่ยว ไม่เท่ากับ ค่าว่าง
                $('tbody').append("<tr id='tr"+Num+"'><td>"+selProvince.find(':selected').text()+"<td>"+selTravel.find(':selected').text()+"<input type='hidden' name='hdProvince_id[]' value='"+selProvince.val()+"'><input type='hidden' name='hdTravel_id[]' value='"+selTravel.val()+"'><td><button onclick='Del("+Num+")'>-</button>"); 
                // เพิ่มรายละเอียดเข้าไปที่ tbody
                // ??.find(':selected').text() แสดงค่า Select Option ในช่อง Text
                // <input type='hidden' name='hd????[]' value=''> สร้าง Element แบบซ่อน โดยเก็บค่า id ที่เพิ่ม
                // <button onclick='Del("+Num+")'> สร้าง Element ปุ่ม เมื่อคลิก จะเข้าไปใน Function อ้างอิงจำนวนนับ 

                $('#txtNum').val(parseInt(Num)+1); // ค่าจำนวนนับเดิม + 1
            }else{ 
                alert("กรุณาเลือกข้อมูลให้ครบถ้วน");     // false
            }
        });

        $('#btnSubmit').click(function(){ // กด Click ปุ่ม Submit
            $('form').submit();  // Form ทำการส่งค่า
        });

    });

    function Del(Num){ // Function ลบตาราง อ้างอิงจาก id=BtnDel
        $('#tr'+Num).remove(); // ลบ tr ที่กำหนด
    }
// JavaScript Document
Member Avatar for diafol

Ok, I think I got what you're trying to do.

1) Use the ajax to populate your travel select options on province change
2) List these selections (with hidden inputs) when button is clicked in a table row
3) Send form data (hidden inputs) to server on submit

Perhaps you could add the selected data to a javascript array instead of using hidden inputs and send that on submit. Also use mysqli or PDO for db management - mysql is deprecated.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.