We Keep Coding

How to update the database using a checkbox in a table column?

I am new to PHP and just began to learn JS as it is required at this phase of the project. I have a database named- asms
table named - filtersms
column named - filter_op . In this column of the table I have a checkbox for each row and my requirement is to enter 'yes' to the filter_op column once I check the checkbox and remains 'no' if not checked. I tried to do this using PHP itself but happens to be impossible to update the table on the click of the checkbox. As I am a beginner to JS can you please help me to get through this.
This is how filtersms table looks like,
|id |vendor |alarm_name |filter_op|
|1 |HUAWEI | communication fault |no |
|2 |HUAWEI | STP link fault |no |
|3 |ZTE | Battery discharge |no |
|4 |ZTE | AC power off |no |
Following is the PHP code I written so far to add a checkbox to each row and display the table.
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h2 mb-2 text-gray-800">Filter SMS</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h4 class="m-0 font-weight-bold text-primary">Filtered SMS Summary</h4>
</div>
<div class="card-body">
<?php
//Table select query for database
require('include/connection.php');
$query1="SELECT* FROM filtersms ";
$result_set=mysqli_query($connection,$query1);
// require('include/filtercheck.php');
?>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Vendor</th>
<th>Alarm</th>
<th>Filter Option</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Vendor</th>
<th>Alarm</th>
<th>Filter Option</th>
</tr>
</tfoot>
<tbody>
<?php
while($row=mysqli_fetch_assoc($result_set)) {
?>
<tr>
<td><?php echo $row["vendor"]; ?></td>
<td><?php echo $row["alarm_name"]; ?></td>
<td>
<form action="include/filtercheck.php" method="POST">
<div class="form-check">
<input type="checkbox" class="form-check-input" value="yes" name="filter_check" id="filter_check"/>
<label class="form-check-label" for="filter_check">Filter Alarm</label>
</div>
</form>
</td>
</tr>
<?php
}
?>

You can use jQuery.post() for it.
For each row, use:
<tr>
<td><?php echo $row["vendor"]; ?></td>
<td><?php echo $row["alarm_name"]; ?></td>
<td>
<input type="checkbox" value="2" class="js-checkbox-filter" <?php echo ($row["filter_op"] == "yes" ? "checked" : NULL) ?> />
</td>
</tr>
These checkbox are now identified by the js-checkbox-filter class, and you can use it to bind a jQuery.change() event handler on it.
var checks = $(".js-checkbox-filter")
checks.change(function() {
$.post("filtercheck.php", {
id: this.value,
filtered: this.checked ? "yes" : "no"
})
})
You'll have to change your filtercheck.php file too. It must receive an id and filtered ("yes"/"no") parameters through $_POST variable. Use them to update your database table.

