CI Multi Value insert - php

I use jquery append for more fields in CI. But Don't know How to to insert multi value into the Db. Please help me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$tr="<tr><td><input type='input' name='title' /></td><td><textarea name='text'></textarea></td></tr>";
$("#btn2").click(function(){
$("#tb").append($tr);
});
});
</script>
<?php echo validation_errors(); ?>
<button id="btn2">add New</button>
<?php echo form_open('welcome/create'); ?>
<table id="tb" width="100%">
<tr>
<td>Title
</td>
<td>Text
</td>
</tr>
</table>
<input type="submit" name="submit" value="Create news item" />
</form>

Try this
Use [] with the name attribute of an input field
$tr = "<tr><td><input type='input' name='title[]' /></td><td><textarea name='text[]'></textarea></td></tr>";
This will take all the values as an array from input field having the same name attribute

Make You input/textarea field as array:
<tr><td><input type='input' name='title[]' /></td><td><textarea name='text[]'></textarea></td></tr>
In php controller:
//Load model
//Pass Post data to model function
$this->model_name->function_name($_POST);
In php model:
function_name($data)
{
$name_arr = $data['name'];
$text_arr = $data['text'];
for($i=0;$i<count($name_arr);$i++)
{
//Insert query with values like $name_arr[$i],$text_arr[$i];
}
}
Note: Still you are not able to understand then go through CI Tutorials.

Related

how to push data from html grid to mysql?

I am trying to push the data from this simple html grid into sql but I can't do it. in the beginning, I got the error that there was no index for the var impressions. I fixed that. when I use just the advertiser value I can push the data into mysql while with the second value, I can't succeed. can you explain me what I am doing wrong?
Thanks in advance
<?php
include_once 'con_ui.php';
if(isset($_POST['btn-save']))
{
$advertiser = $_POST["advertiser"];
$impressions = (isset($POST["impressions"])?
$_POST["impressions"]:'');
$sql_query = "INSERT INTO data(adv, imp) VALUES('$advertiser', '$impressions')";
mysql_query($sql_query);
// sql query for inserting data into database
}
?>
<html>
<head>
</head>
<body>
<form method="post">
<table id="myTable" align='center' cellspacing=0 cellpadding=5 border=1>
<tr>
<th>advertiser</th>
<th>impressions</th>
</tr>
<td>
<select name="advertiser" id="advertiser">
<option value="">Select advertiser</option>
<option value = "Brita ">Brita</option>
<option value = "Sammontana">Sammontana</option>
</select>
</td>
<td name= "impressions" id="impressions" >1000000</td>
<td>
<button type="submit" name="btn-save"><strong>SAVE</strong></button>
</td>
</form>
</body>
</html>
There's a few things wrong here:
Firstly the $POST in
$impressions = (isset($POST["impressions"])?$_POST["impressions"]:'');
Is missing an underscore and should be a $_POST
$impressions = (isset($_POST["impressions"])?$_POST["impressions"]:'');
Secondly the browser won't recognize
<td name= "impressions" id="impressions" >1000000</td>
as a form field. If you want to pass on values that the user can't edit you have a few options. You can use a hidden field like:
<td><input type="hidden" name="impressions" id="impressions" value="1000000">1000000</td>
or you can use a text input and disable user input like
<td><input type="text" name="impressions" id="impressions" value="1000000" disabled></td>
here you have the details of the code that i am using to achieve for adding the raws automatically, have the users entering data and keeping the code editable
Hey thanks for your reply. Problem being is i need to have the user enter the date into the cell and and have and the content should be editable. in addition i'm having a button add row, to insert a new raw but doesn't work if use the form type as input. here you have the full code
<?php
include_once 'con_ui.php';
if(isset($_POST['btn-save']))
{
// variables for input data
$advertiser = $_POST["advertiser"];
$impressions = (isset($_POST["impressions"])?
$_POST["impressions"]:'');
// variables for input data
// sql query for inserting data into database
$sql_query = "INSERT INTO data(adv, imp) VALUES('$advertiser', '$impressions')";
mysql_query($sql_query);
// sql query for inserting data into database
}
?>
<html>
<head>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var new_client = document.getElementById("advertiser_row1").innerHTML;
var new_impressions = document.getElementById("impressions_row1").innerHTML;
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
}
</script>
</head>
<body>
<table id="myTable" align='center' cellspacing=0 cellpadding=5 border=1>
<form method="post">
<tr>
<th>advertiser</th>
<th>impressions</th>
</tr>
<td>
<select name="advertiser" id="advertiser_row1">
<option value="">Select advertiser</option>
<option value = "Brita ">Brita</option>
<option value = "Sammontana">Sammontana</option>
</select>
</td>
<td><input type="text" name="impressions" id="impressions_row1" value="1000000"></td>
<td>
<button onclick="myFunction()">Add Row</button>
</td>
<td>
<button type="submit" name="btn-save">Save</button>
</td>
</tr>
</form>
</table>
</body>
</html>

PHP - HTML best practices to handle (submit) generated rows

