How to store all column to my database? by Javascript - javascript

///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>
Above is my code, I need update all column of table to my database, if I click submit, just update the last column only.
What wrong in my code? if use javascript, how to solve it?
<?php
include 'connect.php';
$index= $_POST["indexNumber"];
$item1= $_POST["item"];
$number1= $_POST["number"];
$query=mysql_query("UPDATE `file` SET `item`='$item1' WHERE `indexNumber`='$index';");
echo "<script language=javascript>alert('Update Successful');window.location='index.php'</script>";
?>
Above is update.php

You need to use array for this.
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
Please check updated script
///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>

Related

PHP Ajax javascript looping through table with input fields

How can i get specific input values of each row when i click the button using ajax javascript. here is my code
here is my example of getting the data from database dynamically with input fields and button individually
<div style="width:100%; min-height:275px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablelist">
<form action="" method="get" name="formwebservice">
<tr>
<td colspan="3">
<div class="pgLoading">
<table style="border:1px solid #FF00A6; border-top:none;" class="tablelisttable"
border="0" cellspacing="0" cellpadding="0">
<tr class="tablelisttr">
<td>Branch ID</td>
<td>Branch Code</td>
<td>Branch Name</td>
<td>Last Sync Date</td>
<td>Start Date</td>
<td>End Date</td>
<td>Synchronization</td>
<td></td>
</tr>
<?php
$query_branch="SELECT * FROM Branch";
$query_branch_result=mysqli_query($con,$query_branch) or die(mysqli_error($con));
while ($row = mysqli_fetch_assoc($query_branch_result)) {
echo "<tr class='listtr' align='center'>
<td>".$row['BranchID']."</td>
<td>".$row['BranchCode']."</td>
<td>".$row['BranchName']."</td>
<td>2018-04-14 05:39:57</td>
<td><input type='text' name='startdate'> </td>
<td><input type='text' name='enddate'></td>
<td><input type='button' name='sync' value='Synchronize'></td>
<td>0/0</td>
</tr>";
}
?>
</table>
</div>
</td>
</tr>
</form>
</table>
</div>
index.js
$(function(){
$('[name=sync]').click(function(){
$.ajax({
type : "get",
data : $('[name=formwebservice]').serialize(),
url : "save.php",
success : function(data){
$('.loader').html(' ');
$('.pgLoading').html(data).hide().fadeIn('slow');
},
beforeSend : function(){
$('.loader').html('Loading... Please wait...').hide().fadeIn();
}
});
}); });
save.php
if(isset($_GET['startdate']) && isset($_GET['enddate'])) {
$StartDate=$_GET['startdate'];
$EndDate=$_GET['enddate'];
echo $StartDate;
echo $EndDate;
}else{
echo "NO DATA INPUT";
}
my problem is the $_GET['startdate'] and $_GET['enddate'] is not set so im always getting no data input.

Generate every row total of a table input tag in HTML

[this type output i want i am fetchint data from database and storing in table than quantity will be adde by usernow on if user enter uantity than i want total in add column`
Sr. No.
Product Name
Price
Quantity
ADD
</tr>
<tr>
<?php
mysql_query ("set character_set_results='utf8'");
$query= mysql_query("SELECT * FROM $statement LIMIT $startpoint,$limit");
while($row = mysql_fetch_array($query))
{
?>
<td><?php echo $row['srno'];?></td>
<td><?php echo $row['pname'];?></td>
<!-- <td><input id="price" type="number" value="0" oninput="updateOutput()"/></td>
<td><input id="qty" type="number" value="0" oninput="updateOutput()" /></td>-->
<td> <input id="price" type="number" value="<?php echo $row['price'];?>" oninput="myFunction()"></td>
<td><input id="qty" type="number" value="0" oninput="myFunction2()" ></td>
<td>
<p id="demo">0</p>
</td>
</tr>
`]1
<script>
function myFunction() {
var price = document.getElementsByClassName('price');
var quantity = document.getElementsByClassName('quantity');
var totalPrice=0,totalQuantity=0;
for(var i=0;i<price.length;i++){
totalPrice+=parseInt(price[i].innerHTML);
}
for(var i=0;i<quantity.length;i++){
totalQuantity+=parseInt(quantity[i].value);
}
console.log(totalPrice,totalQuantity); /*Here is your Result variable*/
document.getElementById('priceResult').innerHTML = totalPrice;
}
</script>
<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
<tr>
<th class="table-header-repeat line-left minwidth-1">Price</th>
<th class="table-header-repeat line-left minwidth-1">Quantity</th>
<th class="table-header-repeat line-left minwidth-1">ADD</th>
</tr>
<tr><?php
mysql_query ("set character_set_results='utf8'");
$query= mysql_query("SELECT * FROM product");
while($row = mysql_fetch_array($query))
{
?>
<td class="price" >5</td>
<td><input class="quantity" type="number" value="0" oninput="myFunction()" ></td>
<td>
<div id="priceResult"></div>
</td>
</tr>
<?php } ?>
</table>
JavaScript Solution:
function getResult(){
var price = document.getElementsByClassName('price');
var quantity = document.getElementsByClassName('quantity');
var totalPrice=0,totalQuantity=0;
for(var i=0;i<price.length;i++){
totalPrice+=parseInt(price[i].value);
}
for(var i=0;i<quantity.length;i++){
totalQuantity+=parseInt(quantity[i].value);
}
document.getElementById('totalPrice').innerHTML = totalPrice;
document.getElementById('totalQuantity').innerHTML = totalQuantity;
}
getResult();
<table border="1" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
<tr style="background:#3cf;color:white">
<th class="table-header-repeat line-left minwidth-1">Price</th>
<th class="table-header-repeat line-left minwidth-1">Quantity</th>
<th class="table-header-repeat line-left minwidth-1">ADD</th>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="10"></td>
<td><p id="demo">0</p></td>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="20"></td>
<td><p id="demo">0</p></td>
</tr>
<tr>
<td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number" value="50"></td>
<td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number" value="30"></td>
<td><p id="demo">0</p></td>
</tr>
<tr style="background:black;color:white">
<td id="totalPrice"></td>
<td id="totalQuantity"></td>
<td> </td>
</tr>
</table>

