We Keep Coding

Get and submit multiple selection buttons values range

I'm trying to submit multiple buttons and use them as range selectors.
In page1.php I have $array of years 1980, 1990, 2000, 2010, ... which range is updated by database content:
<form method="post" action="page2.php">
<?php
foreach ($array as $item) {
?>
<input type="submit" name="<?= $item ?> " class="button" value="<?= $item ?> " />
<?php
}
?>
</form>
this way I can't click two buttons one after another to set the range, for example from 2000 to 2010, and submit only after this action.
I've tried JavaScript function with onclick without the post method, which counts clicks and pushes two (first and second) clicks values as range to the resettable $rangeval array before if (count == 2) condition comes true, passing values to second JavaScript function request(input) from page1.php using ajax, requesting page2.php with if (isset($_POST['val1']) && isset($_POST['val2'])) and echo json_encode($array);, which returns an array as the result variable with JSON.parse(res) back to page1.php.
As PHP runs on the server, I can't process the JavaScript Ajax response array as PHP array in page1.php.
So, I'm trying to find some correct method to archive this result.
Any advice, guide, or example would be useful.

Buttons in a form and with type="submit" will immediately submit the form. So buttons are not the correct candidate here.
I would recommend using two <select> elements where in you loop over the $array to create the options.
<form method="post" action="page2.php">
<select name="range_start">
<?php foreach ($array as $item) : ?>
<option value="<?= $item ?>"><?= $item ?></option>
<?php endforeach; ?>
</select>
<select name="range_end">
<?php foreach ($array as $item) : ?>
<option value="<?= $item ?>"><?= $item ?></option>
<?php endforeach; ?>
</select>
<input type="submit" class="button" value="Submit values" />
</form>
When submitting read out the name attributes that the <select> elements have in the $_POST array.
<?php
if (isset($_POST['range_start']) && isset($_POST['range_end'])) {
$range_start = $_POST['range_start'];
$range_end = $_POST['range_end'];
}

Variable assigned to HTML input's value through PHP is not understood by JS script

I'm working on a project of a website which shows a chart. User should be able to change a displayed chart (without changing the website) by clicking one of 'Available sensors' from dropdown options. Dropdown connects to MySQL database with used sensors. The sensor's id is assigned to HTML-input ID and its name is assigned to input value.
My intension is to use sensor ID in another data.php file which is responsible for connecting to tables (MySQL) with data collected by sensors. This ID would tell to which of the tables this programm should connect.
At the moment JS script's task is to alert an ID of the chosen sensor when it's clicked on the dropdown menu. Instead of a number I get a message saying 'undefined'. Eventually it would transfer the stored id to the mentioned data.php file.
Could you please tell me whether it's necessary to use AJAX in this case or what's a possible reason of this error in my code?
I also tried to use button insted of input. When clicking on sensors names on dropdown I've received only messages with '1'. However assigning sensorName worked out in both cases. Sensors ID is stored as INT, name as VARCHAR in MySQL table.
Thank you in advance for your help :)
<div id="header_btn" class="dropdown">
<input type="submit" id="btn" value="Available sensors" class="btn btn-success" />
<div class="dropdown-content">
<?php
include("config.php");
$sql = "SELECT * FROM sensors";
$result = $db->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$sensorID = $row["id"];
$sensorName = $row["WebName"];
?>
<input onclick="changeSensorID(this.value)" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>" value="<?php echo $sensorName ?>" /></a>
<?php
}
}
?>
</div>
<script>
function changeSensorID() {
var sensorID = document.getElementsByClassName("btn_drop").id;
alert(sensorID);
};
</script>
</div>

please check this code, working fine
<input type="submit" id="btn" value="Available sensors" class="btn btn-success" />
<div class="dropdown-content">
<?php
include("config.php");
$sql = "SELECT * FROM sensors";
$result = $db->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$sensorID = $row["id"];
$sensorName = $row["WebName"];
?><input onclick="changeSensorID(event)" onmouseover="this.style.textDecoration='underline'"
onmouseout="this.style.textDecoration='none'" class="btn_drop" id="<?php echo $sensorID ?>"
value="<?php echo $sensorName ?>" /></a>
<?php
}
}
?>
</div>
<script >
function changeSensorID(event){
var sensorID = event.target.id;
alert(sensorID);
}
</script>
</div>

getElementsByClassName returns array of at least one item if found any. You have to provide index of element that you want to use.
Example
var sensorID = document.getElementsByClassName("btn_drop")[0].id;

Create form inside for loop

I'm using codeignitor and am very new to it so sorry in advance if the question is senseless,but i'm stuck with certain requirement while coding.I have a for loop as below:
<?php foreach($messages as $req):?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction1()" value="Submit"/>
<?php endforeach; ?>
//Below is javascript code for from submit.
<script>
function myFunction1() {
document.getElementById("myform").submit();
}
the problem is i want the id name for form to be unique since each time a button is clicked same form is being submitted.I don't want to use the submit button inside the form.Please someone help me

use this code
<?php foreach($messages as $req):?>
<?php $count = 1; ?>
//This loop will execute depending on number of rows and is working fine.
<?php echo form_open('message/addFrom_masterlist','id="myform$count"'); ?>
//form is having input fields.
<?php echo form_close();?>
\\this acts as a submit button to my form which submits the form using javascript.
<input type="button" name="button" id="b1" class="btn btn-primary" onclick="myFunction<?php echo $count; ?>()" value="Submit"/>
<?php $count++; ?>
<?php endforeach; ?>
//Below is javascript code for from submit.
<?php
$arrayCount = count($messages);
if(!empty($arrayCount)){
for($i=1; $i<= $arrayCount; $i++){
?>
<script>
function myFunction<?php echo $arrayCount; ?>() {
document.getElementById("myform<?php echo $arrayCount; ?>").submit();
}
</script>
<?php
}
}
?>
Hope this will help you!!
Note: But the your concept like this is not good.