I have html table generated via ajax. And last column on this table contains button. My question is what is the best practice to submit these rows (only one at time. I need use this method to amend records).
Is it worth to wrap each row with
<form>
<input type="hidden" value="hidden value">
<input type="submit">
</form>
Or people using something difference? Reason why i'm asking for is because i'm worry about very long list example 1k rows or 10k rows (that means i will have 1k or 10k forms on a page).
You can just use a hyperlink (which you can style to look like a button using CSS if you want). e.g:
Edit
where the value you give as the "id" parameter is the primary key of the record in that row.
Then in edit.php look for the id value using $_GET["id"] and fetch the appropriate record from the DB.
As Progrock advises, a form element may only be used "where flow content is expected" (i.e. not as a direct child of table or tr).
HTML 5 introduces a form attribute as a workaround:
<form id="row_1">
<input type="hidden" name="id" value="pk1">
</form>
<form id="row_2">
<input type="hidden" name="id" value="pk2">
</form>
<table>
<tr>
<td> <input type="text" name="attribute1" form="row_1"> </td>
<td> <input type="submit" form="row_1"> </td>
</tr>
<!-- and so on for each row -->
</table>
It has been brought to my attention that in this case, there is no direct user input being submitted, but only generated contents.
Well, then the solution is even simpler:
<table>
<tr> <td>
<form id="row_1">
<input type="hidden" name="id" value="pk1">
<input type="hidden" name="attribute1" value="whatever">
<input type="submit">
</form>
</td> </tr>
<!-- and so on for each row -->
</table>
I thought I'd have a go without form elements, working with editable table cells. Within each row you provide a button. And when you click it, an ajax post is made of the cell values.
You could have a non js fall back where the save button is replaced for an edit button that takes you to another page with a single form.
Forgive my JS.
I have the session storage in there just to check the concept.
<?php
session_start();
var_dump($_SESSION);
$data = array(
23 => ['triangle', 'green', '2'],
47 => ['square', 'red', '3'],
17 => ['pentagon', 'pink', '4']
);
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// Save state here
$_SESSION['submission'] = $_POST;
}
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
// Get all table cells in the buttons row
var $cells = $(this).closest('tr').find('td[contenteditable="true"]');
var jsonData = {};
$.each($cells, function() {
jsonData[get_table_cell_column_class($(this))] = $(this).text().trim();
});
jsonData['id'] = $(this).attr('id');
$.post('',jsonData, function() {
alert('Saved.');
});
});
function get_table_cell_column_class($td)
{
var $th = $td.closest('table').find('th').eq($td.index());
return $th.attr('class');
}
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th class="shape">Shape</th>
<th class="colour">Colour</th>
<th class="width">Width</th>
<th>Ops</th>
</tr>
</thead>
<tbody>
<?php foreach($data as $key => $row) { ?>
<tr>
<?php foreach($row as $field) { ?>
<td contenteditable=true>
<?php echo $field ?>
</td>
<?php } ?>
<td>
<button id="<?php echo $key ?>">Save</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
You can use the following
<table id="YourTableId">
...
<tr data-id="yourrowId">
<td class="col1"> value1</td>
<td class="col2"> value2</td>
<td class="col3"> value3</td>
<td class="actions">
Submit
</td>
</tr>
....
</table>
your javascript code will be like
$(document).ready(function (){
$('#YourTableId a').off('click').on('click',function(e){
e.preventDefault();
var tr = $(this).closest('tr')
var data={ // here you can add as much as you want from variables
'id' : tr.data('id), // if you want to send id value
'col1': tr.find('.col1').text(),
'col2': tr.find('.col2').text(),
'col3': tr.find('.col3').text(),
};
$.ajax({
method: 'post',
url: 'your url goes here',
data: data,
success: function(result){
// handle the result here
}
});
});
});
Hope this will help you

php recover inputs added with jquery

I did a little form with jQuery, that when a button is clicked, it adds a new input with a name.
The jQuery I add to the page:
<script>
$(document).ready(function() {
var i = 2;
$("span").click(function() {
$("#add").before("<tr><td>Name</td><td><input type='text' name='name-"+i+"' /></td></tr>");
$("#numper").val(i);
i++;
});
});
$("#numper").val(i) is an hidden input to know how many times I added an input.
When I check the console and Elements (F12 in Chrome) the fields are added, and the hidden one is changed correctly, but when I try to obtain the values with PHP, it says that the added inputs are undefined.
for($i = 1; $i <= $_POST['numper']; $i++) {
echo $_POST['name-'.$i];}
If you can help me to sort this out, I would be very grateful!
Thanks!
I would simply approach your requirements in a different way, name all your inputs so PHP reads them as an array like so:
<input name="name[]" ..... />
PHP:
foreach($_POST['name'] as $index => $input_value) {
....
}
Please check if below code helps you.
<html>
<head>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#addbutton').click(function() {
var i = parseInt($('#numper').val()) + 1;
$('#table').prepend("<tr><td>Name</td><td><input type='text' name='name-"+i+"' /></td></tr>");
$('#numper').val(i);
});
});
</script>
</head>
<body>
<form method='post' action='<?php echo $PHP_SELF;?>'>
<table>
<tr>
<td>
<input type='button' id='addbutton' value='Add new input box' />
</td>
</tr>
</table>
<table id='table'>
<tr>
<td>Name</td>
<td>
<input type='text' name='name-1' />
</td>
</tr>
<tr>
<td>
<input type='hidden' id='numper' name= 'numper' value='1' />
<input type='submit' value='submit' />
</td>
</tr>
</table>
</form>
</body>
<?php
for ( $i = 1; $i <= $_POST['numper']; $i++ ) {
echo $_POST['name-' . $i] . '<br>';
}
?>
In Javascript you have variable i = 2. So, your first input will have a name "name-2".
In PHP, you have for loop with variable $i = 1. So it will try to get $_POST['name-1'].
So, it will give error for undefined.
for the jquery part, you can write this
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("<input name='whatever' type='text' class='whatever'>");
});
});
if you want the php part, then notify me