You can try something like this if I understand your question correctly. That uses jQuery so you need to include the CDN script. That basically submits data via AJAX indicating the new filter options for the row checked or unchecked. It does that my posting an array as filter_op_post having index 0 = to true or false and index 1 equal to the id of the row in the database. You can process that in the filtercheck.php file, although I included a little snippet. Let me know if that works for you.
That AJAX response is in "data", so you can return whatever you want and process that as needed.
POST:
filter_op_post[] […]
0 true
1 2
RESPONSE:
["true","2"] e.g.
index.php page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h2 mb-2 text-gray-800">
Filter SMS
</h1>
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h4 class="m-0 font-weight-bold text-primary">
Filtered SMS Summary
</h4>
</div>
<div class="card-body">
<?php
$Config = array(
'DB_TYPE' => 'mysql',
'DB_HOST' => '127.0.0.1',
'DB_NAME' => 'alarmfilter',
'DB_USER' => 'root',
'DB_PASS' => 'root',
'DB_PORT' => '3306',
'DB_CHARSET' => 'utf8'
);
$options = array(PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ, PDO::ATTR_ERRMODE => PDO::ERRMODE_WARNING, PDO::ATTR_EMULATE_PREPARES => true );
try {
$database = new PDO($Config['DB_TYPE'] . ':host=' . $Config['DB_HOST'] . ';dbname=' . $Config['DB_NAME'] . ';port=' . $Config['DB_PORT'] . ';charset=' . $Config['DB_CHARSET'], $Config['DB_USER'], $Config['DB_PASS'], $options);
}
catch (PDOException $e) {
// Echo custom message. Echo error code gives you some info.
echo 'Database connection can not be estabilished. Please try again later.' . '<br>';
echo 'Error code: ' . $e->getCode();
// Stop application :(
// No connection, reached limit connections etc. so no point to keep it running
exit;
}
$query="SELECT* FROM filtersms ";
$parameters = [];
$stmt = $database->prepare($query);
$stmt->execute($parameters);
$result_set = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Vendor</th>
<th>Alarm</th>
<th>Filter Option</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Vendor</th>
<th>Alarm</th>
<th>Filter Option</th>
</tr>
</tfoot>
<tbody>
<?php
foreach ($result_set as $row) {
?>
<tr>
<td><?php echo $row["vendor"]; ?>
</td>
<td><?php echo $row["alarm_name"]; ?>
</td>
<td>
<form>
<div class="form-check">
<?php $checked = ($row["filter_op"] == "true")?"checked":""; ?>
<input
<?php echo $checked; ?>
type="checkbox" class="form-check-input filter_check" id ="filter_op_id
<?php echo $row["id"]; ?>
"/>
<input type="hidden" name="filter_op_post[]" value="<?php echo $row[" filter_op"]; ?>
"/>
<input type="hidden" name="filter_op_post[]" value="<?php echo $row[" id"]; ?>
"/> <label class="form-check-label" for="filter_check">Filter Alarm</label>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<style> table, table tr, table td {
border:black 1px solid;
border-collapse: collapse;
</style>
<script>
$(".filter_check").on("click", function(e) {
$(this).next().val($(this).prop("checked"));
formdata = $(this).closest("form").serialize();
$.ajax({
type: "POST",
url: 'include/filtercheck.php',
dataType: "json",
data: formdata,
beforeSend: function(e) {
// $("#spinner").css("display", "block");
},
})
.done(function(data, textStatus, jqXHR) {
alert(data);
})
.fail(function( jqXHR, textStatus, errorThrown) {
})
.always(function(jqXHR, textStatus) {
$("#spinner").css("display", "none");
});
});
</script>
include/filtercheck.php page:
<?php
$rowid = $_POST['filter_op_post'][1];
$filter_op_value = $_POST['filter_op_post'][0];
echo json_encode($_POST['filter_op_post']);
?>

You could use a form with a submit button.
<form method="POST">
<input type="checkbox" class="form-check-input" value="true" name="filter_check" id="filter_check"/>
<label class="form-check-label" for="filter_check">
<button type="submit" name"submit" value="Submit">Submit</button>
</form>
With this you could update the database using the Post method
if(isset($_POST['submit']))
{
/* update database here
/* your value of the checkbox is &_POST['filter_check']
}

Javascript form data not updating Mysql database

EDIT
Ive now got the following - but still it does not work
<script>
$(document).ready(function() {
$("button").click(function(){
var jsPostcode = document.login.getElementsByName("postcode").value;
var jsEmail = document.login.getElementsByName("email").value;
var formdata = {postcode:jsPostcode,email:jsEmail};
$.ajax(
{
type: "POST",
url: "database.php", //Should probably echo true or false depending if it could do it
data : formdata,
success: function(feed) {
if (feed!="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}}}};
</script>
=================================================================
ORIGINAL QUESTION FOLLOWS
I'm trying to take in data using a form and send some of this to a Mysql database. I cant use the action keyword in the form as that is being used to complete authentication therefore I am trying to use ajax and jquery. I have got to a point where I know I am close to cracking it but I'm not sure what is wrong. Please see my files below. First off the main file login.php is below:
Form Follows (login.php)
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
if (isset($_POST['postcode'])) {
$postcode = $_POST['postcode'];
}
if (isset($_POST['email'])) {
$email = $_POST['email'];
}
?>
**SOME HTML HERE**
<script src="jquery-3.2.1.min.js"></script>
<script>
var js-postcode = document.login.getElementsByName("postcode").value;
var js-email = document.login.getElementsByName("email").value;
var formdata = {postcode:js-postcode,email:js-email};
$("button").click(function(){
$.ajax(
{
type: "POST",
url: "database.php", //Should probably echo true or false depending if it could do it
data : formdata,
success: function(feed) {
if (feed!="true") {
// DO STUFF
} else {
console.log(feed);
// WARNING THAT IT WASN'T DONE
}
}}}
</script>
</head>
<body>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="<?php echo $username; ?>"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 80px" name="postcode" type="text" /></td>
</tr>
<tr><td align="right">Email</td>
<td><input style="width: 80px" name="email" type="text" /></td>
</tr>
<td><button><input type="submit" value="OK" /></button></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
and called file database.php is as follows:
<?php
if ((isset($_POST['postcode'])) && (isset($_POST['email']))) {
$postcode = $_POST['postcode'];
$email = $_POST['email'];
$connect= new mysqli_connect('xx','xx','xx','xx');
if ($conn->connect_errno) {
echo "There was a problem connecting to MySQL: (" . $conn->connect_errno . ") " . $conn->connect_error;
}
if (!($sql = $conn->prepare("INSERT INTO visitors(postcode,email) VALUES(postcode,email)"))) {
echo "Prepare failed: (" . $conn->errno . ") " . $conn->error;
}
//NOTE: the "ss" part means that $postcode and $email are strings (mysql is expecting datatypes of strings). For example, if $postcode is an integer, you would do "is" instead.
if (!$sql->bind_param("ss", $postcode, $email)) {
echo "Binding parameters failed: (" . $sql->errno . ") " . $sql->error;
}
if (!$sql->execute()) {
echo "Execute failed: (" . $sql->errno . ") " . $sql->error;
}
} else {
echo 'Variables did not send through ajax.'; // any echoed values would be sent back to javascript and stored in the 'response' variable of your success or fail functions for testing.
}
?>
Please help - all assistance greatly appreciated

Execute PHP inside SCRIPT TAG

I have a listbox that displays a couple of internships under following format
id - name :
1 - Computer Science
So far, I have create the function addRow in order to update my fields from form.
If I do
alert($montext)
I can display "1 - Computer Science", but I am looking only for the value "1".
I tried :
alert(<?php substr($montext,0,2)?>);
But seems that php inside "script" isn't being executed.
Because following code changes the value in the field:
document.getElementById('ti').value=$montext;
Because I'd like also to execute php code inside the script TAG.
I'm running under Apache.
If you could help me out. Thanks
Find hereby the used code.
<html>
<head>
<script>
function addRow(title,text,description,id) {
$montext=$( "#idStage option:selected" ).text();
alert($montext);
document.getElementById('ti').value=$montext;
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
</head>
<body>
<?php
include('../admin/connect_db.php');
?>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label class="notBold">Choose the internship you want to update: </label>
<select name="idStage" id="idStage" onChange="addRow()">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
while($stmt->fetch()){
?>
<option id="nostage" value="<?php echo$id;?>" onclick="setText('<?php echo $title ?>',' <?php echo $text ?> ',' <?php echo $description ?>',' <?php echo $id?>');"><?php echo $id." - ".$title;?></option>
<?php
}
$stmt->close();
}
?>
</select>
</td>
<td width="20">
<img src="./Image/exit.png" title="Close" id="closeDelete" class="closeOpt" onclick="closeOpt()" />
</td>
</tr>
</table>
<form method="post" action="modifystage.php">
<table>
<tr>
<td>
<input type = "hidden" id ="id" name="id"/>
</td>
</tr>
<tr>
<td class="label">
<label>Title </label>
<textarea id = "ti" name="ti" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $title;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Desc</label>
<textarea id = "de" name="de" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $description;
?>
</textarea>
</td>
</tr>
<tr>
<td class="label">
<label>Text </label>
<textarea id = "te" name="te" rows = "3" cols = "75">
<?php
$stmt = $db->stmt_init();
if($stmt->prepare('SELECT id, title,text,description FROM offre ORDER by published_date ASC')) {
$stmt->bind_result($id,$title,$text,$description);
$stmt->execute();
}
echo $text;
?>
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="right"colspan="2" class="label">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>

You don't need to use PHP here. Use the javascript substring function - http://www.w3schools.com/jsref/jsref_substring.asp
For example
alert(montext.substring(0, 2));

Write your <script> on bellow your PHP and try this :
<script>
function addRow(title,text,description,id) {
var montext = $( "#idStage" ).text();
alert(montext);
document.getElementById('ti').value(montext);
/*document.getElementById('te').value=text;
document.getElementById('de').value=description;
document.getElementById('id').value=id;*/
}
function setText(title,text,description,id){
document.getElementById('title').value=title;
document.getElementById('text').value=text;
document.getElementById('description').value=description;
document.getElementById('id').value=id;
}
</script>
If you want to call variable from PHP, don't forget to use echo like this :
alert("<?php echo substr($montext,0,2); ?>");

Load php file with ajax

Im using ajax to load the testNew.php file into the Cart.html file. It loads the testNew.php file but when i click on the button add which is in the testNew.php, 0 is being entered in the database and as soon as i click on the add button the page refresh by itself. My problem is that i dont want the page to refresh and want the add button to do the same action as in the testNew.php file(which works correctly).
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#product").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "testNew.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<input type="button" id="product" name="product"value="View all products"/>
</td>
</tr>
</table>
<div id="responsecontainer"></div>
Here is the testNew.php which works correctly.
<?php
include'connect.php';
$image = isset($_REQUEST['image']) ? $_REQUEST['image'] : "";
$id = isset($_REQUEST['id']) ? $_REQUEST['id'] : "";
$name = isset($_REQUEST['name']) ? $_REQUEST['name'] : "";
$price= isset($_REQUEST['price']) ? $_REQUEST['price'] : "";
$sql="SELECT * FROM product";
$result = mysql_query($sql);
if($result>0){
?>
<table border='1'>
<tr>
<th>Id</th>
<th>Image</th>
<th>Name</th>
<th>Price MUR</th>
</tr>
<?php
while ($row = mysql_fetch_array($result)){
?>
<tr>
<td><?php echo ($row['id']); ?></td>
<td><img src=<?php echo $row['image'] ?> width='120'
height='100'/></td>
<td><?php echo htmlspecialchars($row['name']); ?></td>
<td><?php echo htmlspecialchars($row['price']); ?></td>
<td>
<form method="POST" action="" >
<input type="hidden" name="id" value="<?php echo $row['id']; ?>" />
<input type="hidden" name="name" value="<?php echo $row['name']; ?>" />
<input type="hidden" name="image" value="<?php echo $row['image']; ?>" />
<input type="hidden" name="price" value="<?php echo $row['price']; ?>" />
<input id="submit" type="submit" name="submit" value='Add to cart'
onclick="add()"/>
</form>
</td>
</tr>
<?php
}
?>
</table>
<?php
}
$insert = "INSERT INTO product_add(id, name, price) VALUES ('$id', '$name','$price')";
$insertQuery=mysql_query($insert);
?>

Your error in thought is actually that you are including a form through AJAX of which the HTML is then loaded into your page after which the action attribute on the form refers to the page itself (loading HTML into your page with AJAX does not work the same as an iframe) which does not have the relevant code to actually parse and insert the database.
You need to make a separate page that only accepts a few parameters and inserts those into the database. However, before you do that you need to read this:
I'm going to go off on the safety of your code for a tad.
$_REQUEST refers to both $_GET and $_POST, you really want only $_POST as you just want to deal with what gets submitted through a form.
You never sanitize your input, this way a person could craft an URL with say phpNew.php?id='; DROP TABLE wooptiedoo. This is a simplified example but nevertheless you should take a closer look at the mysql_real_escape_string documentation and possibly some guides on "sql injection".
After that those same variables can be used for XSS which means someone can use your page to serve random HTML to people visiting that site and trusting your domain. I suggest you look up the htmlentities function and/or read up on "cross-site scripting" attacks.
And to end it all, the mysql_* functions are deprecated and you should probably be using mysqli_* functions.

ajax request in ckeditor

<table align="left" width="100%" >
<tr>
<td>
<div class="form">
<table width="500" cellpadding="5" cellspacing="5">
<tr>
<td>
<form name="frmlist" id="frmlist" action="check.php" method="POST" enctype="multipart/form-data">
<table width="802" style="border-collapse: collapse;">
<tr>
<td width="20">1</td>
<td width="120"><span class="form_title">Brand Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span></span></td>
<td><select name="brand" id="Category_type" onchange="get_states();"><?php
if($count>0){
while($row=mysql_fetch_assoc($q)){
echo '<option value='.$row['uniq_id'].'>'.$row['brand_name'].'</option>';
}}?>
</select></td>
</tr>
<tr height="10"></tr>
<tr>
<td colspan="3" width="1000"><textarea cols="1000" id="editor1" name="editor1" rows="1000">
<div id="get_state"></div></textarea>
</td>
</tr>
<script>
var editor;
function createEditor( languageCode ) {
if ( editor )
editor.destroy();
CKEDITOR.replace( 'editor1', {
extraPlugins: 'stylesheetparser',contentsCss: 'css/main.css',stylesSet: []
});
}
// At page startup, load the default language:
createEditor( '' );
</script>
<div>
</table>
<input type="submit" name="partner_1" value="SUBMIT" class="sub" ></div>
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function get_states() { // Call to ajax function
var Category_type = $('#Category_type').val();
console.log(Category_type);
var dataString = "Category_type="+Category_type;
//console.log(Category_type);
$.ajax({
type: "POST",
url: "ajax_partner.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#get_state").html(html);
}
});
}
</script>
</body>
</html>
first there is a dropdown which brings the value from the database , When user click on any value , It send a ajax request through which I get the value and get the html from it place it between the div which has id get_state
I am using a check editor so that the user can see and edit his work
i have checked it on my console and its bringing the data so please anybody can help me