How to delete values from JSON object array in php? - javascript

I have a PHP code and JSON as shown below:
PHP Code:
<?php if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin'])) {
$output = array();
$output['en_desc']=$_POST['en_desc'];
$output['code']=$_POST['code'];
$fp = fopen('../feeds/ptp-ess_landing_scommittees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
if(file_exists('../feeds/ptp-ess_landing_scommittees.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
}
?>
<?php if($data) { ?>
<form method="post" id="myform" style="text-align:left;">
<input type="hidden" id="savechanges" name="savechanges" value="1">
<div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
<button type="submit">Save</button>
</div>
<?php foreach ($data->code as $key => $value) { ?>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
<input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
</div>
<?php } ?>
</form>
<?php } else { echo 'Cannot read JSON settings file'; }?>
JSON:
{"code":["AEFA","AGFO"], "en_desc":["Foreign Affairs and International Trade","Agriculture and Forestry"]}
The following DOM is generated through the PHP/JSON code above:
DOM (HTML):
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
<input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
<input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>
The following JS code deletes a row from the DOM on click of a delete button. On refreshing the page,
the deleted row comes back again as everything is rendered through JSON.
JS code:
<script>
function removeRow(el) {
el.parentNode.remove();
}
</script>
Problem Statement:
The above JS code is deleting the row (on click of a delete button) from the DOM but on refresing the page, everything is rendered again.
I am wondering what PHP code I need to add so that it delete the values from the JSON on saving the form when row is deleted from DOM through JS.
Step 1: User delete the row from the DOM on click of a delete button.
Step 2: On saving the form and rendering the page, that deleted row should not be present.
I know I have to use unset function in order to remove the values from the JSON but I am not sure how I can integrate it in the form.
unset($data->code);
unset($data->en_desc);

You have a typo here:
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
it should be
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
Look at the "s" :)
Edit: you also were saving the new file without actually checking if there is a post happening, here is the full code:
<?php
if (isset($_POST['submit'])) {
$output = array();
$output['en_desc'] = $_POST['en_desc'];
$output['code'] = $_POST['code'];
$fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
fwrite($fp, json_encode($output));
fclose($fp);
}
if (file_exists('../feeds/ptp-ess_landing_committees.json')) {
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}
?>
<?php if ($data) { ?>
<form method="post" id="myform" style="text-align:left;">
<div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
<button type="submit" name="submit">Save</button>
</div>
<?php foreach ($data->code as $key => $value) { ?>
<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
<button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
<input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
<input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
</div>
<?php } ?>
</form>
<?php } else {
echo 'Cannot read JSON settings file';
} ?>
<script>
function removeRow(el) {
el.parentNode.remove();
}
</script>

Related

Problem by Passing variable between PHP, JS and HTML

In my code I send $id to Java Script section and it returns the same value inside <p id="retid"></p> and I can't get the value as integer inside $text variable.
`while ($row = $result->fetch_assoc())
{
$id = $row["id"];
$regname = $row["reg-name"];
echo '<button class="btnicon btndel" type="button" name="answer" onclick="showDiv('.$id.')"><i class="fa fa-trash"></i> '.$regname.'</button>';
}
} else {
//header("Location: login.php?Msg=wrongPass"); }
}
?>
</div>
<div id="DelMessageDiv" style="display:none;" class="answer_list" >
<form action="_modify.php" method="get">
<div id="alerts">
<?php
$text = '<p id="retid"></p>';
echo $text.'-+-'.strip_tags($text,'<p>').'
Are you sure for delete?
<input name="id" type="hidden" value="'.strip_tags($text).'" />
<button class="btnicon btndel" type="submit" name="operation" value="0+regDelete">Yes Delete</button>
';
?>
</div>
</form>
</div>
</div>
<?php include '_footer.php'; ?>
<script src="js/extention/choices.js"></script>
<script>
const choices = new Choices('[data-trigger]',
{
searchEnabled: false
});
function showDiv(x) {
document.getElementById('DelMessageDiv').style.display = "block";
document.getElementById('retid').innerHTML = x;
}
</script>`
Thanks for all helps.

Trying to echo a column from a table that is displayed via for each

I am using this table and trying to echo the "branchid" in an alert
There are two tables:
orders_address.php
<?php
session_start();
require_once('orders_address.vc.php');
?>
Here is a snippet of my for each table, the 'branchid' and the assign button is only the concern here'
<td>
<a href="order_address.vc.php<?php echo '?branchid='.$rowAddress['branchid']; ?>">
<input type="submit" class="btn button-color-blue font-color-white full_width" name="assign" value="ASSIGN">
</a>
</td>
<td class="table-text-center">
<?php
echo($rowAddress['branchid']);
?>
</td>
orders_address.vc.php
Below is the code when the button is clicked
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN')
{
$branchid = $_GET ['branchid'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
Currently I am getting an undefined index and the alert box is empty. the $_GET ['branchid'] does not seem to retrieve the column I want.
Thank you for any help.
<td>
<?php
$branchid = isset($rowAddress['branchid']) ? $rowAddress['branchid'] : 0;
?>
<form method="POST" action="order_address.vc.php">
<input type="hidden" name="branchid" value="<?php echo $branchid ?>" />
<input type="hidden" name="assign" value="ASSIGN" />
<input type="submit" value="ASSIGN" class="btn button-color-blue font-color-white full_width" />
</form>
</td>
<td class="table-text-center">
<?php echo $branchid; ?>
</td>
orders_address.vc.php:
if(isset($_POST['assign']) && $_POST['assign'] === 'ASSIGN') {
echo '<script type="text/javascript">';
echo 'alert('.$_POST['branchid'].')';
echo '</script>';
}
I am not sure why you have a form submit button wrapped around an anchor tag. When the submit tag is clicked I honestly don't know which one takes precedence, the anchor tag or the form submission.
Assuming that you have the table wrapped in an HTML form and a POST request is made. I suggest adding the branchid as the value of the submit button. Ex:
<input type="submit" class="..." name="assign" value="<?=$rowAddress['branchid']?>">
In receiving end you can then get branchid from $_POST['assign']
if (! empty($_POST['assign']))
{
$branchid = $_POST['assign'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
Its because you have $_GET['branchid'] in POST handle
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN') ...
But you send it as normal GET a href link so condition with POST is never true.
if (isset($_POST['assign']) && $_POST['assign'] == 'ASSIGN'){
$branchid = $_GET ['branchid'];
echo "<script type='text/javascript'>alert('$branchid');</script>";
}
HTML should be as below:
<form action="order_address.vc.php" method="POST">
<input type="hidden" name="branchid" value="<?php echo $branchid ?>" />
<input type="submit" name="assign" value="ASSIGN" />
</form>

JavaScript show a input type file on anchor click

My code is as follows:
<div class="fifty">
<label>Credit report</label>
<input type="hidden" id="credtireport-link" name="credtireport-link" value="<?php echo $creditreport; ?>">
<input type="file" name="creditreport" id="creditreport" <?php if($creditreport!=""){?> style="display:none" <?php } ?> >
<?php if($creditreport!="") { ?>
Edit File
<?php } ?>
</div>
<div class="fifty">
<label>Employer’s ref</label>
<input type="hidden" id="employerref-link" name="employerref-link" value="<?php echo $employeer_ref_url; ?>">
<input type="file" name="employerref" id="employerref" <?php if($employeer_ref_url!=""){?> style="display:none" <?php } ?>>
<?php if($employeer_ref_url=="") { ?>
Edit File
<?php } ?>
</div>
I want to write a function in JavaScript which is called on edit file anchor click and will show the respective input type file.
Explanation: if some one clicked on anchor of credit report then it should show only <input type="file" name="creditreport" id="creditreport">.
My JavaScript code:
function showfile()
{
var id=$(this).parent().find('input[type="file"]').toggle();
return false;
}
html
Edit File
javascript
function showfile(el) {
var id = $(el).prev(":file").toggle();
return false;
}
plnkr http://plnkr.co/edit/MjZkZvFjlqj4a8HffYaF?p=preview

Can only post first result of while loop

I am using a while loop to display results from a query. The while loop is working fine. In hidden fields I would like to post the values of userID and accessID to the user details page. I am submitting the form using javascript to submit from a link. My problem is that regardless of the username I click I can only post the values for the first displayed record. What am I doing wrong?
The code:
<?php
while($row = $result->fetch_array()) { ?>
<form method="post" action="edit_user.php" id="userForm">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
The javascript used for submitting the form:
function submitForm() {
var form = document.getElementById("userForm");
form.submit();
}
Thank you.
EDIT - I don't want to pass the values in the url.
you are generating multiple <form>s inside loop, move your <form> outside while loop, like:
<form method="post" action="edit_user.php" id="userForm">
<?php
while($row = $result->fetch_array()) { ?>
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID[]" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID[]" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
<?php } ?>
Submit
</form>
You're running into trouble because of this line
var form = document.getElementById("userForm");
In Javascript and HTML, an ID is supposed to be unique to a certain DOM element. In this case, you've got a whole load of form tags that have the same ID. You need to give each form a different ID, and then pass that ID to the submitForm function.
For example:
<?php
$id = 0;
while($row = $result->fetch_array()) { ?>
$id++;
<form method="post" action="edit_user.php" id="<?php echo "userForm".$id ?>">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
and then
function submitForm(id) {
var form = document.getElementById(id);
form.submit();
}
edit: how do I php? :D

Pass form variables to php. Prevent page refresh

I am working on a web site which displays some data that is retrieved from a database using php. Now, there are also other chekcboxes, which are included in a form. Based on the user input on these checkboxes, i wanted the div displaying the data to reload. For example, after a user checks one of the boxes and clicks apply, the div displaying should recompute the results. I realise that the form data must be passed onto an ajax function. Which would convert this form data into a json object and send it across to a php file. The php file can then access the form variables using $_POST['var']. I hope i have got the theory correct. Nevertheless, i have a number of problems during execution.
Firstly, the php code that deals with the form variables in on the same page as the form. I want to know how to direct the form data from the ajax function to this code.
Secondly, the ajax function is getting executed alright, the form is getting submitted, the page isn't reloading (as desired) but however, I am not able to access the submitted variables in the php code.
Here is my code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#filter_form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'index.php',
data: $('#filter_form').serialize(),
success: function () {
alert('form was submitted');
}
});
e.preventDefault();
});
});
</script>
<div style="float: left;margin-left: -175px;" class="box2">
<h2>Filter by :</h2>
<form id="filter_form" name="filter_form" href="#">
<!--<form id="filter_form" name="filter_form" action="<?php echo $_SERVER['PHP_SELF'];?>" method ="post" href="#">-->
<h3>Location</h3>
<?php
//Get all the distinct values for filter. For example, Get all the locations available, display them in a container. Similarly for the party type as well. Connect to to the database once, get all these values,
//store them in arrays and use the arrays to display on screen.
$query = "Select LOCATION, PARTY_TYPE, GENRE, HAPPY_HOURS, OUTDOOR_ROOFTOP from venue_list order by HAPPY_HOURS";
$result = mysqli_query($con,$query);
$filter_array = array(5);
for($i=0; $i<5; $i++){
$filter_array[$i] = array();
}
while($row = mysqli_fetch_array($result)){
array_push($filter_array[0],$row['LOCATION']);
array_push($filter_array[1],$row['PARTY_TYPE']);
array_push($filter_array[2],$row['GENRE']);
array_push($filter_array[3],$row['HAPPY_HOURS']);
array_push($filter_array[4],$row['OUTDOOR_ROOFTOP']);
}
for($i=0; $i<5; $i++){
$filter_array[$i] = array_unique($filter_array[$i]);
}
?>
<ul>
<?php
foreach($filter_array[0] as $location){
?>
<li>
<input type="checkbox" id="f1" name="location[]" value="<?php echo $location?>" <?php if (isset($_POST['location'])){echo (in_array($location,$_POST['location']) ? 'checked' : '');}?>/>
<label for="f1"><?php echo $location?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Party Type</h3>
<ul>
<?php
foreach($filter_array[1] as $party_type){
?>
<li>
<input type="checkbox" id="f2" name="party_type[]" value="<?php echo $party_type?>" <?php if (isset($_POST['party_type'])){echo (in_array($party_type,$_POST['party_type']) ? 'checked' : '');}?>/>
<label for="f2"><?php echo $party_type?></label>
</li>
<?php
}
?>
</ul>
<br><h3>Genre</h3>
<ul>
<?php
foreach($filter_array[2] as $genre){
?>
<li>
<input type="checkbox" id="f3" name="genre[]" value="<?php echo $genre?>" <?php if (isset($_POST['genre'])){echo (in_array($genre,$_POST['genre']) ? 'checked' : '');}?>/>
<label for="f3"><?php echo $genre?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Happy Hours</h3>
<ul>
<?php
foreach($filter_array[3] as $happy_hours){
?>
<li>
<input type="checkbox" id="f4" name="happy_hours[]" value="<?php if($happy_hours){ echo $happy_hours;} else {echo "Dont Bother";} ?>" <?php if (isset($_POST['happy_hours'])){echo (in_array($happy_hours,$_POST['happy_hours']) ? 'checked' : '');}?>/>
<label for="f4"><?php echo $happy_hours?></label>
</li>
<?php
}
?>
</ul>
<br>
<h3>Outdoor/Rooftop</h3>
<ul>
<?php
foreach($filter_array[4] as $outdoor_rooftop){
?>
<li>
<input type="checkbox" id="f5" name="outdoor_rooftop[]" value="<?php echo $outdoor_rooftop?>" <?php if (isset($_POST['outdoor_rooftop'])){echo (in_array($location,$_POST['outdoor_rooftop']) ? 'checked' : '');}?>/>
<label for="f5"><?php echo $outdoor_rooftop?></label>
</li>
<?php
$i=$i+1;
}
?>
</ul>
<br><br><br>
<div id="ContactForm" action="#">
<input name="filter_button" type="submit" value="Apply" id="filter_button" class="button"/>
</div>
<!--
<h2>Sort by :</h2>
<input type="radio" id="s1" name="sort" value="Name" <?php if (isset($_POST['sort'])){echo ($_POST['sort'] == 'Name')?'checked':'';}?>/>
<label for="f1"><?php echo 'Name'?></label>
<input type="radio" id="s1" name="sort" value="Location" <?php if (isset($_POST['sort'])){echo ($_POST['sort'] == 'Location')?'checked':'';}?>/>
<label for="f1"><?php echo 'Location'?></label>
<br><br><br>
<input name="filter_button" type="submit" value="Apply" id="filter_button" class="button"/>
-->
</form>
</div>
<div class="wrapper">
<h2>Venues</h2>
<br>
<div class="clist" id="clublist" href="#">
<?php
?>
<table id = "venue_list">
<tbody>
<?php
//Functions
//This function builds the query as every filter attribute is passed onto it.
function query_builder($var_name){
$append = strtoupper($var_name)." in (";
$i=0;
foreach($_POST[$var_name] as $array){
$append = $append."'{$array}'";
$i=$i+1;
if($i < count($_POST[$var_name])){
$append = $append.",";
}
else{
$append=$append.")";
}
}
return $append;
}
//We first need to check if the filter was set in the previous page. If yes, then the query needs to be built with a 'where'. If not the query will just display all values.
//We also need to check if order by is required. If yes, we will apply the corresponding sort, else we will just sort on the basis of location.
//The below 2 variables do the same.
$filter_set = 0;
$filter_variables = array('location','party_type','genre','happy_hours','outdoor_rooftop');
$map_array = array();
if(isset($_POST['location'])){
$filter_set = 1;
}
if(isset($_POST['party_type'])){
$filter_set = 1;
}
if(isset($_POST['genre'])){
$filter_set = 1;
}
if(isset($_POST['happy_hours'])){
$filter_set = 1;
}
if(isset($_POST['outdoor_rooftop'])){
$filter_set = 1;
}
if($filter_set == 1){
$query = "Select * from venue_list where ";
$append_query=array(5);
$j=0;
foreach($filter_variables as $var){
if(isset($_POST[$var])){
$append_query[$j] = query_builder($var);
$j=$j+1;
}
}
$h=0;
//Once all the individual where clauses are built, they are appended to the main query. Until then, they are stored in an array from which they are
//sequentially accessed.
foreach($append_query as $append){
$query=$query.$append;
$h=$h+1;
if($h < $j){
$query=$query." AND ";
}
}
}
else{
$query = "Select * from venue_list";
}
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
$name = $row['NAME'];
$img = $row['IMAGE_SRC'];
$addr = $row['ADDRESS'];
$location = $row['LOCATION'];
echo "<script type='text/javascript'>map_function('{$addr}','{$name}','{$img}');</script>";
?>
<tr>
<td>
<img src="<?php echo $img.".jpg"?>" height="100" width="100">
</td>
<td>
<?php echo $name?>
</td>
<td style="display:none;">
<?php echo $location?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<br>
</div>
All the 3 components are part of index.php. Kindly notify me if the code is unreadable or inconvenient I will edit it. Awaiting a solution. Thank you.
in this case change your javascript code to
var submiting = false;
function submitmyforum()
{
if ( submiting == false )
{
submiting = true;
$.ajax({
type: 'post',
url: 'index.php',
data: $('#filter_form').serialize(),
success: function () {
alert('form was submitted');
submiting = false;
}
});
}else
{
alert("Still working ..");
}
}
and change the form submit button to
<input name="filter_button" type="button" onclick="submitmyforum();" value="Apply" id="filter_button" class="button"/>
don't forget to change submit button type="submit" to type="button"

Categories