Insert ajax populated dropdown into database in php - php

<select id="country" name="country" onChange="getState(this.value)" class="dropdown">
<option value="0">Select Country</option>
<?php
echo $country;
?>
</select>
the above code takes country from database, according to the country using ajax, i have created one dropdown using below code, am not able to insert the state value. how can I get the state value in php dbpage for inserting the state valu
<div id="statediv" >
<select id="ddlstate" name="ddlstate" class="dropdown" value="0">
<option>Select Country First</option>
</select>
</div>
this is my full ajax code
function getState(countryId)
{
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById('statediv').innerHTML=req.responseText;
}
else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
this is findState.php
<?php $country=intval($_GET['country']);
$query="SELECT stateid,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);
?>
<select name="state" onchange="getCity(<?php echo $country?>,this.value)">
<option>Select State</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value=<?php echo $row['stateid']?>>
<?php echo $row['statename']?>
</option>
<?php } ?>
</select>

As long as your Ajax is generating and populating the drop down properly, like so:
<select id="country" name="country" onChange="getState(this.value)" class="dropdown">
<option value="0">Select Country</option>
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
</select>
Check with firebug, or by viewing the source code of the page. Once you know thats correct, submit the form and use PHP code like this to check:
if( isset($_REQUEST['country'] ) ) {
echo $_REQUEST['country'];
} else {
echo "Country not sent from form";
}
Once you know the country is being sent from your form, you can use the value to put into a database or whatever you like.

please find the states using countryid and execute in such a manner.
<?php $states= getStates($countryid);
$str ='';
$str .='<select id="ddlstate" name="ddlstate" class="dropdown" value="0">';
foreach($states as $val){
$str.='<option value="'.$val->id.'">'.$val->name.'</option>';
}
$str.='</select>';
echo $str; exit; ?>
This is just sample code which you need to use in php file

I guess your insert into query is wrong. Check the number of fields and the values provided.
insert into query_mas(employee_id,country_id,state_id,city_id,experience,query) values('".$employee_id."','".$country_id."','".$state_id."','".$city_id."','".$e‌​xperience."')";

Related

How to POST two parameters in PHP using Ajax

