How to put seach box inside in a dropbox? - javascript

I have problem how to put seach box inside in a dropbox, I had already a code using some javascript but It didn't work can you please help me about it?
Here's my code
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
here's my select tag codes:
<?php
$sql = mysql_query("SELECT * FROM barangay");
?>
<select class="js-example-basic-single" name="barangay_ID" style='width:160px;height:38px;border-radius:8px;border-color:#D7D7D7;margin-left:55px;' autofocus required>
<option disabled selected hidden>← Please select →</option>
<?php
while ($row = mysql_fetch_array($sql)){
echo "<option value='".$row['barangay_ID']."'>".$row['barangay_name']."</option>";
}
echo "</select>";
?>
Don't know why it doesn't work please help mean example

Related

how to retain drop down values as the value selected after submit

My drop down is showing blank then when i select the value of dropdown the same value is showing, but i have to show dropdown value as select first then when I click on button the respective value should show
I am doing a Php program
<form class="form-horizontal" name="form" method="post" action="<?php $_PHP_SELF?>">
<label for="courseDisp" class="col-sm-2" style="margin-top:10px;">Course : </label>
<?php
$course="SELECT * from course";
$res= $conn->query($course);
if($res->num_rows>0)
{
echo '<select name="courseDisp" id="courseDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0" selected> -- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["course_id"].'>'.$row['shortname'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<label for="yearDisp" class="col-sm-2" style="margin-top:10px;">Year : </label>
<?php
$year="SELECT distinct(year) from syllabus";
$res= $conn->query($year);
if($res->num_rows>0)
{
echo '<select name="yearDisp" id="yearDisp" class="form-control col-sm-3" style="margin-top:8px;display:inline;padding:10px;">';
echo '<option value="0">-- SELECT --</option>';
while($row=$res->fetch_assoc())
{
echo '<option value='.$row["year"].'>'.$row['year'].'</option>';
}
echo '</select>';
} else {
echo "0 result";
}
?>
<script type="text/javascript">
document.getElementById('courseDisp').value = "<?php echo $_POST['courseDisp'];?>";
document.getElementById('yearDisp').value = "<?php echo $_POST['yearDisp'];?>";
<input type="submit" class="btn col-sm-2" style="margin-left:15px;margin-top:10px;width:60px;font-weight:bold;font-size:15px;" value="GO" name="btnGo" id="btnGo" />
</form>
I think you are doing it in a wrong way:
your code should look like this
<script type="text/JavaScript">
var valueSelected=document.getElementById('course').value;
alert(valueSelected);// do here according to the need
</script>
This is because there is no $_POST variables present before you submit a form.
$_POST variables can only be 'accessed' whenever a POST form is submitted, so when the form is not submitted, $_POST['course'] will be undefined. If you want to use persistant, but also relative variables, use $_GET.
This can be done the following way:
<script type="text/javascript">
document.getElementById('course').value =<?php echo $_GET['course'];?>";
</script>
(this will cause an error if value is not set, make sure to make exceptions for that, using if statements in PHP)
but the value also needs to be fetched from the URL.
so your url needs to have ?course=<course_value> in it, for example:
https://example.com/index.php?course=Course%201
Click here for more about POST vs GET requests
Instead of setting the value with javascript, you should directly write the selected attribute.
<select name="course">
<?php foreach ($options as $key => $value): ?>
<option value="<?= $key ?>"<?php if ($key == $_POST['course']) echo " selected" ?>>
<?= $value ?>
</option>
<?php endforeach; ?>
</select>
If you have to do this in javascript, keep sure, you use the correct syntax. Your example has a wrong " at the end of the line. Also you should use json_encode, if you want to output vars into javascript. And a last thing - if you don't put this inside the document ready event, the script has to be placed after the select element, which you wan't to manipulate
<select name="course">...</select>
...
<script type="text/javascript">
document.getElementById('course').value = <?= echo json_encode($_POST['course']) ?>;
</script>
Needed to keep the <option value="">-Select-</option>

Dynamic drop down list in PHP and MySQL

I have two tables in my database:
Table 1: Country => countryid(primary),countryname and
Table 2: State => stateid(primary),countryid(foreign),state
Now I want to make a drop down list. For example:
Country India (dropdown 1) should show States Goa, UP and MP (dropdown 2)
Country Pakistan (dropdown 1) should show States Lahore and Karachi (dropdown 2)
I have populated both tables with these values.
Here I am including my code files. I am able to get the first menu working but no values in the second menu. I want the second menu to change instantly when the value selected in the first menu is changed (not just when the page is loaded).
index.php
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM country") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#countryname").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?countryid=' + $(this).val(), function(data) {
$("#stateid").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="countryname" id="countryname">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['countryid']; ?>"><?php echo $row['countryname']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="state" id="stateid"></select>
</form>
</body>
</html>
config.php
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('login');
?>
loadsubcat.php
<?php
include('config.php');
$countryid = $_GET['countryid'];
$query = mysql_query("SELECT * FROM state WHERE countryid = {$countryid}");
while($row = mysql_fetch_array($query)) {
echo "<option value='$row['stateid']'>$row['state']</option>";
}
?>
I am not able to figure out my problem. Also I have not done PHP before. This is the first time I am learning and that too with this project, so forgive me if I made disastrous mistakes.
Here you are sending the country id with key name countryname:
$.get('loadsubcat.php?countryname=' + $(this).val(), function(data) {
But on your PHP file, you are trying to get the value by using countryid:
$countryid = $_GET['countryid'];
Change and make it same for both. It will work!
UPDATE:
$("#state").html(data);
Here you are referring state but on your HTML, you are using stateid.
<select name="state" id="stateid"></select>
What Muhammad Sumon Molla Selim said is correct and there is one more mistake in loadsubcat.php
you need to change, echoing options statement
From:
echo "<option value='$row['stateid']'>$row['state']</option>";
To:
echo "<option value=".$row['stateid'].">".$row['statename']."</option>";
Then second dropdown will get states based on change in coutries dropdown.
when I excecuted your code in my local machine I was not getting data. The mistake you did was you are not concatinating the strings and variables properly.

php - select option value not passed to post

Im pretty stuck at this code, I really can't see why it should not work, i don't know if some javascript code im running beforehand is interfering?
Only showing relevant part of the code
The first section with javascript updates page when selecting another dropdown, and is placed before the code that im struggling with:
`
<script type="text/JavaScript">
function changeDropDown(){
var elLocation = document.getElementById('form_location_id');
var location = elLocation.options[elLocation.selectedIndex].value;
document.getElementById("form1").action = "choose.php?id=" + location;
document.getElementById("form1").submit();
}
</script>
<form id="form1" name="form1" method="post">
<select size="1" name="form_location_id" id="form_location_id" onchange='changeDropDown(this);'>
<?php
if ($chosen_id == "1") { ?>
<option value = "1" selected><?php echo "dropdown text" ?></option>
<? } else { ?>
<option value = "1"><?php echo "dropdown text" ?></option>
<?php } ?>
</select>
</form>
<form method="post" action="update.php">
<select size="1" id="choice" name="value">
<?php
while($row = mysqli_fetch_array($query)) {
$id = $row['id'];
$number = $row['number'];
>?
<option value = "<?php echo ($id) ?>"><?php echo "ID=" . ($id) . " - #" . ($number) . ""?></option>
<?php
}
mysqli_close($db_conn);
?>
</select>
<input name="submit" type="submit" value="Submit">
</form>
update.php:
<?php
if (isset($_POST['submit'])) {
$chosen_id = $_POST['id'];
}
?>
`
I've only posted the code handling the select option and the post part...
Why is the $chosen_id variable always 0 ?
The while loop works, and fill's the variable, as this is tested with echo command inside the option line
Any help is much appreciated...
$_POST['id'] and <select size="1" id="choice" name="value">
Use $_POST['value']
You are trying to print the wrong key
if you trying to get the value of form_location_id
$chosen_id = $_POST['form_location_id'];
And if you trying to get the value of choice
$chosen_id = $_POST['value'];
This is why when you post a form to php it use html name attribute as key to assign the value to $_POST Array
I'd change Update.php to
<?php
if (isset($_POST['value'])) {
$chosen_id = $_POST['value'];
}
?>
You need to use the form_location_id to get the required value. You are using the wrong key to access the data. You need to use the name of the input. In this case, the input is the select and the name of that is form_location_id. So, you need to do this.
$value = $_POST['form_location_id'];
Try it out and do let me know if it worked out for you.
Thanks for everyone posting idea's - i've actually got it working, the code was actually working, only error was a misplaced tag, which was placed inside a tag, when placed outside this tag it works ;)

How to make HTML form fields automatically change when an option selected on a select field

Let's say I have a form like this in my CodeIgniter project.
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" name="S_happened">
<?php echo form_close(); ?>
What I want to do is if an user select one status, according to the it's type, show a text field to get an input.
I've made a way to get a type of the status like this: http://localhost/myapp/index.php/status/type/{status_id} where users can pass status ID and it will "echo" the type of the status.
I want to receive it back to the HTML page via a JavaScript method and show those text input fields. How do I do that?
Thank you. :)
As you have jQuery tag, so i suggest you this:
$('select').change(function(){
var inp = this.value.trim();
$(this).parent().find('input[type="text"][name^="'+inp+'"]').show().siblings(':text').hide();
});
I have posted the sample flow as per you want to do. hope this will helpful for you.
PHP:
<?php echo form_open(); ?>
<select>
<?php foreach($status_list as $status): ?>
<option value="<?php echo $status->id; ?>"><?php echo $status->name; ?></option>
<?php endforeach; ?>
</select>
<!-- Show this only if status type is, let's say "E" -->
<input type="text" id="E_happened" name="E_happened">
<!-- Show this only if status type is, let's say "S" -->
<input type="text" id="S_happened" name="S_happened">
<?php echo form_close(); ?>
JAVASCRIPT :
$('select').change(function(){
var statusId = $(this).val();
var statusType = $.get("http://localhost/myapp/index.php/status/type/"+statusId);
if(statusType == 'E')
{
$('#E_happened').value("what do you want here");
}
if(statusType == 'S')
{
$('#S_happened').value("what do you want here");
}
});

