Develop Reference

Subscription system not working after clicking button

I have the following code:
Button:
<br>
<p>Programma's waarop u kunt abonneren:</p>
<form action="#" enctype="multipart/form-data" method="post" onSubmit="return processForm();">
<?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
<table>
<?php foreach ( $retrieve_data as $retrieved_data ) { ?>
<tr>
<th>Programma:</th>
<td id="hideit" style="vertical-align: middle;">
<?php
echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
?>
</td>
<th>
<div><button id="some_id" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>
</th>
</tr>
<?php } ?>
</table>
</form>
Javascript:
<script>
var divelement = document.getElementById("some_id");
window.addEventListener('DOMContentLoaded', function(){
if(localStorage.getItem("form_submitted")){
divelement.style.display = 'none';
}else{
//Local Storage Not Set
}
});
function processForm(){
//Send Ajax to submit data and after its response set the local Storage
divelement.style.display = 'none';
//Set
localStorage.setItem("form_submitted", 1);
return false; //this will prevent form from submitting and refreshing the page.
}
Once the user clicks a button, he/she is subscribing to a program. To allow the user to subscribe to a program, I created the following code:
if (isset( $_POST['programma'] ) && isset( $_POST['set_programma'] ) && wp_verify_nonce( $_POST['set_programma'], 'set_programma_action' )) {
$data = filter_input( INPUT_POST, 'programma', FILTER_SANITIZE_STRING );
$current_user_id = get_current_user_id();
if ( $current_user_id && ! empty( $data ) ) {
//voeg de huidige user_id en data toe in de rij met meta_key programma
$addprog = add_user_meta( $current_user_id, 'programma', $data );
echo "U bent geabonneerd op". ' ' . $data;
}
}
?>
I created the Javascript code to make sure that once the user is subscribed to a program, the button he clicked on along with the program dissapear. The only problem I have is that the user is not able to subscribe to a program anymore. The program is also not saved in the database. I have searched for several youtube videos on the issue but I cannot find a solution.
Also, for some reason, only the top button dissapears when clicked on. Not the buttom.
I am trying to put the button and the element inside of it in none display as soon as it is pressed. See image down here for the 2 buttons.

Here is the solution if you want all the button to hide when form is submitted.For this you have to use class instead of id.
var divelement = document.getElementsByClassName("some_class");
function hideByClass(){
for(var i = 0; i < divelement.length; i++){
divelement[i].style.display = "none";
}
}
window.addEventListener('DOMContentLoaded', function(){
if(localStorage.getItem("form_submitted")){
hideByClass();
}else{
//Local Storage Not Set
}
});
function processForm(){
//Send Ajax to submit data and after its response set the local Storage
hideByClass();
//Set
localStorage.setItem("form_submitted", 1);
return true;
}
And use class instead of id.You also have to use class on td as it is also in loop so id should not repeat.
<div><button class="some_class" style="display:block" onclick="hidenow('hideit')" name="programma" type="submit" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>">Abonneer</button></div>

Solution 2
If you want only clicked one to be hidden.For this you need to do modifications.Here are the modifications.
Remove onSubmit from form.
Add Id to form.
Add a counter variable before starting loop also increment its value inside loop body. This is for making unique ids.
Concatenate this counter variable in id for td and button.
Change button type from submit to button.
Call processForm function on button click with passed value of counter to identify which button is clicked.
HTML / PHP
<form action="#" enctype="multipart/form-data" method="post" id="myForm">
<?php wp_nonce_field( 'set_programma_action', 'set_programma' ); ?>
<table>
<?php
$counter=0;
foreach ( $retrieve_data as $retrieved_data ) { ?>
<tr>
<th>Programma:</th>
<td id="hideit<?php echo $counter;?>" style="vertical-align: middle;">
<?php
echo $alreadysub; echo esc_html( $retrieved_data->Anaam );
?>
</td>
<th>
<div><button id="some_id<?php echo $counter;?>" style="display:block" name="programma" type="button" value="<?php echo esc_attr( $retrieved_data->Anaam ); ?>" onClick="processForm(<?php echo $counter;?>);">Abonneer</button></div>
</th>
</tr>
<?php
$counter++;
} ?>
</table>
</form>
JS
function processForm(counter){
//Send Ajax to submit data and after its response set the local Storage
document.getElementById("hideit"+counter).style.display = 'none';
document.getElementById("some_id"+counter).style.display = 'none';
//Set
localStorage.setItem("form_submitted", 1);
document.getElementById("myForm").submit();
}