Using jQuery, I am submitting a form wihout refreshing the browser and I need help in listing the submitted data in a custom table column

I have a table where it's rows are generated by a foreach loop.
Each table row has two columns, one with a form and the other with the forms submitted data, which I have called notes. (and updates using a jQuery library without refreshing the browser).
<script>
$(".notes_column").each(function(){
var $myform = $(this).find('.notes_form');
var $mynotes = $(this).find('.notes');
$myform.validate({
submitHandler: function(form) {
$.post('process.php', $myform.serialize(), function(data) {
$mynotes.html(data);
});
}
});
}); // each function
</script>
<table id="myTable" class="tablesorter" border="1" cellpadding="5">
<thead>
<tr>
<th>Notes</th>
<th>Submit Note</th>
</tr>
</thead>
<tbody>
<?php
foreach($myarray as $myvar){
echo '
<tr>
<td>ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</td>
<td class="notes_column">
<form class="notes_form" action="" method="post">
<input class="q" type="text" name="notes" size="30" placeholder="Place your notes here..." />
<input class="searchsubmit" type="submit" name="submit" value="Submit" />
</form>
<div class="notes"></div>
</td>
</tr>
';
}
?>
</tbody>
</table>
Right now I use a jQuery each function which iterates through each table column, and for each column with the class name ".notes_column" populates a div with the class "notes" with the submitted data.
The question is listed inside the code with capitalized letters, how can I populate the other column with the forms submitted data?
Any ideas?
Ty
I would create a <div> in the first <td> such as
<td>
<div class="put_notes_here">ID LIKE TO PLACE THE content of the div class="notes" HERE, HOW CAN I DO IT?</div>
</td>
Then populate it the same as you did before
$mynotes.closest("tr").find(".put_notes_here").html(data);
Change the selector for your each to $('#myTable tr'), then you can iterate through each in your table.
Then you could either do an each on the tr object to access each td, or make use of jQuery's :first-child and nth-child(2) etc in a subsequent selector

jquery data attribute with input selector in a loop

I have an html table built from a database query which loops through and creates a button for each camera name found and puts them in a table:
<?php
for($i=0;$i<$num_rows;$i++)
{
?>
<tr>
<td>
<input type="submit" class="play" data-hash="<?php echo $result_cameras[$i]["camera_hash"]; ?>" value="<?php echo $result_cameras[$i]["camera_name"]; ?>">
</td>
</tr>
<?php
}
?>
This resolves to something like this:
<tr>
<td>
<input type="submit" class="play" data-hash="0d3d0ac6e54a640c73f1149d4d0bbc38e99d10f5" value="Office Window">
</td>
</tr>
<tr>
<td>
<input type="submit" class="play" data-hash="b824cba374c3d5ab7806ad8260c939323c03147b" value="aaa">
</td>
</tr>
<tr>
<td>
<input type="submit" class="play" data-hash="ec9658f0c1855e2e2ac09ae284f5e6990dbf445d" value="laptop">
</td>
</tr>
Notice the data hash attribute is different for each button. I want to process this button with my jquery code:
$(".play").click(function(){
var camerahash = $('input').data('hash');
console.log($('input').data('hash'));
});
No matter which button I click I will always get the hash from the first button I click: 0d3d0ac6e54a640c73f1149d4d0bbc38e99d10f5. Any help is appreciated.
$('input').data('hash') gives you the data attribute of the first input in the selection use $(this).data('hash') to get the data attribute of the currently clicked input
You need to specify which input element to read.
Try something like:
$(".play").click(function(){
$this = $(this);
var camerahash = $this.data('hash');
console.log($this.data('hash'));
});
You are always calling the first object of .play. This would be a correct way:
$('.play').on('click', function(){
var camerahash = $(this).data('hash');
});
You could always grab them by using the .attr(data-hash) html5 attribute.
Try:
$('.play').on('click', function() {
var _hash = $(this).attr('data-hash');
console.log(_hash);
});
Your selector will return the first one that it comes to. Use this instead
<script>
$("input.play").click(function() {
alert($(this).data('hash'));
});
</script>

Categories