У меня есть два вопроса, которые ниже; 1) Как передать значение из foreach в ajax. это мой код и то, что у меня до сих пор, попытался поместить ajax внутри foreach, но он продолжал давать мне идентификатор фамилии в каждом для каждого.
2) Есть ли способ, которым я могу нажать на добавление, и данные будут сохранены и помещены в другую таблицу html ниже этой таблицы html, но не будут вставлены в базу данных, пока я не нажму на вставку во вторую таблицу.
<table class="table table-bordered datatable" id="table_export"> <thead> <tr> <th>#</th> <th><div>Item</div></th> <th><div>Quantity Left</div></th> <th><div>Price</div></th> <th><div>Quantity</div></th> <th><div>Sell</div></th> </tr> </thead> <tbody> <?php $count = 1; $notarray = DataDB::getInstance()->get_rows_from_field('name'); foreach($notarray as $row):?> <tr> <td><?php echo $count++;?></td> <td><?php echo $row['name'];?></td> <td><?php echo $row['nickname'];?></td> <td><?php echo $row['surname']; ?></td> <form method="post" action="" role="form"> <td> <div class="form-group"> <div class=""> <input type="number" class="form-control" name="kin" data-validate="required" data-message-required="Kin required" autofocus> </div> </div> </td> <td> <div class="btn-group"> <button type="submit" class="btn btn-primary" name = "check">Add</button> </div> </td> </form> </tr> <?php endforeach;?> </tbody> </table> <br><br> <div id="get_result"> </div> <script type="text/javascript"> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'verify.php', data: $('form').serialize() + '&ins=sellin' + '&id=<?php echo $row['name_id'];?>', success: function(data) { jQuery('#get_result').html(data); } }); }); });
Если я получу вас правильно, вы имеете в виду, что хотите выбрать элемент из списка элементов в таблице A, и он должен отображаться в таблице B. Затем вы хотели нажать кнопку отправки в таблице B, чтобы сохранить выбранные элементы из таблицы A?
Вот решение:
Просьба назвать этот файл как test.php
<?php /** * Created by PhpStorm. * User: SQ05 * Date: 06/01/2017 * Time: 06:31 PM */ //Note that data is a typical example of data u gotten from DB. so make sure u push all $row into an array //such that u create something of this nature eg // $data=array(); // $i=0; //while($row=mysql_fetch_assoc($query)){ //$data[$i]=$row; //$i++; //} // this will then create data of this nature below, $data=array( array('id'=>1,'name'=>'Loveth','age'=>23,'phone'=>'9889087455'), array('id'=>2,'name'=>'Susan','age'=>51,'phone'=>'787987455'), array('id'=>3,'name'=>'Precious','age'=>13,'phone'=>'98989087455'), array('id'=>4,'name'=>'Hannah','age'=>21,'phone'=>'987087455'), array('id'=>5,'name'=>'Kenneth','age'=>43,'phone'=>'569087455'), ); ?> <div style="float:left;width:50%"> THE LIST OF ALL ITEMS <table> <tr> <td>Name</td> <td>Age</td> <td>Phone</td> <td>Action</td> </tr> <?php $i=0; for ($i=0;$i<count($data);$i++) { $item=$data[$i]; ?> <tr> <td><?php echo $item['name'];?></td> <td><?php echo $item['age'];?></td> <td><?php echo $item['phone'];?></td> <td><button onclick='addToList(<?php echo json_encode($item);?>);'>Add</button></td> </tr> <?php } ?> </table> </div> <div style="float:left; width:50%"> THE ITEM TO BE SAVED <div id="showToSave"></div> </div> <script src="bower_components/jquery/dist/jquery.js"></script> <!--Please install jquery base on ur own directory path--> <script> var listToSave=[]; // must be global /** * The add to list function that process data and add to list * @param data */ var addToList= function(data){ var lenData=listToSave.length; if(lenData>0){ //this is used to avoid duplicate for(var j=0;j<lenData;j++){ if(data.id==listToSave[j].id) return; } } listToSave.push(data); console.log(listToSave); document.getElementById('showToSave').innerHTML=createData(listToSave); }; var createData= function (data) { var len=data.length; var tableToSave="<table><tr><td>Name</td> <td>Age</td> <td>Phone</td> <td>Action</td></tr>"; var i; for(i=0;i<len;i++){ content=data[i]; tableToSave+="<tr><td>"+content.name+"</td><td>"+content.age+"</td><td>"+content.phone+"</td><td>" + "<button onclick='deleteFromSave("+i+")'>Delete</button></td></tr>"; } tableToSave+="</table><div><button onclick='saveData()' type='button'>Save</button></div>"; return tableToSave; }; /** * This is use to delete data added locally */ var deleteFromSave=function (index) { listToSave.splice(index,1); //this is use to delete from list to save document.getElementById('showToSave').innerHTML=createData(listToSave); //to rerender after delete }; /** * This is use to submit data */ var saveData=function () { console.log('thjis=',listToSave); $.ajax({ type: "POST", url: "getData.php", data: {list : JSON.stringify(listToSave)}, success: function(resp){ console.log('response=',resp); } }); }; </script>
Пожалуйста, назовите это как getData.php для обработки представления списка добавленных данных с использованием подхода с добавлением нескольких значений.
<?php /** * Created by PhpStorm. * User: SQ05 * Date: 06/01/2017 * Time: 07:28 PM */ if ($_SERVER['REQUEST_METHOD'] == 'POST') { $data = json_decode(stripslashes($_POST['list'])); //the data here can now be used to create a multiple value insert to ur mysql db. print_r(json_encode($data)); // this is used to send response back to ur page if using array buh echo if string }