Show previews of several images on one page with PHP and Jquery of javascript

I have a html-page where the user should upload several pictures for different screen resolutions. I need a separate file selection and preview for each picture, so I can store the pictures in the right places on upload. With one multiselect it is nearly imposible to figure out which picture belongs to which type.
Fileselections are no problem, but as I am not a JavaScript of Jquery programmer, getting a preview is no problem, but all preview images appear in the first picture.
This code will display a page with placeholders and file-selections:
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Upload Image using form</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="imageupload.js"></script>
</head>
<body>
<div id="mainform">
<h2>Upload multiple images using forms</h2>
<table>
<?php
echo '<tr><td><h3>Picture</h3></td></tr>';
echo '<tr><td>LowRes</td><td>';
loadPreview("div_PreviewPicLowRes",107, 71);
echo '</td></tr><tr><td>Medium</td><td>';
loadPreview("div_previewPicMedium",236, 157);
echo '</td></tr><tr><td>HD</td><td>';
loadPreview("div_previewPichd",320, 213);
echo '</td></tr><tr><td>UltraHD</td><td>';
loadPreview("div_previewPic4k",426, 284);
echo '</td></tr>';
?>
</table>
</div>
</body>
</html>
<?php
function loadPreview($id = 'div', $x=420, $y=300 ) {
echo '
<div id="div'.$id.'">
<div id="preview'.$id.'">
<img id="previewimg" src="" width="'.$x.'px" height="'.$y.'px">
</div>
<div id="formdiv'.$id.'">
<form action="" enctype="multipart/form-data" id="form'.$id.'" method="post" name="form'.$id.'">
<div id="upload'.$id.'">
<input type="file" name="file'.$id.'" accept="image/*">
</div>
</form>
</div>
</div>';
}
?>
This javascript will display a preview:
$(document).ready(function() {
// Function for Preview Image.
$(function() {
$(":file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#message').css("display", "none");
$('#preview').css("display", "block");
$('#previewimg').attr('src', e.target.result);
};
});
Now All images appear in the first placeholder, but I need show them in the same line as the file-selector. I know the Jquery part is responsible for displaying the image and it is coded to show the image in previewimg, but I can't figure out to use other div-id's.
Can somebody please help me out?

The way you are set up at the moment, you can add one file and the form submits this is then added to the dom via JS.
However since the form submits and refreshes the page each time you will only ever have $_FILES info in PHP to save to the DB for the last image submitted.
The way I'd do this is like so:
<?php
session_start();
if(isset($_FILES['lowres']) && !empty($_FILES['lowres'])){
$lowres_filename = $_FILES['lowres']['name'];
move_uploaded_file( $_FILES['lowres']['tmp_name'], "images/$lowres_filename");
$_SESSION['lowres'] = $lowres_filename;
}
if(isset($_FILES['medium']) && !empty($_FILES['medium'])){
$medium_filename = $_FILES['medium']['name'];
move_uploaded_file( $_FILES['medium']['tmp_name'], "images/$medium_filename");
$_SESSION['medium'] = $medium_filename;
}
if(isset($_FILES['hd']) && !empty($_FILES['hd'])){
$hd_filename = $_FILES['hd']['name'];
move_uploaded_file( $_FILES['hd']['tmp_name'], "images/$hd_filename");
$_SESSION['hd'] = $hd_filename;
}
if(isset($_FILES['uhd']) && !empty($_FILES['uhd'])){
$uhd_filename = $_FILES['uhd']['name'];
move_uploaded_file( $_FILES['uhd']['tmp_name'], "images/$uhd_filename");
$_SESSION['uhd'] = $uhd_filename;
}
?>
<table>
<tr>
<td>LowRes</td>
<td><?php
if(isset($_SESSION['lowres']) && !empty($_SESSION['lowres'])){
echo '<img id="lowres" src="images/'.$_SESSION['lowres'].'">';
}else{
echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="lowres" onchange="this.form.submit();"></form>';
}
?></td>
</tr>
<tr>
<td>Medium</td>
<td><?php
if(isset($_SESSION['medium']) && !empty($_SESSION['medium'])){
echo '<img id="medium" src="images/'.$_SESSION['medium'].'">';
}else{
echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="medium" onchange="this.form.submit();"></form>';
}
?></td>
</tr>
<tr>
<td>HD</td>
<td><?php
if(isset($_SESSION['hd']) && !empty($_SESSION['hd'])){
echo '<img id="hd" src="images/'.$_SESSION['hd'].'">';
}else{
echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="hd" onchange="this.form.submit();"></form>';
}
?></td>
</tr>
<tr>
<td>UltraHD</td>
<td><?php
if(isset($_SESSION['uhd']) && !empty($_SESSION['uhd'])){
echo '<img id="uhd" src="images/'.$_SESSION['uhd'].'">';
}else{
echo '<form enctype="multipart/form-data" method="POST"><input type="file" name="uhd" onchange="this.form.submit();"></form>';
}
?></td>
</tr>
</table>

The problem that I see with your example would be submitting 4 forms and only being able to process one image at a time unless you have some way of handling all of the forms submitting together.
You can try it this way instead:
Test1.php:
<table>
<tr>
<td>LowRes</td>
<td id="low_cell"><input type="file" name="low" id="low" onchange="get_images('low');"></td>
</tr>
<tr>
<td>Medium</td>
<td id="med_cell"><input type="file" name="med" id="med" onchange="get_images('med');"></td>
</tr>
<tr>
<td>HD</td>
<td id="hd_cell"><input type="file" name="hd" id="hd" onchange="get_images('hd');"></td>
</tr>
<tr>
<td>UltraHD</td>
<td id="uhd_cell"><input type="file" name="uhd" id="uhd" onchange="get_images('uhd');"></td>
</tr>
</table>
<script>
function get_images(res){
var form_data = new FormData();
var file = document.getElementById(res).files[0];
form_data.append("file", file);
form_data.append("res", res);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var image = document.createElement("img");
image.setAttribute("src", "images/"+this.responseText);
document.getElementById(res+'_cell').prepend(image);
}
};
xmlhttp.open("POST", "test2.php", true);
xmlhttp.send(form_data);
}
</script>
test2.php:
<?php
session_start();
if(isset($_POST['res'])){
$res = $_POST['res'];
}
if(isset($_FILES['file']) && !empty($_FILES['file'])){
$file = $_FILES['file']['name'];
move_uploaded_file($_FILES['file']['tmp_name'], "images/".$file);
$_SESSION[$res] = $file;
echo $file;
}
?>