Javascript Checkbox add value Textarea

I have a code like these:
var fails = 'fail';
var sucs = 'success';
function showResult(state){
if(state){
document.getElementById("hasil").value=sucs;
}else{
document.getElementById("hasil").value=fails;
}
}
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
<tr>
<td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
<td><textarea name='result[]' id='hasil'>fail</textarea></td> <td><textarea name='notes[]' class='form-control'></textarea></td>
</tr>
</form>
I want to create that checkbox, if it's clicked, it will change textarea on that row to success. If I uncheck, it will change back to fail. Can anyone help me?
it only works for the first row.
As #epascarello said, because ids are singular. so you need to select the parent tr, find the text area and set the value.
You can do in this way.
$('[type=checkbox]').change(function() {
if ($(this).is(":checked")) {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("sucess");
} else {
var $row = $(this).parents('tr');
$row.find('textarea[name="result[]"]').text("fail");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border='1'>
<tr>
<th>TARGET</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='target' />
</td>
<td>
<textarea name='result[]' id='hasil'>fail</textarea>
</td>
<td>
<textarea name='notes[]' class='form-control'></textarea>
</td>
</tr>
</form>

Pass the id from database to in open modal box

What I need to do is how I can pass the id depends on id of row to open inside of modal box? I need to have an edit within my table. I have below my table with my php mysql records. But how I can pass the id? Any help will appreciate !
<table width="70%" border="0" cellpadding="0" cellspacing="0" class="table-list">
<tr>
<th width="40%">Item</th>
<th width="20%">Category Code</th>
<th width="20%">Item Code</th>
<th width="20%">Edit</th>
<th width="20%">Delete</th>
</tr>
<?php
$res = $mysqli1->query("select * from code order by item_code ASC");
while($r = $res->fetch_assoc()){
echo "<tr>
<td>".$r['item']."</td>
<td>".$r['cat_code']."</td>
<td>".$r['item_code']."</td>
<td><a href='item_edit.php?id=".$r['id']."'</a></td>
<td><a href='#' id='".$r['id']."' class='del'>Delete</a></td>
</tr>";
}
?>
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right">Close</td>
</tr>
<tr>
<td>Item</td>
<td><input type="text" name="items" id="items" value="" class="inputs" autocomplete="off"></td>
</tr>
<div>
Javascript
$(document).ready(function(){
$("#add_new, #edit").click(function(){
$(".entry-form").fadeIn("fast");
});
$("#close").click(function(){
$(".entry-form").fadeOut("fast");
});
});
You can try with below idea:
Fetch Value from custom attribute 'data-id'
in jQuery
var someVariable = $("#someElement").data("id");

Jquery validate (styling the errors inside table)

i have a form with Jquery .validation().
Form:
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
I would like to print errors like this:
Is it possible?
Thanks in advance :)
Demo Here
HTML
<form name="test">
<table cellspacing="1" cellpadding="1">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/>
<span class="error_span">Enter name</span>
</td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/>
<span class="error_span">Enter last name</span>
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/>
<span class="error_span">Enter address</span>
</td>
</tr>
</table>
<input type='button' id='submit' name='enter' value='submit'/>
</form>
jQuery
$(document).ready(function(){
$("#submit").click(function(){
$('input').each(function(index) {
if($(this).val()=="") {
$(this).addClass("has_error");
$(this).siblings(".error_span").show();
}else{
$(this).removeClass("has_error");
$(this).siblings(".error_span").hide();
}
});
});
});
CSS
.error_span{
color:red;
display:none;
}
.has_error{
border:1px solid red;
}
Demo Here
You can use onsubmit attribute of your form to execute the javascript and stop the form from submitting if there is validation error
You can do in Two ways..
1)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/></td>
</tr>
<tr>
<td></td>
<td>Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
or
2)
<form....>
<table cellspacing="0" cellpadding="0">
<tr>
<td>Name: </td>
<td><input type='text' name='Name'/></td>
</tr>
<tr>
<td>Last Name: </td>
<td><input type='text' name='LastName'/> <br />Name Is Required</td>
</tr>
<tr>
<td>Address: </td>
<td><input type='text' name='Address'/></td>
</tr>
</table>
<input type='submit' name='enter' value='submit'/>
</form>
You have to use custom validation code for doing like that. Check this link. http://docs.jquery.com/Plugins/Validation/Validator/addMethod

Categories