PDO fetch then targeted object?

I currently have a page where I'm connecting to db via PDO, db, prepare.
Selecting SQL_CALC_FOUND_ROWS in order to have pagination with the results.
All of that is good. However, each return is to have a text popup when clicked. Thats where I want to target a particular field of defined row.
Code I have is as follows :
$db = new PDO('mysql:dbname=###;host=###','###','###');
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = isset($_GET['per-page']) && $_GET['per-page'] <= 50 ?(int)$_GET['per-page'] : 8;
//Positioning
$start = ($page > 1) ? ($page * $perPage) - $perPage : 0;
//Query
$articles = $db->prepare("
SELECT SQL_CALC_FOUND_ROWS id, comment_caption, comment_sub_caption,comment_title, comment_main, comment_name,
comment_date, comment_url
FROM TABLE_NAME
LIMIT {$start}, {$perPage}
");
$articles->execute();
$articles = $articles->fetchAll(PDO::FETCH_ASSOC);
// Pages
$total = $db->query("SELECT FOUND_ROWS() as total")->fetch()['total'];
$pages = ceil($total / $perPage);
//Pagination div
<div class="pagination">
<?php for($x = 1; $x <= $pages; $x++): ?>
<a href="?page=<?php echo $x; ?>&per-page=<?php echo $perPage; ?> "<?php if($page === $x){ echo 'class="selected"'; }?>><?php echo $x ?></a>
<?php endfor; ?>
</div>
// Here is the container for the foreach
<div id="container">
<?php
foreach($articles as $article): ?>
<div class="item small">
<div class="module">
<div class="article">
<div class="item-inner">
<a href="<?php echo $article['comment_url']; ?>">
<div class="project-title">
<div class="mid">
<h2><?php echo $article['comment_caption']; ?></h2>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
// This is the popup that I want to associate with each return
<div id="test-popup" class="white-popup mfp-hide">
<blockquote><?php echo $article['comment_main'];
?></blockquote>
<p><i><?php echo $article['comment_name']; ?> - <?php echo $article['comment_date']; ?></i></p>
</div>
In the popup, I want to echo the 'comments_main, comments_name & comments_date' field of the particular instance that is clicked. Here currently, it just echos the first row.
I'm not sure what the best way to go about it is... ?
Any help would be greatly appreciated.

This is not really a php-mysql related question, but rather a javascript-html-css related one.
You have 2 options:
You output the comments_main, comments_name & comments_date fields to all listed items in a way they are not visible to the users first in the browser. Typically, you could use the anchor element's title property, or html5's data- properties, or even a list of invisible divs. Whenever the user clicks a link, you use javascript to fetch these data for the given comment from your list on the client side (if they are not stored in a list of divs already) and make it appear.
You do not output these data to the client, but upon clicking you use an ajax call to retrieve these data from the server via another php page.
For both approach there are lots of tutorials out there with designed boxes (tooltips) and copy-paste javascript, html, and css code.

Passing url parameters in form action attribute

<?php for($i = 0; $i < $pin_num_rows; $i++){ ?>
<form action="/group/<?php echo $group_id ?>?Comment=<?php echo $pin_id[$i] ?>" method="post" id="group-comment-form">
<textarea name="group-comment" id="group-comment" placeholder="Add a comment..." spellcheck="false"></textarea>
</form>
<?php } ?>
This is the some part of my code. As you can see, I am passing the value of pin_id in my form action. The problem is, whenever I post comment, the form submits the value with /group/?Comment=1 but it supposed to submit with 1, when I comment to the first post. So, when I comment to the second post, it supposed pass 2 but it doesn't. It always passes /group/?Comment=1
I did echo this right after my textarea and I see that for every comment form, the number increments as it should be but when I submit, it submits with value 1. I am going crazy.
<?php echo "/group/<?php echo $group_id ?>?Comment=$pin_id[$i]" ?>
I have also this part in my code in the same loop above and it has the same logic but it works. I don't understand why the form part doesn't work.
Edit
Delete
EDIT
I wrote this simple program which demonstrates the same logic that I used for the site and this simple program works but website. I guess the problem is not about the names of form or textarea.
<?php
$inputValue = NULL;
$id = [1,2,3];
if(isset($_POST['inputName'])){
$inputValue = $_POST['inputName'];
echo "<br>Input Value: " . $inputValue;
}
if(isset($_GET['id'])){
$getValue = $_GET['id'];
echo "<br>Get Value: " . $getValue;
}
?>
<html>
<head><title>Multiple Forms in One Page</title></head>
<body>
<br>
Main Page
<br>
<?php for($i = 0; $i < 3; $i++){ ?>
<form action="index.php?id=<?php echo $id[$i] ?>" method="post" name="formName">
<textarea name="inputName"></textarea>
<input type="submit" name="submitName">
</form>
<?php } ?>
</body>
</html>
FOUND THE PROBLEM (BUT STILL NEED FIX)
<script>
$(function() {
$('textarea#group-comment').on('keydown', function(e) {
if(e.keyCode == 13 && !e.shiftKey){
document.getElementById('group-comment-form').submit();
}
});
});
</script>
I use this script to submit my forms. I don't have a submit button to submit. If I use submit button, everything works perfect but if I use this script above to submit the form, it won't work. What should I do to make the script above work?
SOLUTION
After I found where the problem is caused, I created another question to find a fix for the problem.
The answer is here: Solutution