refreshing the elements of html with javascript requesting data from php

I have a problem. I checked tons of good answers and tried them. Some helped me a lot but I still can't solve my problem completely. Can someone please help me?
I have one text file with following lines:
123456789, c
123456790, c
123456791, c
123456792, d
I read and parse this text file using a PHP script:
$myusers = array();
$my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
$rows = explode("\n",$my_txt);
foreach($rows as $row => $data){
$row_data = explode(',',$data);
array_push($myusers,$row_data);
}
I can reach to the result of this php script with JS code below:
var userConStats = <?php echo json_encode( $myusers ) ?>;
for ( i = 0; i < userConStats.length-1; i++){
document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];
}
with this; I filled the necessary html table for the first time. Everything is perfect.
The problem starts when I want this PHP to read text file every second and refresh the table elements according to the changes in the text file. PHP parse the text file only once and the changes in the text file won't change anything on the browser.
Maybe my approach to the problem was wrong I am not sure.
Any help will be appreciated. Thank you!
Complete code can be found below:
<?php
require 'connectionNetIndex2.php';
include 'txtPHP.php';
include 'userConStatUpdater.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2-NetIndex</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>MY_TEST</h1>
<select name="OperationalMode">
<option value="">Normal</option>
<?php while($opMode = mysqli_fetch_assoc($opModes)) { ?>
<option value="<?php echo $opMode["operational_mode"]; ?>"><?php echo $opMode["operational_mode"]; ?></option>
<?php } ?>
</select>
<?php if(isset($Users)): ?>
<table>
<tr>
<td>IMSI</td>
<td>Connection Status</td>
<td>Profile</td>
</tr>
<?php foreach($Users as $user): ?>
<tr>
<td value="<?php echo $user["u_id"]; ?>"><?php echo $user["imsi"]; ?></td>
<td id="<?php echo $user['imsi'];?>" class="conStats"></td>
<td><form action="" method="POST">
<select id="profiles" name="Profiles" onchange="valueChanged()">
<option value="<?php echo $user["p_id"]; ?>"><?php echo $user["profile_name"]; ?></option>
<?php foreach($profiles as $PR): ?>
<option name="" value="<?php echo $PR["p_id"]; ?>"><?php echo $PR["profile_name"]; ?></option>
<?php endforeach; ?>
</select>
<input name="uid" type="hidden" value="<?php echo $user["u_id"]; ?>">
<!--<input type="submit" value="save">-->
</form>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php endif; ?>
<script type="text/javascript">
function conStatUpdater(){
<?php
$myusers = array();
$my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
$rows = explode("\n",$my_txt);
foreach($rows as $row => $data){
$row_data = explode(',',$data);
array_push($myusers,$row_data);
json_encode( $myusers ) ;
}
?>
// pass PHP array to JavaScript array
//Dont refresh the elements.
var userConStats = <?php echo json_encode( $myusers ) ?>;
//test is function working every second?
//test result : YES
console.log(userConStats[0][1]);
for ( i = 0; i < userConStats.length-1; i++){
document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];
}
}
setInterval(conStatUpdater, 1000);
</script>
</body>
</html>

