I have a table where user can add data in it and I also have input field and save link. In my save link, if I click it.. I assign value to input field before it will go to other page. But when it go to the other page and I echo the value of inputfield, I got empty as in null value.
here's my code:
for table:
<table class="table " id="memberTB">
<thead>
<tr>
<th >First Name</th>
<th >Middle Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="first">
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
</tr>
</tbody>
<button type="button" class="btn btn-link" id="addrow">
<span class="fa fa-plus"> Add new row</span>
</button>
</table>
<input type="text" name="list" id="list"/>
<br>
<a class="btn" id="savebtn">Save</button>
Reset
and for js:
$('#savebtn').click(function() {
var cells = 3; //number of collumns
var arraylist = []
var x=0;
$('tbody tr',$('#memberTB')).each(function(){
var cell_text = '';
for(var i = 0 ; i < cells ; i++){
if(i==2){
cell_text =cell_text+$(this).find('td').eq(i).text()+":";
}else{
cell_text =cell_text+$(this).find('td').eq(i).text()+",";
}
}
arraylist.push(cell_text);
});
document.getElementById("list").value =arraylist;
document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
}
I got nothing when I echo it in the test.php in the save(), like this:
echo $this->input->post('list');
You are simply redirecting the page. So you will not get any value from post. If you want to get the value by post method you need to submit the value with a form.
<form id='save_form' method="post" action="<?php echo site_url('test/save');?>">
//add your html codes
//<table ..... and others
<a class="btn" href="#" id="savebtn">Save</button> //add # to href for save button
</form>
Now your js
$('#savebtn').click(function() {
//js codes that you wrote
//just replace the following line
//document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
$('#save_form').submit();
}
Related
I am creating dynamic input rows to POST it into MySQL database
the first row is mandatory, so I created the FORM and Inputs via HTML for the first row
Then created a button and addEventListener function to append any additional row dynamically
Error
Actually, all nodes and children are working normally from the DOM side without any problem
When I submit the form, only the first static row is posted but any appended rows give Undefined array key
myJsFile.js
document.getElementById('add_row').addEventListener('click',function(e){
var my_tbody = document.querySelector('.my_tbodyClass');
var my_tr = document.createElement('tr');
my_tbody.appendChild(my_tr);
var my_div = document.createElement('div');
var my_td = document.createElement('td');
var my_input = document.createElement('INPUT');
my_input.setAttribute('type','number');
my_input.setAttribute('name','myRows[]');
my_tr.appendChild(my_td);
my_div.appendChild(my_input);
my_td.appendChild(my_div);
});
myphpFile.php
function execute_dynamicRow()
{
global $dbConnection;
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submitedDynamicRows'])) {
$myRows = $_POST['myRows'];
$myRowsSerialized = serialize($myRows);
$stmt = mysqli_prepare($dbConnection, "INSERT INTO all_dynamic_rows(dynamic_rows) VALUES(?)");
$stmt_bind_param = mysqli_stmt_bind_param($stmt, 's', $myRowsSerialized);
$stmt_execute = mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
if (!$stmt) {
die("Query Error " . mysqli_error($dbConnection));
}
}
}
myform.php
<?php myform(); ?>
<form method="post">
<table class="table table-flush">
<thead>
<tr>
<th class="text-uppercase text-secondary">Add You Number</th>
<th class="text-uppercase text-secondary">Add Row</th>
</tr>
</thead>
<tbody class="my_tbodyClass">
<tr>
<td>
<div>
<input type="number" name="myRows[]">
</div>
</td>
<td>
<button class="btn btn-icon btn-3" id="add_row" type="button">
<span class="btn-inner--text">Add New Row</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="input-group input-group-outline my-3">
<input type="submit" name="submitedDynamicRows" class="btn btn-info" value="Add Tax Slab">
</div>
</form>
I have a form, there is a button (+sign)on the form which appends a row to insert the value .In my form i am able to enter the value on the first row both fields( stationerytype and stationeryqty). But once I append a new row by clicking plus button I am not able to insert any value on staionerytype field of second row while I'm able to insert the value in the stationeryqty field of second row.
My code is:
<table class="table table-bordered" id="tb" >
<tr class="tr-header">
<th class= "col-md-1" align="centre">Sl.No.</th>
<th class= "col-md-6" align="centre">STATIONARY TYPE</th>
<th class= "col-md-4" align="centre">STATIONARY QUANTITY</th>
<th class= "col-md-1"><span class="glyphicon glyphicon-plus"></span></th>
</tr>
<tr>
<?php
for($i=1;$i<=1;$i++)
{
?>
<td><input type="text" style="text-decoration: none" name="slno" value= "<?php echo $i; ?>" ></td>
<td><input type="text" style="text-decoration: none" name="stationerytype" ></td>
<td><input type="number" name="stationeryqtyrecd" id="stationeryqtyrecd" min="0"></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
<?php }?>
</table>
<button type="submit" name="add" class="btn btn-info" align="middle" >ADD </button>
<script>
var max = 4;
var count = 1;
$(function(){
$('#addMore').on('click', function() {
if(count <= max ){
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
debugger;
data.find("input")[0].value=++count;
}else{
alert("Sorry!! Can't add more than five samples at a time !!");
}
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
count--;
// get all the rows in table except header.
$('#tb tr:not(.tr-header)').each(function(){
$(this).find('td:first-child input').val(this.rowIndex);
})
}
});
});
</script>
</div>
I'm trying to change background color of some rows in table, when input of row is >=1000 and I click the button. I'm doing it with inputs in table and submit button. In php I'm making variable int from input and in JS checking if it is <=1000 and changing background color. But it is just for a moment, after that page is refreshing, shouldn't be. Here's my code:
<form action="" method="post">
<table>
<thead>
<tr>
<th>first</th> <th>second</th> <th>third</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>1</td> <td><input type="text" name="value11" /></td><td><input type="text" name="value12" /></td>
</tr>
<tr id="2">
<td>2</td> <td><input type="text" name="value21" /></td><td><input type="text" name="value22" /></td>
</tr>
</tbody>
<?php
if(isset($_POST['green'])){
$value21 = (int)trim($_POST['value11']);
$value21 = (int)trim($_POST['value21']);}
?>
</table>
<button type="submit" name="green" onclick="makeGreen()">button</button>
</form>
<script>
function makeGreen() {
var val1 = "<?php echo json_encode($value11) ?>";
var val2 = "<?php echo json_encode($value21) ?>";
if(val1 >= 1000)
document.getElementById("1").style.backgroundColor = "green";
if(val2 >= 1000)
document.getElementById("2").style.backgroundColor = "green";
}
</script>
Can You tell me what is wrong? Why it is not working?
When the button is hit, you're actually calling the function makeGreen(), then your form is submitted.
If you only want to make the background row green by hitting the button, you should replace the submit type by a button one, try this :
<button type="button" name="green" onclick="makeGreen()">button</button>
I'm manipulating cookie data for Scheduling Calendar.
I've array in cookie, using it i have made table. Now i want to delete table rows from last delete button of last column of the row.
My Code as given below
$cookie_data = '2017-06-27+06:00-06:30,2017-06-29+12:00-12:30,2017-07-01+06:00-12:00-17:00 ';
echo '<table class="table table-bordered" id="schedule">
<tr>
<th>Date</th>
<th>Times</th>
<th>Delete</th>
</tr>';
$val = $cookie_data;
$num_dates = explode(',',$val);
foreach($num_dates as $k => $v){
$bdata = explode('+',$v);
echo '<tr><td><label>'.$bdata[0].'</label></td><td><label>'.$bdata[1].'</label></td><td><button>Delete</button></td></tr>';
}
echo '</table>';
Also Code is running on phpfiddle.
http://phpfiddle.org/main/code/8ch0-merp
Now i want to remove any value by clicking delete button.
try with this,
Currently it will give error in fiddle. because stackoverflow not allowing to set custom cookie. So you can try this code at your side, and also i convert code in html so you have to convert in php.
You can set your cookie name as you want i just give example here.
Hope this will helps you :)
$("button").on("click",function() {
var cookieStr = $(this).attr("data-cookie");
var setCookieVal = [];
var cookieValue = $("#cookievalue").val().split(",");
for(i = 0; i< cookieValue.length; i++) {
if(cookieStr !== cookieValue[i]) {
setCookieVal.push(cookieValue[i]);
}
}
$.cookie("yourCookie",setCookieVal);
$(this).parent().parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<body>
<input type="hidden" value="2017-06-27+06:00-06:30,2017-06-29+12:00-12:30,2017-07-01+06:00-12:00-17:00" id="cookievalue">
<table class="table table-bordered" id="schedule">
<tbody>
<tr>
<th>Date</th>
<th>Times</th>
<th>Delete</th>
</tr>
<tr>
<td><label>2017-06-27</label></td>
<td><label>06:00-06:30</label></td>
<td>
<button data-cookie="2017-06-27+06:00-06:30">Delete</button>
</td>
</tr>
<tr>
<td><label>2017-06-29</label></td>
<td><label>12:00-12:30</label></td>
<td>
<button data-cookie="2017-06-29+12:00-12:30">Delete</button>
</td>
</tr>
<tr>
<td><label>2017-07-01</label></td>
<td><label>06:00-12:00-17:00 </label></td>
<td>
<button data-cookie="2017-07-01+06:00-12:00-17:00">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
If do you want to delete cookie use $.dough in Jquery Plugin and for this you should specify name of the cookie like this example :
Create Cookie
//Code Starts
$.dough("cookieName", "cookieValue");
//Code Ends
Read Cookie
//Code Starts
$.dough("cookieName");
//Code Ends
Delete Cookie
//Code Starts
$.dough("cookieName", "remove");
//Code Ends
I'm looking for a way to search for a string in a table rows by jquery and get all of that contents and select the element that have it to get the other pieces!
here is the html side:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Tel</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$allcontacts=$contact->getallcontacts("name",$_SESSION['username']);
if($allcontacts!=null)
foreach($allcontacts as $value){
?>
<tr>
<td class="contact-id">
<?php echo $value[0]; ?>
</td>
<td class="contact-name">
<?php echo $value[1]; ?>
</td>
<td class="contact-tell">
<?php echo $value[2]; ?>
</td>
<td class="contact-info">
<?php echo $value[3]; ?>
</td>
<td class="td-actions">
<a href="?IDD=<?php echo $value[0]." &owner=".$_SESSION['username'];?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
<a href="#" class="eb" data-uid="<?php echo $value[0]; ?>" data-toggle="modal" data-target=".bs-example-modal-lg">
<i class="glyphicon glyphicon-edit"></i>
</a>
<a href="#" onclick="" class="se">
<i class="glyphicon glyphicon-envelope"></i>
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<input type="text" class="cs" /><input type="button" value="Search" class="csb"/>
here is the script side!
$(".csb").click(
function() {
var ss = $(".cs").val();
var farray = $("td:contains(ss)").toArray();
console.log(farray);
}
);
console gets me an empty array!
ok ive tried ur code, obiously without php, so i put plain info. maybe this will help u
$(".csb").click(function(){
var ss = $(".cs").val();
var farray = new Array(); //define array
$("tr").removeAttr("style"); //reset all
if(ss!=""){ //check if isnt empty
$("td:contains("+ss+")").each(function(){
$(this).parent().css("background","red"); //select found
//push to array
farray.push($(this).parent().find(".contact-id").html());
farray.push($(this).parent().find(".contact-name").html());
farray.push($(this).parent().find(".contact-tell").html());
farray.push($(this).parent().find(".contact-info").html());
});
}
else{
alert("put a text");
}
//result
$("code").html("value search: "+ss);
$("pre").html("id found: "+farray[0]+"<br>"+
"name found: "+farray[1]+"<br>"+
"tel found: "+farray[2]+"<br>"+
"info found: "+farray[3]);
});
this is the full code: https://jsfiddle.net/keejke5e/3/
You don't need to add .toArray() as $("td:contains(ss)") returns array. I think you need to check whether you getting $("td") element or not. As for I see, according to your code it should find it. So just check $("td") and $("td:contains(ss)") in your chrome console.