I am trying to put countries flag infront of there respective country code likein gmail registration something like this:
I tried with img src and background but images are not visible.I have a table in mysql with ISO,country name,code. I am trying to use https://ipdata.co/flags api to populate flag.
My code:
<select Emp Name='NEW'>
<option value="">--- Select ---</option>
<?
$list=mysqli_query($con,"select * from country");
while($row_list=mysqli_fetch_assoc($list)){
$display="+".$row_list['phonecode']."-".$row_list['name'];
$flag=$row_list['isosmall'];
?>
<option style="background-image:url(https://ipdata.co/flags/<?php echo $flag;?>.png);"></option>
// <option value="<img src="https://ipdata.co/flags/<?php echo $flag;?>.png"/></option>
// <? echo $display; ?>"</option><? if($row_list['iso']==$select){ echo "selected"; } ?>
// <?//echo $row_list['name'];
//echo $display;?>
</option>
<?
}
?>
</select>
You can do it with this jquery plugin and replace with your data:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
</head>
<body>
<select class="country" name="wcpbc-manual-country" id="country">
<option value="AU" data-iconurl="https://aus.merchnow.com/img/location-aus.png">AU some text</option>
<option value="IN" data-iconurl="https://images0.voylla.com/flags/inr.gif">IN some text</option>
</select>
</body>
</html>
JS:
$("#country").selectBoxIt();
JSFiddle example
Related
Bootstrap select search is not working.May be there is small thing i am missing.
I have using bootstrap select which is working fine.Select options coming from database.added data-live-search="true" for search which is not working.Select dropdown not opening.
Code is
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<?php $sql = "select * from vehicle order by vehiclename";
$vehicle_list = $mysqli->query($sql);
$schematron_array['Level5'] == coming from different table ?>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<?php while( $row = $vehicle_list->fetch_array() ) {
if(!empty($row['vehiclename'])) {?>
<option value="<?php echo $row['vehiclename']; ?>" <?php echo ($schematron_array['Level5'] == $row['vehiclename'])?"selected":""; ?> >
<?php echo $row['vehiclename']; ?>
</option>
<?php } } ?>
</select>
Thanks.
Please Forgive if any mistake is there.
There can be two issues -
1. jQuery is missing.
2. Database not returning any rows.
I used your code, applied jQuery and supplied some hard-coded values and it is working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<label>Vehicle</label>
<select class="selectpicker form-control" data-live-search="true" name="vehicle">
<option value="">Select vehicle</option>
<option value="">Vehicle 1</option>
<option value="">Vehicle 2</option>
<option value="">Vehicle 3</option>
<option value="">Vehicle 4</option>
<option value="">Vehicle 5</option>
</select>
I'm want to show php include based on the drop down menu choice.
But the trick is that I want to show the include before submitting the page.
<?php include 'page.php'; ?>
<select name="s1"style="width: 70px;" >
<optgroup label="My Input">
<option value="">Select...</option>
<option value="one kind</option>
<option value="second kind</option>
</select>
How can I show my page based on option selected before page is submited?
I found it!
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
Rajesh I succeeded to submit the page using javascript onclick event like you told me but now for some reason the variables don’t get submitted to the javascript redirect page.
Can you tell me what I am doing wrong?
Thanks a lot for your help.
Here is my new code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--For dropdown auto submit-->
<script>function onSelectChange(){
document.getElementById("myselect").submit();
}</script>
<!--For final page submit-->
<script>
function submit() {
window.location = "action_page.php";
}
</script>
</head>
<body>
<form action="test.php" method="post">
<select name="s1" style="width: 70px;" id="mySelect" onchange="this.form.submit()" </select>
<optgroup label="170011 Non-Isolated RS-422">
<option value="">Select...</option>
<option value="170011-3" <?php if ($_POST['s1'] == '170011-3') echo 'selected="selected"'; ?> >0011-3v3</option>
<option value="170011-5" <?php if ($_POST['s1'] == '170011-5') echo 'selected="selected"'; ?> >0011-5v0</option>
<optgroup label="170013 Isolated LVTTL Input">
<option value="">Select...</option>
<option value="170013-3" <?php if ($_POST['s1'] == '170013-3') echo 'selected="selected"'; ?> >0013-3v3</option>
<option value="170013-5" <?php if ($_POST['s1'] == '170013-5') echo 'selected="selected"'; ?> >0013-5v0</option>
<optgroup label="170015 Isolated LVDS Input">
<option value="">Select...</option>
<option value="170015-3" <?php if ($_POST['s1'] == '170015-3') echo 'selected="selected"'; ?> >0015-3v3</option>
<option value="170015-5" <?php if ($_POST['s1'] == '170015-5') echo 'selected="selected"'; ?> >0015-5v0</option>
<optgroup label="170016 Isolated RS-422 Input">
<option value="">Select...</option>
<option value="170016-3" <?php if ($_POST['s1'] == '170016-3') echo 'selected="selected"'; ?> >0016-3v3</option>
<option value="170016-5" <?php if ($_POST['s1'] == '170016-5') echo 'selected="selected"'; ?> >0016-5v0</option>
<optgroup label="170017 Non-Isolated LVTTL Input">
<option value="">Select...</option>
<option value="170017-3" <?php if ($_POST['s1'] == '170017-3') echo 'selected="selected"'; ?> >0017-3v3</option>
<option value="170017-5" <?php if ($_POST['s1'] == '170017-5') echo 'selected="selected"'; ?> >0017-5v0</option>
</select></form>
<!--<input type="submit" id="form_page" value="Submit">-->
<input type="submit" value="Submit Final" onclick="submit()">
</body>
</html>
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). You should give the different id to form tag and button tag.
You've gave same id in form tag and button tag. You've take two form tags and you've taken Submit button instead simple button. So html document only consider first form tag so when you click on button you will simply redirect to test.php
Now for redirect to another url using button you can use javascript onclick event like:
<input type="button" value="Submit" onclick="yourfunction">
and in function redirect using javascript like:
window.location = "http://www.example.com";
What I'm attempting to do with the below code is call a PHP function from an drop-down menu.
Is there a clean way of doing this?
code:
<html>
<head>
</head>
<body>
<?php
function OnSelectionChange() {
echo("OK IT WORKS");
}
?>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
You can get the selected value from the drop down list simply using php without using JavaScript.
<html>
<head>
<title>Country</title>
</head>
<body>
<form method="POST" action="">
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_POST["country"])){
$country=$_POST["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
simple ajax using jquery
index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myDropDown').change(function(){
//Selected value
var inputValue = $(this).val();
alert("value in js "+inputValue);
//Ajax for calling php function
$.post('submit.php', { dropdownValue: inputValue }, function(data){
alert('ajax completed. Response: '+data);
//do after submission operation in DOM
});
});
});
</script>
</head>
<body>
<select id="myDropDown">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</body>
</html>
in submit.php
<?php
function processDrpdown($selectedVal) {
echo "Selected value in php ".$selectedVal;
}
if ($_POST['dropdownValue']){
//call the function or execute the code
processDrpdown($_POST['dropdownValue']);
}
for simple js ajax use XMLHttpRequest
Does not connect onchange event with php function.
must use javascript function
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<html>
<head>
<title>Country</title>
</head>
<body>
<form>
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_GET["country"])){
$country=$_GET["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
Can't do that, use JavaScript function instead
<html>
<head>
</head>
<body>
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
This mild adaptation has worked well for me. So very many thanks to vivekcs0114 and furthermore nicely avoids JS and the required Ajax solution which after around 200 miserable attempts has been a total disaster.
<form method="post" action="">
<select method="post" name="areasel" onchange="this.form.submit()">
<option value="Choose one">Choose one</option>
<option value="Complete Airframe">Complete Airframe</option>
<option value="Armstrong Siddeley">Armstrong Siddeley</option>
<option value="Something">Something</option>
</select>
</form>
<?php
if(isset($_POST["areasel"]))
{
$type=$_POST["areasel"];
echo "<BR>Do some SQL stuff using :".$type;
}
?>
I've already created my html form with a drop-list menu of 5 selections
I want a selected option from the drop-list to call php function that will echo a selected option to the screen
<label>Fruits</label>
<select name="Fruits">
<option value="Ap">Apple</option>
<option value="BN">Banana</option>
<option value="OR">Orange</option>
For example, here is your html code
<html>
<head></head>
<title>Static Dropdown List</title>
<body bgcolor="pink">
Employee List :
<select>
<option value="Select">Select</option>}
<option value="Moyed">Moyed Ansari</option>
<option value="Asad">Asadullah</option>
<option value="Usman">Usman Ali</option>
</select>
</body>
</html>
Now You will use the above table in the dropdown list using the following code.
<html>
<head>
<title>Dynamic Drop Down List</title>
</head>
<BODY bgcolor ="pink">
<form id="form1" name="form1" method="post" action="<?php echo $PHP_SELF; ?>">
Employee List :
<select Emp Name='NEW'>
<option value="">--- Select ---</option>
<?
mysql_connect ("localhost","root","");
mysql_select_db ("company");
$select="company";
if (isset ($select)&&$select!=""){
$select=$_POST ['NEW'];
}
?>
<?
$list=mysql_query("select * from employee order by emp_id asc");
while($row_list=mysql_fetch_assoc($list)){
?>
<option value="<? echo $row_list['emp_id']; ?>"<? if($row_list['emp_id']==$select){ echo "selected"; } ?>>
<?echo $row_list['emp_name'];?>
</option>
<?
}
?>
</select>
<input type="submit" name="Submit" value="Select" />
</form>
</body>
php is on the server side
where as all the html is on the user side..
if you want to echo the selected option, then you have to send the selected option to the server side using Ajax Request or using some other technique like POST a form.
// using jquery you can get your selected value
<script>
var selected_value = $("#idOfTheSelectTag").val();
// or you can also do
var selected_value = $("#idOfTheSelectTag :selected").text();
// now you can post it to the php page using AJAX where you can echo it
$.post('page_name.php', {SELECTED_VALUE : selected_value}, function(data){
// on the server side in page_name.php file if you echo the value then it will be returned in the data object in the function
});
</script>