Like you've realized, PHP can't update an HTML page after it's been generated (unless you reload the page). You can only do that with JavaScript. In order to get the data every second, you'd need to use ajax (https://www.w3schools.com/xml/ajax_intro.asp) to make asynchronous calls every second to your PHP page to get the data. So you'd need something like this:
PHP:
$myusers = array();
$my_txt = file_get_contents('C:\xampp\htdocs\net\net1\conStats.txt');
$rows = explode("\n",$my_txt);
foreach($rows as $row => $data){
$row_data = explode(',',$data);
array_push($myusers,$row_data);
}
print json_encode($myusers);
Your JavaScript code:
function updatePage(userConStats) {
for ( i = 0; i < userConStats.length-1; i++){
document.getElementById(userConStats[i][0]).innerHTML = userConStats[i][1];
}
}
var secondPerRequest = 1;
setInterval(function() {
$.ajax({
url: "<your php page>",
success: function(result) {
var resultAsObject = JSON.parse(result);
updatePage(resultAsObject);
}
});
}, secondsPerRequest * 1000);
Note that I used jQuery to do the ajax call because it's simpler that way. If you don't want to use jQuery, you can find info on how to do ajax in vanilla JS here: How to make an AJAX call without jQuery?

the <?php ... ?> block script inside your conStatUpdater() javascript function will not re-executed on the server-side because it is already parsed and will only yield the same result.
what you need is an AJAX function that will call your php script, in which that php script will re-executed on server-side and respond you with an updated values on your text files.

How do I use Javascript in PHP?

I have got PHP code to show a JavaScript button to the logged in users and it wont display anything if they are not logged in. But it only gives me a white page? The code itself is working because I've used it before but not with javascript.
<div align="center">
<?php
session_start();
if (!isset($_SESSION['user']))
{
echo "";
}else{
echo"<div align="right">
<input type="button" onclick="document.title = 'Google';" value="Change Title to Google">";
}
?>

YOUR CODE HAving ERROS with quotes, added \,
<?php
session_start();
if (!isset($_SESSION['user']))
{
echo "";
}else{
echo "<div align=\"right\">
<input type=\"button\" onclick=\"document.title = 'Google';\" value=\"Change Title to Google\">";
}
?>

Another solution would be to close your php when you don't need it :
<?php
session_start();
if (!isset($_SESSION['user']))
{
?>
<?php
}else{
?>
<div align="right"> ....
<?php
}
?>

Updating input form after updating a table using jquery or ajax

I have this table i've built with jquery and ajax (watching some tutorials, so i'm not an advanced programmer). Well, what i do is i insert some values in a table and i need to get all the sum of this values in an input form.
I can do that, but what i need is to get the sum without refreshing the page, so anytime i enter:
200 in the Value column, the Sum should become :
Sum + 200
Please i need some help with what to do, i've searched for datagrid, but sincerely i don't know how can i do it.
Thanks
Php code of the input :
<table class="vlera">
<tr id="<?php echo $id; ?>" class="edit_tr">
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $kodi; ?></span>
<input type="text" value="<?php echo $kodi; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last1_<?php echo $id; ?>" class="text"><?php echo $pershkrimi_pjeses; ?></span>
<input type="text" value="<?php echo $pershkrimi_pjeses; ?>" class="editbox" id="last_input1_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $vlera; ?></span>
<input type="text" value="<?php echo $vlera; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td class="edit_td">
<span id="last2_<?php echo $id; ?>" class="text"><?php echo $kosto; ?></span>
<input type="text" value="<?php echo $kosto; ?>" class="editbox" id="last_input2_<?php echo $id; ?>"/>
</td>
</tr>
<?php
}
?>
</table>
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
?>
<label for='shuma'>Shuma:</label>
<input id="shuma" name="shuma" type="text" value=" <?php echo $total1;?>" size="20" />