I want to pass two parameters into the function getStuName() but found that there is error. Can anyone help me with the syntax?
<script language="javascript">
function getStuName1(val, val1) {
if(val!=''){
$.ajax({
type: "POST",
url: "get_stuname1.php",
data:'yr='+val+'&classname='+val1,
success: function(data){
$("#stu-list1").html(data);
}
});
alert(data);
}else{
document.getElementById('stuname').options.length=1;
document.getElementById('stuname').options[0].text='Please select';
}
} //end function
</script>
<select style="font-size: 18px;" name="yr" onChange="getStuName1(this.value);">
<option value="2021-2022">2021-2022</option>
<option value="2022-2023">2022-2023</option>
<option value="2023-2024">2023-2024</option>
<option value="2024-2025">2024-2025</option>
<option value="2025-2026">2025-2026</option>
<option value="2026-2027">2026-2027</option>
</select>
<select style="font-size: 18px;" name="classname" id="class-list" class="demoInputBox" onChange="getStuName1(this.value);">
<option value="" selected>please select</option>
<?php
$sql="SELECT classname FROM class";
$class_result = mysqli_query($db_link,$sql);
while($rs = mysqli_fetch_array($class_result, MYSQLI_ASSOC)) {
?>
<option value="<?php echo $rs["classname"]; ?>"><?php echo $rs["classname"]; ?></option>
<?php
}
?>
</select>
Content of get_stuname1.php
<?php
require_once("connMysql.php");
$sql_stu ="SELECT * FROM stu_hist WHERE enabled='1' AND sch_yr = '" . $_POST['yr'] . "' AND classname = '" . $_POST['classname'] . "' ORDER BY classno";
$stu_result = mysqli_query($db_link,$sql_stu);
while($rs = mysqli_fetch_array($stu_result, MYSQLI_ASSOC)) {
?>
<option value="<?php echo $rs["stu_name"]; ?>"> <?php echo $rs["stu_name"]; ?></option>
<?php
}
?>
I want to get the yr and classname and pass them into the function getStuName1 but cannot display student name
To ensure that the values from both select menus ( or all if there are more ) are used in the ajax request one method you might consider would be to use a global variable that you populate when a select menu triggers the change event. This global variable could be an object or array - it is the effective length when populated that is of interest as we can decide to send the AJAX request only when both/all select menus have been changed. This is all done without jQuery but the fetch code could very easily be replaced with suitable jQuery code. No need for buttons to fire the request...
// populate this with select name & value pairs
let args={};
// a function to process the response from the server
let callback=(r)=>{
document.getElementById('stu-list1').innerHTML=r;
}
// delegated event handler bound to the document
document.addEventListener('change',e=>{
if( e.target instanceof HTMLSelectElement && e.target.classList.contains('required') ){
// store this select menu name/value
args[ e.target.name ]=e.target.value;
// if BOTH (all) select menus are populated, do the AJAX request
if( Object.keys( args ).length==document.querySelectorAll('select.required').length ){
let payload=Object.keys( args ).map(name=>{
return [ name, args[name] ].join('=')
}).join('&');
fetch( 'get_stuname1.php', { method:'post', body:payload } )
.then(r=>r.text())
.then(callback)
.catch(alert)
}
}
});
<select name="yr" class='required'>
<option selected hidden disabled>please select...
<option>2021-2022
<option>2022-2023
<option>2023-2024
<option>2024-2025
<option>2025-2026
<option>2026-2027
</select>
<select name="classname" id="class-list" class="demoInputBox required">
<option selected hidden disabled>please select...
<option>geronimo
<option>horatio
<option>mimosa
</select>
<div id='stu-list1'></div>
Since you are passing two parameters to the getStuName1 function, so instead of using onChange (for a change in one select box) , it is recommended that you have a button which submit the two selected values when both of the them are selected (a "confirm submission" button is the preferred choice because normally a person needs to make up his/her mind that all the select boxes are properly chosen before the actual submission, and actually there is no point to trigger the ajax if only one of the select boxes are selected)
Hence
make sure that both select box are having a unique id (so add id="yr" for the yr select box)
add say a button which trigger passing the selected values of the two select boxes, such as:
<input type=button value="Confirm" onclick="javascript:trigger1();">
and
<script>
function trigger1() {
var e = document.getElementById("yr");
var value1 = e.value;
var e2 = document.getElementById("class-list");
var value2 = e2.value;
getStuName1(value1, value2);
}
</script>
So, change your code to
<script language="javascript">
function getStuName1(val, val1) {
if(val!=''){
$.ajax({
type: "POST",
url: "get_stuname1.php",
data:'yr='+val+'&classname='+val1,
success: function(data){
$("#stu-list1").html(data);
}
});
alert(data);
}else{
document.getElementById('stuname').options.length=1;
document.getElementById('stuname').options[0].text='Please select';
}
} //end function
</script>
<select style="font-size: 18px;" name="yr" id="yr">
<option value="2021-2022">2021-2022</option>
<option value="2022-2023">2022-2023</option>
<option value="2023-2024">2023-2024</option>
<option value="2024-2025">2024-2025</option>
<option value="2025-2026">2025-2026</option>
<option value="2026-2027">2026-2027</option>
</select>
<select style="font-size: 18px;" name="classname" id="class-list" class="demoInputBox" >
<option value="" selected>please select</option>
<?php
$sql="SELECT classname FROM class";
$class_result = mysqli_query($db_link,$sql);
while($rs = mysqli_fetch_array($class_result, MYSQLI_ASSOC)) {
?>
<option value="<?php echo $rs["classname"]; ?>"><?php echo $rs["classname"]; ?></option>
<?php
}
?>
</select>
<input type=button value="Confirm" onclick="javascript:trigger1();">
<script>
function trigger1() {
var e = document.getElementById("yr");
var value1 = e.value;
var e2 = document.getElementById("class-list");
var value2 = e2.value;
getStuName1(value1, value2);
}
</script>
[Additional point]
Last but not least, please amend your PHP script to use parameterized prepared statement which is resilient against SQL injection. You may refer to the following:
For Mysqli:
https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php
For PDO
https://www.php.net/manual/en/pdo.prepare.php

Get select option value from HTML with php to disable input field

I use select as below:
<select name="account_type" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
Now I want to catch those option values using php variable, and here is the important part: I will have an input field, and based on the values I want to enable/disable that input filed.
How can I do that?
Using jQuery give your select an id like below
<select name="account_type" id="account" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
<!--input to be disabled -->
<input type="text" id="disable">
jQuery
$('#account').on('change', function(){
if($(this).val() === '1') {
$("#disable").prop('disabled', true);
//you can also send data to PHP here using AJAX
//var data = {one: $(this).val()};
//$.post( "test.php", data, function( data ) {
//$( ".result" ).html( data );
//});
}else if($(this).val() === '2') {
//code here
}
//check for other values
});
example
You could do this with jQuery. If you don't know jQuery, check this out: jQuery.com
After you "installed" jQuery, you can use this in your js-File. I hope that you know how to create and use a js-File.
The next thing is to implement a good method for your select-button.
This could look like this in your js-File:
$('#my-select').change(function(){ // "#my-select" is the ID of your select. You need to implement a ID.
//do stuff here, eg.
if ($(this).val() == '5') { //check the selected option etc.
$("input").prop('disabled', true);
} else {
$("input").prop('disabled', false);
}
});
Here's a jsFiddle.
Hope this helps you.
html code
<select>
<option data-id="1">1</option>
<option data-id="2">2</option>
</select>
JQuery code
$(document).ready(function(){
$("select").change(function(){
var display= $("select").val();
if(display == 1){
$("select").attr("disabled", 'disabled');
}
});
});
I am not sure what you want exactly.check out this may be it will be helpful for you JSFiddle

