document.getElementById() as PHP SQL Query parameter - php

Question

I have a question, is it possible to use the value stored in document.getElementById().value, getElementsByName().value, getElementsByClassName().value as a parameter for SQL Query via PHP?
Example.
I have this line <input type="text" class="myinput" id="myinput" name="myinput" value="999-AAA-000">
Then I'll store the data in this element.
<script>
function myFunction() {
var foroutput = document.getElementsByClassName("myinput");
}
</script>
Is there a way for document.getElementsByClassName("myinput"), or var foroutput to be used as a parameter for SQL Query via PHP?
SCENARIO: The SQL Query is within the same page as the document.getElementsByClassName("myinput"), will this work without using <form>?
This is my code
<input type="text" class="decid" id="decid" name="decid">
// the data passed into this input box will be used as a parameter for SQL Query $id
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
<?php
$id=$_POST['id'];
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr>
<td>".$row['scheduledate']."</td>
<td>".$row['schedulename']."</td>
<td>".$row['recordin']."</td>
<td>".$row['recordout']."</td>
<td>".$row['noofdays']."</td>
<td>".$row['rate']."</td>
<td>".$row['nightdifferential']."</td>
<td>".$row['leaveday']."</td>
<td>".$row['regularholiday']."</td>
<td>".$row['specialholiday']."</td>
</tr>
";
}
?>
</tbody>
</table>
A sample would be extremely great. Thank you.
EDIT:
Why won't this work?
<input type="text" class="decid" id="decid" name="decid">
<script type="text/javascript">
var abc = document.getElementById("decid").value;
<?php $abc = "<script>document.write(abc)</script>"?>
</script>
<?php echo $abc;?>

Answer 1

It looks as if you think <?php $abc = "<script>document.write(abc)</script>"?> might store the result of running JavaScript in a PHP variable. This is impossible. PHP runs on the server and builds the HTML to send to the client's browser. The JavaScript does not get run until it is received by the browser.
Server-side:
- PHP and MySQL can be run
- JavaScript cannot be run
Client-side:
- JavaScript can be run
- PHP cannot
In your example
<input type="text" class="decid" id="decid" name="decid">
<script type="text/javascript">
var abc = document.getElementById("decid").value;
<?php $abc = "<script>document.write(abc)</script>"?>
</script>
<?php echo $abc;?>
Is actually the same as
<input type="text" class="decid" id="decid" name="decid">
<script type="text/javascript">
var abc = document.getElementById("decid").value;
</script>
<script>document.write(abc)</script>
Because you stored a string with script tags in it inside of the variable $abc, and then echoed that variable back out a couple of lines later.
There are a few ways of getting JavaScript to communicate with the server.
1)
The old fashioned way is just to refresh the page with a query parameter that tells PHP what myinput is.
window.location.href = 'http://example.com/mypage?myinput=' + abc
And then in PHP you can get the input and use it in your SQL Query like so.
$abc = $_GET['myinput'] ?? false;
if ($abc){
...
}
2)
A better way is to use Ajax. Ajax allows you to send a request to the server for some data without having to refresh the entire page. If you're using jQuery then you can do this with the jQuery.get or jQuery.load functions. You would then have PHP return you your results which you would add to the page. There are a lot of tutorials out there on how to do this.
3)
If you're not using jQuery, then there are 2 additional options for sending requests to the server. If you don't care about supporting IE 11, then you can use the new Fetch API. The other option is to use the axios library which is a little bit easier to use, but requires installing a third party library. They are both pretty similar in their use.