Php select onchange doesn't seem to be working

I was having an issue with some code I had so I am starting again from scratch, but now something that was working in my original code is not working here and I can not figure out why. When I make a selection from the dropdown box the onchange function, which should trigger my reload function, nothing happens. Here is my code:
<!DOCTYPE html>
<?php
require 'config.php'; // Database connection
//////// End of connecting to database ////////
?>
<html>
<head>
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.year1.options[form.year.options.selectedIndex].value;
self.location='spt.php?year1='+val;
}
</script>
</head>
<body>
<div>
<?Php
#$year1=$_GET['year1'];
#$team1=$_GET['team1'];
$quer1="SELECT DISTINCT year FROM PlayerRegSeason ORDER BY year";
$quer2="SELECT DISTINCT team FROM PlayerRegSeason WHERE year=$year1 ORDER BY team";
$quer3="SELECT fname, lname FROM PlayerRegSeason WHERE year=$year1 and team ='$team1'";
echo "<form method=post name=f1 action ='searchpageresultsdd.php'>";
echo "<select name ='year1' onchange=\"reload(this.form)\"><option value=''>Select Year</option>";
foreach ($dbo->query($quer1) as $row1){
if($row1['year']==#$year1){echo "<option selected value='$row1[year]'>$row1[year]</option>"."<BR>";}
else{echo "<option value='row1[year]'>$row1[year]</option>";}
}
echo "</select>";
?>
</div>
</body>
</html>
Since the name attribute of the <select> tag is year1, this syntax
var val=form.year1.options[form.year.options.selectedIndex].value;
should be changed to this
var val=form.year1.options[form.year1.options.selectedIndex].value;

Categories