PHP to show div info based on selected option in form

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>";
?>
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)
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>
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;
}
});
});

Show/hide select values based on previous select choice

I have 2 select's inside a form. The second select has about 2000 lines in total coming out of my mysql table. One of the column into that mysql has 1 of the values used into the first select. I want to be able to filter on that value when it is selected into the first select, so that it only shows these articles.
code now:
<div class="rmaform">
<select name="discipline" class="discipline">
<option value=" " selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article">
<?php
$articleselect = $dbh->prepare('SELECT * FROM articles');
$articleselect->execute();
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
</select>
I think i have to use Javascript for it but how do you combine PHP and Javascript? And what would be the best way to make the filter work?
jQuery for the change event and AJAX
$(document).ready(function(e) {
$('select.discipline').change(function(e) { // When the select is changed
var sel_value=$(this).val(); // Get the chosen value
$.ajax(
{
type: "POST",
url: "ajax.php", // The new PHP page which will get the option value, process it and return the possible options for second select
data: {selected_option: sel_value}, // Send the slected option to the PHP page
dataType:"HTML",
success: function(data)
{
$('select.input-article').append(data); // Append the possible values to the second select
}
});
});
});
In your AJAX.php
<?php
if(isset($_POST['selected_option']))
$selected_option=filter_input(INPUT_POST, "selected_option", FILTER_SANITIZE_STRING);
else exit(); // No value is sent
$query="SELECT * FROM articles WHERE discipline='$selected_option'"; // Just an example. Build the query as per your logic
// Process your query
$options="";
while($query->fetch()) // For simplicity. Proceed with your PDO
{
$options.="<option value='option_value'>Text for the Option</option>"; // Where option_value will be the value for you option and Text for the Option is the text displayed for the particular option
}
echo $options;
?>
Note: You can also use JSON instead of HTML for much simplicity. Read here, how to.
First give both of the selects an unique ids...
<div class="rmaform">
<select name="discipline" class="discipline" id="discipline">
<option value="" selected></option>
<option value="access">ACCESS</option>
<option value="inbraak">INBRAAK</option>
<option value="brand">BRAND</option>
<option value="cctv">CCTV</option>
<option value="airphone">AIRPHONE</option>
<option value="perimeter">PERIMETER</option>
</select>
</div>
<div class="rmaform">
<select name="article" class="input-article" id="article">
<option value="" selected></option>
</select>
Now you can use jQuery Ajax call to another file and get the HTML Response from that file and Populate in the select field with id="article" like this...
<script type="text/javascript">
$(document).ready(function(){
$("#discipline").change(function(){
var discipline = $(this).val();
$.post(
"ajax_load_articles.php",
{discipline : discipline},
function(data){
$("#article").html(data);
}
)
});
});
</script>
Now create a new file like ajax_load_articles.php... in the same directory where the html file exists... You can place it anywhere but then you have to change the $.post("url", the url to the ajax submission.
Contents of ajax_load_articles.php :
<?php
$discipline = $_POST["discipline"];
$articleselect = $dbh->prepare("SELECT * FROM articles WHERE colname = '{$discipline}'");
$articleselect->execute();
echo '<option value="" selected></option>';
while($articlerow = $articleselect->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $articlerow['a_code'];?>"><?php echo $articlerow['a_code'];?> <?php echo $articlerow['a_omschr_nl'];?></option>
<?php
}
?>
Now when ever you will change the select of the first select field an Ajax call will take place and the data of the second select field will automatically adjust to related data selected in the first select field.
This is an example where you can select the college specific to the state ..
Form.php
// your code for form ...
// select box for state starts
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">State</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="statename" id="stateid">
<option value="">---- Select ----</option>
<?php
$state=sql::readResultArray("Your Query To select State`");
foreach($state as $s){
?>
<option value="<?php echo $s?>"> <?php echo $s ?> </option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 col-md-2 control-label">Colleges</label>
<div class="col-lg-10 col-md-10">
<select class="form-control input-sm" name="mycollegename">
<option value="">--- Select --- </option>
</select>
</div>
</div>
// further code for from in form.php..
Script to find the state and then pass the value to find the respective colleges in that state
<script>
$(document).ready(function(e) {
$('#stateid').change(function()
{ ids=$('#stateid').val();
$.get('mycollege.php', {type:ids} ,function(msg){
$('select[name="mycollegename"]').html(msg);
});
});
});
</script>
Call this file through ajax .. Code on this file
mycollege.php
<?php
require('db.php'); // call all function required, db files or any crud files
$type=$_GET['type'];
if(!empty($type)){
$r=sql::read("Your Query To call all teh college list");
?>
<select name="mycollegename">
<option value="">Select One</option>
<?php
foreach($r as $r){
echo "<option value=\"$r->collegename\">$r->collegename </option>";
}
?>
</select>
<?php }else{ ?>
<select name="mycollegename">
<option value="">Select State</option>
</select>
<?php } ?>

How to Keep the selected value of the select box after Form POST or GET

Im trying to implement the search feature in my website.
when the search keyword is entered in the textbox, and the category combo is selected, the form will be Posted and the result will be shown on the same page.
what i want is to keep the selected category of the combo by default in the form after posted
For eg., If i select the category 'Automobiles' in the combo and click search, after form submit, the combo should show the automobiles as default selected option. Please help me. Any help will be appreciated
I assume you get categories from database.
you should try:
<?php
$categories = $rows; //array from database
foreach($rows as $row){
if($row['name'] == $_POST['category']){
$isSelected = ' selected="selected"'; // if the option submited in form is as same as this row we add the selected tag
} else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$row['id']."'".$isSelected.">".$row['name']."</option>";
}
?>
Assuming that by "combo" you mean "A regular select element rendering as a drop down menu or list box" and not "A combobox that is a combination of a drop down menu and free text input":
When outputting the <option> elements, check the value against the submitted data in $_POST / $_GET and output selected (in HTML) or selected="selected" (in XHTML) as an attribute of the option element.
Here is the JQuery way I am using.
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
$("#name").val("<?php echo $_POST['name'];?>");
</script>
But this is only if you have jquery included in your webpage.
Regards
<?php
$example = $_POST["friend"];
?>
<form method="POST">
<select name="friend">
<option value="tom" <?php if (isset($example) && $example=="tom") echo ' selected';?>>Thomas Finnegan</option>
<option value="anna" <?php if (isset($example) && $example=="anna") echo ' selected';?>>Anna Karenina</option>
</select>
<br><br>
<input type="submit">
</form>
This solved my problem.
This Solved my Problem. Thanks for all those answered
<select name="name" id="name">
<option value="a">a</option>
<option value="b">b</option>
</select>
<script type="text/javascript">
document.getElementById('name').value = "<?php echo $_GET['name'];?>";
</script>
$countries_uid = $_POST['countries_uid'];
while($row = mysql_fetch_array($result)){
$uid = $row['uid'];
$country = $row['country_name'];
$isSelected = null;
if(!empty($countries_uid)){
foreach($countries_uid as $country_uid){//cycle through country_uid
if($row['uid'] == $country_uid){
$isSelected = 'selected="selected"'; // if the option submited in form is as same as this row we add the selected
}
}
}else {
$isSelected = ''; // else we remove any tag
}
echo "<option value='".$uid."'".$isSelected.">".$country."</option>";
}
this is my solutions of multiple select dropdown box after modifying Mihai Iorga codes
After trying al this "solves" nothing work. Did some research on w3school before and remember there was explanation of keeping values about radio. But it also works for Select option. See here an example. Just try it out and play with it.
<?php
$example = $_POST["example"];
?>
<form method="post">
<select name="example">
<option <?php if (isset($example) && $example=="a") echo "selected";?>>a</option>
<option <?php if (isset($example) && $example=="b") echo "selected";?>>b</option>
<option <?php if (isset($example) && $example=="c") echo "selected";?>>c</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Easy solution:
If select box values fetched from DB then to keep selected value after form submit OR form POST
<select name="country" id="country">
<?php $countries = $wpdb->get_results( 'SELECT * FROM countries' ); ?>
<option value="">
<?php if(isset($_POST['country'])){echo htmlentities($_POST['country']); } else { echo "Select Country *"; }?>
</option>
<?php foreach($countries as $country){ ?>
<option <?php echo ($_POST['country'] == $country->country_name ? 'selected="selected"':''); ?> value="<?php echo $country->country_name; ?>"><?php echo $country->country_name; ?>
</option>
<?php } ?>
</select>

Categories