Develop Reference

Create a text form inside table row that stays after submission and updates database

I want to create a column that has a text box inside each table row. The user can write any text inside the text box and click the 'Save' button to save it in the database. Additionally, the text box can be edited unlimited times. My code is the following:
index.php
<?php
...
while($row = $result->fetch_assoc()){
echo "<form action= 'search.php' method='post'>";
echo "<form action='' method='get'>";
echo "<tr>
<td><input type='checkbox' name='checkbox_id[]' value='" . $row['test_id'] . "'></td>
<td> ".$row['test_id']." </td>
<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
<td> ".$row['path']." </td>
<td> ".$row['video1_path']." </td>
<td> ".$row['video2_path']." </td>
<td> ".$row['video3_path']." </td>
<td> ".$row['video4_path']." </td>";
if(empty($row["directory"])){
echo "<td></td>";
}else {
echo "<td><div><button class='href' id='" . $row['test_id'] . "' >View Report</button><div></td>";
}
echo " <td style='display: none;'> ".$row['directory']." </td>
</tr>";
}
?>
</table> <br>
<input id= 'select_btn' type='submit' name='submit' value='Submit' class='w3-button w3-blue'/>
</form>
</form>
</div>
<!-- Opens the pdf file from the pdf_report column that is hidden -->
<script type="text/javascript">
$(document).on('click', '.href', function(){
var result = $(this).attr('id');
if(result) {
var dir = $(this).closest('tr').find("td:nth-child(9)").text();
window.open(dir);
return false;
}
});
</script>
<!-- Updates text input to database -->
<script type="text/javascript">
$(document).on('click', '.name', function(){
var fcookie1= 'mycookie1';
var fcookie2= 'mycookie2';
var name = $(this).attr('id');
if(name) {
var text1 = $(this).closest('tr').find("td:nth-child(2)").text();
var text2 = $(this).closest('tr').find("td:nth-child(3)").text();
document.cookie='fcookie1='+text1;
document.cookie='fcookie='+text2;
$.ajax({
url: "name_edit.php",
type:"GET",
success: function() {
// alert("Edited Database");
}
});
}
});
</script>
name_edit.php
<?php include 'dbh.php' ?>
<?php include 'search.php' ?>
<?php
if (isset($_COOKIE["fcookie1"]))
echo $_COOKIE["fcookie1"];
else
echo "Cookie Not Set";
if (isset($_COOKIE["fcookie2"]))
echo $_COOKIE["fcookie2"];
else
echo "Cookie Not Set";
$var1 = $_COOKIE["fcookie1"];
$var2 = $_COOKIE["fcookie2"];
$conn = mysqli_connect($servername, $username, $password, $database);
$sql = "UPDATE test_data SET name='$var2' WHERE id='$var1'";
$query_run= mysqli_query($conn,$sql);
if($query_run){
echo '<script type="text/javascript"> alert(Data Updated)</script>';
} else {
echo '<script type="text/javascript"> alert(Data Not Updated)</script>';
}
?>
My idea was for the user to write any text. Then i will 'grab' the text and its expected id and save it to a cookie, when the save button is clicked. The cookie will then be echoed in name_edit.php and insert it in the sql code which will then update my database.
Im not sure what to include in 'value' inside the form tag. If there is data inside the database then display it inside the text box which can also be edited, else display blank for a text to be inserted.
I am new to coding and I'm a bit confused if my idea is correct or should i approach it another way.

I did some research and found out i did not have to use form but instead use 'contenteditable'. To edit the specific column i changed
<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>
to this:
<td class='name' data-id1='" . $row['test_id'] . "' contenteditable='true'>".$row['name']."</td>
and for my jquery i added the following:
<style>
.editMode{
border: 1px solid black;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// Add Class
$('.name').click(function(){
$(this).addClass('editMode');
});
// Save data
$(".name").focusout(function(){
$(this).removeClass("editMode");
var id = $(this).closest('tr').find("td:nth-child(2)").text();;
var value = $(this).text();
$.ajax({
url: 'name_edit.php',
type: 'post',
data: { value:value, id:id },
success:function(response){
alert('Edits Saved');
return false;
}
});
});
});
</script>
and in the php side, i simply did the following:
<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);
$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];
$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";
mysqli_query($conn,$sql);
echo 1;
?>

How to checked the checkbox if my checkbox is using html and javascript?