the code you posted doesn't really show the full format (what the inputs look like)... but if you do something like:
$(".values").keyup(function() {
var sum = 0;
$(".values").each(function(){
sum += Number($(this).val());
});
$("#shuma").val(sum)
});
and each of your text inputs you want to go towards the total sum has a class of "values" on it, it should work. http://jsfiddle.net/NNbtk/

try this code... This code get the value of the text box when value enter and add it to the sum.
$(document).ready(function(){
$('#shuma').keyup(function(){
var val=$('#shuma').val();
sum=sum+val;
});
});

just put this code inside another php file...say abc.php
<?php
$sql_shuma="SELECT SUM(vlera) AS shuma FROM servis_pjeset_perdorura WHERE random=$random";
$resultshuma = odbc_exec($connection, $sql_shuma) or die(odbc_error());
while( $rowshuma = odbc_fetch_array($resultshuma ) ) {
$total1 = $rowshuma['shuma'];
}
echo $total1;
?>
Then from the main page do the following call on a button lets say button1
$(document).ready({
setInterval(function(){
$.ajax({
url: 'abc.php',
type: "POST",
success: function(contents){
$('#shuma').val(contents);
}
});
}, 1000);
});
Now the explanation:
In the main page when document gets ready, setInterval method of javascript will be called which takes 2 parameters, code and delay time in ms. this code will call the abc.php after every 1 sec and check the db for the new value and return it and put it in the field.
Hope that was what you were looking for.