PHP to show div info based on selected option in form - php

Question

I want to use PHP to change a div's information based on what option is selected. Below is my HTML & PHP. I don't think I'm using the right operator or syntax in the if statement. I basically want to pull information from a table in my database based on the option selected. Right now I do not have that in my code because it is irrelevant at this point. Any help is appreciated.
<select id=\"numberofstaff\">
<option class=\"staffselection\" value=\"\">--Select--</option>
<option class=\"staffselection\" value=\"smalljobsite\">1-3 staff</option>
<option class=\"staffselection\" value=\"mediumjobsite\">4-7 staff</option>
<option class=\"staffselection\" value=\"largejobsite\">8+ staff</option>
</select>
<?php
$selectOption = $_POST['numberofstaff'];
echo "<div id='jobsite_price'><p>";
if ($selectOption == 'smalljobsite'){
echo "smalljobsite";
};
if ($selectOption == 'mediumjobsite'){
echo "mediumjobsite";
};
if ($selectOption == 'largejobsite'){
echo "largejobsite";
};
echo "</p></div>";
?>

Answer 1

You need form tags and a POST method, while giving the select a name attribute. You can't rely on an id alone, not without JS/Ajax anyway.
Sidenote: I removed the \ from the escaped quotes, since they're not in an echo statement/PHP in your posted code. This would throw an error/warning such as "unquoted attribute". If you are using it inside an echo'd statement, then you'll need to add those back in.
FYI: Escaping quotes \" is only done when inside an echo/PHP.
Additional note:
If you want to run seperate SQL statements, it's rather simple. Where the echos are and where I have in a comment form // RUN SQL HERE, you can simply include a file in there with your SQL query. I do it myself and it cuts down on a lot of code and is more manageable that way.
HTML/PHP:
<form method="post" action="">
<select id="numberofstaff" name="numberofstaff">
<option class="staffselection" value="">--Select--</option>
<option class="staffselection" value="smalljobsite">1-3 staff</option>
<option class="staffselection" value="mediumjobsite">4-7 staff</option>
<option class="staffselection" value="largejobsite">8+ staff</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if(isset($_POST['submit'])){
$selectOption = $_POST['numberofstaff'];
echo "<div id='jobsite_price'><p>";
if ($selectOption == 'smalljobsite'){
// RUN SQL HERE
echo "smalljobsite";
}
if ($selectOption == 'mediumjobsite'){
// RUN SQL HERE
echo "mediumjobsite";
}
if ($selectOption == 'largejobsite'){
// RUN SQL HERE
echo "largejobsite";
}
echo "</p></div>";
} // brace for if(isset($_POST['submit']))
?>
Foonotes:
To include files, you can use include():
// Include your SQL query
include('query_file.php');
where you see // RUN SQL HERE in commented code.
Another option is to use Ajax.
Here are a few links:
http://www.w3resource.com/ajax/working-with-PHP-and-MySQL.php
http://www.tutorialspoint.com/php/php_and_ajax.htm
How to use AJAX to perform a MYSQLI query (prepared statement)

Answer 2

If you're just using php to check the selected value, you can use jquery for that, i.e.:
$("select").on('change', function() {
$("#jobsite_price").html("<p>"+$(this).val()+"</p>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="numberofstaff">
<option class="staffselection" value="">--Select--</option>
<option class="staffselection" value="smalljobsite">1-3 staff</option>
<option class="staffselection" value="mediumjobsite">4-7 staff</option>
<option class="staffselection" value="largejobsite">8+ staff</option>
</select>
<div id='jobsite_price'></div>

Answer 3

You can use pure javascript to do this.
window.addEventListener('load', function(){
var el = document.querySelector("#numberofstaff");
el.addEventListener('change', function(){
var data = { numberofstaff : el.value };
var request = new XMLHttpRequest();
request.open('POST', 'YourUrl.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
request.onload = function(result){
document.querySelector("#jobsite_price").innerHTML = result.responseText;
}
});
});