How can i checked the checkbox if the data is already in the database as selected by user ? For normal html, i can use checked , however, im using javascript for this one. is there any way to edit the html instead of the javascript ?
<td><div align="center"><span class="formlist">
<select id="plant" name="plant[]" class="form-control" multiple="multiple">
<?php
$query_plant = "SELECT * FROM plant WHERE plant_enable=1 ORDER BY plant_name";
$rs_plant = DB_Query($query_plant);
while ($row_plant = DB_FetchRow($rs_plant)) {
$plant.='<option value='.$row_plant["plant_id"].'>' .$row_plant["plant_name"].' ['.$row_plant["plant_id"].']</option>';
}
mysql_free_result($rs_plant);
echo $plant;
?>
</select>
</span></div></td>
<script type="text/javascript">
$(function () {
$('#plant').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#plant option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>

1) First you can add selected attribute to options which is user already selected and stored in database . like this
$userPlants = [1,2,3,4]; //fetched value from database . previously user selected .
<option value="<?php echo $row_plant["plant_id"] ?>"
<?php
if(in_array($row_plant["plant_id"], $userPlants))
{
echo " selected";
}
?>
><?php echo $row_plant["plant_name"] ?></option>
$(function () {
$('#plant').multiselect({
includeSelectAllOption: true
});
// $("#plant").multiselect("refresh"); //if you need to refresh the multiselect use like this .
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript"></script>
<td><div align="center"><span class="formlist">
<select id="plant" name="plant[]" class="form-control" multiple="multiple">
<option value='option1'>option1</option>
<option value='option2' selected >option2</option>
<option value='option3' selected >option3</option>
<option value='option4'>option4</option>
<option value='option5'>option5</option>
?>
</select>
</span></div></td>

You can create an array of all plants that user has already selected. And then do it like this
<td><div align="center"><span class="formlist">
<select id="plant" name="plant[]" class="form-control" multiple="multiple">
<?php
// query to fetch user palnts and crate an array
$userPlants = [1231,1281,1241,1271];
$query_plant = "SELECT * FROM plant WHERE plant_enable=1 ORDER BY plant_name";
$rs_plant = DB_Query($query_plant);
while ($row_plant = DB_FetchRow($rs_plant)) {
$plant.='<option value='.$row_plant["plant_id"];
if (in_array($row_plant["plant_id"], $userPlants)) {
echo " checked ";
}
$plant.= '>' .$row_plant["plant_name"].' ['.$row_plant["plant_id"].']</option>';
}
mysql_free_result($rs_plant);
echo $plant;
?>
</select>
</span></div></td>

<tr>
<td><div align="center">
<select id="plant" name="plant[]" class="form-control" multiple="multiple" >
<?php
$query_po = "SELECT * FROM plant WHERE plant_enable=1 ORDER BY plant_name";
$rs_po = DB_Query($query_po);
while ($row_po = DB_FetchRow($rs_po)) { ?>
<option value="<?php echo $row_po["plant_id"] ?>"
<?php
$user_sql = "SELECT * FROM plant_access WHERE staff_id = '".$STAFF_ID."'";
$user_res = DB_Query($user_sql);
while($user_row = DB_FetchRow($user_res)) {
if($row_po["plant_id"] == $user_row["temp_plant_code"]){
{
echo " selected";
}
} ?>
<?php
}
?>
<?php echo $row_po["plant_name"] ?></option>
<?php
echo $row_po["plant_name"] ;
} ?>
</select>
</div></td>
</tr>
Credit to : #jYoThl

submit form not working/ not reload

i create a form(form1) to search mysql data into table without reload the page using ajax, it's working fine, but when i want to insert data from the second form(formorder) the submit button not refresh or reload.
this my code
index.php
<html>
<head>
<title>Search Data Without Page Refresh</title>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
</head>
<body>
<center>
<br>
<?php include("koneksi1.php");
$sql="select * from supplier";
$query=mysqli_query($koneksi,$sql);
?>
<form action="" name = "form1">
<select name="namea" style="width:300px; padding:8px;">
<?php
while($data=mysqli_fetch_assoc($query)){
echo "<option value='".$data['id_supplier']."'>".$data['id_supplier']."</option>";
}
?>
</select>
<input type="submit" value="Search" id="search-btn" style="padding:8px;"/>
</form>
<br>
<div id = "s-results">
<!-- Search results here! -->
</div>
<script type = "text/javascript">
$(document).ready(function(){
$('#s-results').load('search.php').show();
$('#search-btn').click(function(){
showValues();
});
$(function() {
$('form').bind('submit',function(){
showValues();
return false;
});
});
function showValues() {
$.post('search.php', { namea: form1.namea.value },
function(result){
$('#s-results').html(result).show();
});
}
});
</script>
</center>
</body>
</html>
search.php
<?php
include("koneksi1.php");
isset( $_REQUEST['namea'] ) ? $name=$_REQUEST['namea'] : $name='';
$name = mysqli_real_escape_string($koneksi,$name);
if( empty( $name )){
echo '<script> alert("Please search something!")</script>';
}else{
$sql = "select * from barang where id_supplier like '%$name%'";
$rs = mysqli_query($koneksi,$sql ) or die('Database Error: ' . mysql_error());
$num = mysqli_num_rows($rs);
if($num >= 1 ){
echo "<div style='margin:10px; color:green; font-weight: bold;'>$num records found!</div>";
echo "<table width='365' border ='0' cellspacing='5' cellpadding='5'>";
echo"<tr><th>RESULTS</th></tr>";
echo "<div class='table-responsive'>";
echo "<table class='table table-hover'>";
while($data = mysqli_fetch_array( $rs )){
?>
<tbody>
<?php
$kuantitas=0;
$kuantitas++;
?>
<form action="aksi.php" method="post" id="formorder">
<tr>
<td><?php echo $data['nama_barang']?></td>
<td><?php echo $data['stok']?></td>
<td><input type="text" name="kuantitas" size="4"></td>
<td><input type="text" name="harga_satuan" id="harga_satuan" size="10"></td>
<td><input type="text" name="ppn" id="ppn" size="3"> %</td>
<td><button type="submit" class="btn btn-success btn-sm" id="add" name="add">ADD</button></td>
</tr>
</form>
<?php }?>
</tbody>
</table>
</div>
<?php
}else{
echo "<tr><th>NO RESULTS</th></tr>";
}
}
?>
the button submit in formorder not working, what wrong with my code???

Ajax data not printing in PHP when passed from Javascript

I am trying to print the elements of an array in PHP which was passed from Javascript. I think the js array is being passed but for some reason it is not being printed via php. Sorry if my code is not properly indented. TIA
<?php
$link = mysqli_connect("localhost","xxxx", "xxxxxx","xxxx");
if($_POST['delete']){
$delete= json_decode($_POST['str'], true);
foreach($delete as $x){
echo"<script> alert(".$x.");</script>";
}
}
?>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
//This is a table which displays rows from a database.
//The user selects rows and the ids of those rows are
//are stored in a javascript array called 'toDelete'
//I want to pass this array to PHP
<form method="post" id="myForm" >
<table id="secondDiv" >
<tr>
<th >
<form><input class="checkbox"type="checkbox" name="selectAll" id="selecctall" value=""></form>
</th>
<th>Date</th>
<th>Event</th>
<th>Details</th>
<th>Time & Location</th>
</tr>
<?php
$link = mysqli_connect("localhost","xxxx", "xxxxxx","xxxx");
$query = "SELECT * FROM meetings";
if($result = mysqli_query($link,$query)){
while($row = mysqli_fetch_array($result)){
echo "<tr>";
echo "<td><form ><input class=\"checkbox1\" type=\"checkbox\" name=\"".$row['meetingNo']."\" >
</form></td>";
echo "<td>".$row['date']."</td>";
echo "<td>".$row['event']."</td>";
echo "<td>".$row['details']."</td>";
echo "<td>".$row['location']."</td>";
echo "</tr>";
}
}
?>
</table>
<!-- <input type="submit" class="btn btn-warning" value="Edit" /> -->
<input type="hidden" id="str" name="str" value="" />
<input type="submit" id="btn" name="delete" value="Delete" />
</form>
<script>
var toDelete = new Array();
$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if(this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
// JSON.stringify(toDelete);
$('input:checkbox').change(
function(){
if ($(this).is(':checked')) {
toDelete.push(this.name);
}
return true;
}
);
$(document).ready(function(){
$("#btn").click( function() {
$.post( $("#myForm").attr("action"),
$('#str').val(JSON.stringify(toDelete))
);
});
$("#myForm").submit( function() {
return false;
});
});
</script>
</body>
</html>

As you are printing a string, not a javascript variable, you don't have quotes within alert call.
Change the line:
echo"<script> alert(".$x.");</script>";
With:
echo "<script> alert('$x'); </script>";
Or:
echo "<script> alert('".$x."'); </script>";

How to execute sql delete query on button click using javascript function in PHP

I have three files, index.html, database.php, and function.js. In my database.php, I have created a form with a delete button to execute the delete sql query on click. My main purpose is to display a table with records displayed and a delete button on each so that whenever I click the delete button, it executes the SQL query and removes that particular row from the database.
It works fine before I added in ajax into the javascript. Now when delete button is clicked, the whole page just refreshes.
How do I execute the delete query on the delete button click using a javascript function that I want to call in my php file without creating/using new files?
I am using vi editor to code so I do not have any means of debugging except IE's developer tools. My javascript file doesn't seem to be working because in the HTML file the form returns a null at
onsubmit="return checkFields()";
as stated from the error I received, but it's probably just because there are errors in my javascript file.
P.S. I am new to PHP, javascript, and ajax so do pardon me if I make any careless or obvious mistakes. I also do not know any jQuery or JSON. Any form of help in the simplest explanation would be greatly appreciated.
Here is the index.html file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="function.js" type="text/javascript"></script>
</head>
<body>
<form name="infoForm" method="post" onsubmit="return checkFields()" action="">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name" id="name" maxlength="40"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea maxlength="45" name="address"id="address" ></textarea></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" name="phone" id="phone" maxlength="20"><br></td>
</tr>
<tr>
<td>Gender:</td>
<td><input checked type="radio" name="gender" id="male" value="Male">Male
<input type="radio" name="gender" id="female" value="Female">Female</td>
</tr>
<tr>
<td>
Nationality:
</td>
<td>
<select name="nation">
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Indoensia">Indonesia</option>
<option value="Philippines">Philippines</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<br><input type="reset" value="Cancel">
<input type="submit" name="result" value="Submit"/>
</td>
</tr>
</table>
</form>
<div id="divTable"></div>
</body>
</html>
Here is the database.php file:
<?php
// Define database parameters //
DEFINE ('DB_USER' ,'iqwe');
DEFINE ('DB_PASSWORD', 'inqwe123');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('DB_NAME', 'hqwdqq');
$table_info = "info";
// Connect to database
$conn = #mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to Database:'. mysql_error());
#mysql_select_db (DB_NAME) OR die ('Could not select the Database: '.mysql_error());
// Delete Row
if(isset($_POST['delete'])){//java script function somewhere
echo "<script>";
echo "deleteRow()";
echo "</script>";
}
//Check if phone no. is duplicate and if not, insert data
if(isset($_POST['result'])){
$phone = $_POST['phone'];
$query_string = "select phone from $table_info where phone='$phone'";
$result = #mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "A same phone number has been found. Please enter a different phone number.";
}else{
$query_string = "insert into $table_info(name, address, phone, gender, nation) values('".$_POST['name']."','".$_POST['address']."','".$_POST['phone']."','".$_POST['gender']."','".$_POST['nation']."')";
$result = #mysql_query($query_string);
}
}
// Display table
$query_string = "select * from $table_info";
$result = #mysql_query($query_string);
$num_row = mysql_num_rows($result);
if($num_row){
echo "<table border=1>";
echo "<tr><th>Name</th><th>Address</th><th>Phone no.</th><th>Gender</th><th>Nationality</th><th>Created</th><th>Modified</th><th>Action</th></tr>";
while($row = mysql_fetch_array($result)){
echo "<tr><td>", $row['name'], "</td>";
echo "<td>", $row['address'], "</td>";
echo "<td>", $row['phone'], "</td>";
echo "<td>", $row['gender'], "</td>";
echo "<td>", $row['nation'], "</td>";
echo "<td>", $row['createdTime'], "</td>";
echo "<td>", $row['modifiedTime'], "</td>";
?>
<!--Delete button-->
<td><form id="delete" method="post" action="">
<input type="hidden" name="deleteRow" value="<?php echo $row['user_id']; ?>"/>
<input type="button" name="delete" value="Delete" onclick="return deleteRow(<?php echo $row['user_id']; ?>);"/></td></form></tr>
<?php
}
echo "</table>";
}
else{
echo "0 results";
}
?>
<form method="post" action="index.html">
<input type="submit" name="goBack" value="Back"/>
</form>
And here is the function.js file:
function checkFields(){
var name = document.getElementById("name");
var address = document.getElementById("address");
var phone = document.getElementById("Phone");
if(confirm('Do you want to submit')){
if(name == null, name == ""||address == null, address == ""||phone == null, phone == ""){
alert("Please fill in all your details.");
return false;
}
else{
var page = "database.php";
var xmlhttp = new XMLHttpRequest();
if(xmlhttp==null){
alert("Your browser does not support AJAX!");
return false;
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("divTable").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", page, true);
xmlhttp.send(null);
return false;
}
}
else{
return false;
}
}
function deleteRow(id){
if(confirm("Are you sure you want to delete this contact?")){
//$id = $_POST['user_id'];
$query_string = "delete from $table_info where user_id='id';
$result = mysql_query($result) or die ('Could not execute.'. mysql_error());
return false;
}
}

It looks like you're missing a closing double-quote at the end of this line:
$query_string = "delete from $table_info where user_id='id';
It should read:
$query_string = "delete from $table_info where user_id='id'";
There may be other errors as well. You should learn to use your browser's built-in script debugging features (and/or download one if your browser doesn't have one). For example, try Firebug and the Web Developer Toolbar for Firefox.