code:
<script>
$(document).ready(function(){
$(".field").change(function(){
field = $(".field").val();
$.ajax({
type:"POST",
data:{"field":field},
url:"potential-courses.php",
success:function(data){
$(".course").val(data);
}
});
});
});
</script>
potential-courses.php
<?php
include("conn.php");
$field = $_POST['field'];
$sql = "select * from course_master where field = '$field' order by course_full_name";
$result = mysqli_query($link,$sql);
while ($row = mysqli_fetch_array($result))
{
echo "<option value=".$row['course_short_name'].">".$row['course_full_name']."</option>";
}
?>
html code:
<select name='field' class='field' id="field">
<option value="">Select Field</option>
<option value='engineering'>Engineering</option>
<option value='law'>LAW</option>
<option value='medical'>Medical</option>
<option value='management'>Management</option>
<option value='pharmacy'>Pharmacy</option>
<option value='hotel management'>Hotel Management</option>
<option value='mass communication'>Mass Communication</option>
<option value='agriculture'>Agriculture</option>
<option value='architecture'>Architecture</option>
<option value='education'>Education</option>
<option value='paramedical'>Paramedical</option>
<option value='design'>Design</option>
<option value='commerce'>Commerce</option>
<option value='film/tV/media'>Film /TV/ Media</option>
</select>
<select name="course" class="course">
<option value="">Select Courses</option>
</select>
In this code I have two dropdown list i.e
<select name='field' class='field' id="field">
and another is
<select name="course" class="course">
when I change value from "name=field" it display nothing in "name=course". where I am doing wrong please help me.
Thank You
Change it:
$(".course").val(data);
to
$(".course").html(data);
It will add the <option> set that you have returned from php to your <select>
Related
I need your help! I am trying to save a variable in sql table using Php but I have problem. There are two questions in php, the first concern the continent and the second is depended from the continent. I want to use a loop to check which of the continents has been selected in the first question and then save the value of the second question. I hide the option of unchecked continent using some javascript code (I don't have problem).
The HTML code:
<form method="post" action="">
<fieldset><legend>Continents</legend>
<select id="q1" name="q1">
<option value="1">Africa</option>
<option value="2">Asia</option>
<option value="3">Australia</option>
<option value="4">America</option>
<option value="5">Europe</option>
</select>
<select id="q2" name="Africa">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Asia">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Australia">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="America">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Europe">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
</fieldset>
The Php code
$q1 = $_POST['q1'];
$continents = array("Africa","Asia", "Australia","America","Europe");
for ($i = 1; $i <= 5; $i++) {
if($q1 == $i) {
$q2 = $_POST[$continents[$i-1]]
}
}
Your array should be from 1 to 5 instead of 0 to 4 as you have values 1 to 5 in q1.
Alternatively, I suggest that change your HTML structure to get the continent value in a single line without using loop. You need to change the values of continent like,
<select id="q1" name="q1">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia</option>
<option value="America">America</option>
<option value="Europe">Europe</option>
</select>
And to get the value of selected continent use $_POST[$_POST['q1']]. For egs, $_POST['q1']=Asia, then $_POST['Asia'] will return the Asia's choice,
$q2= $_POST[$_POST['q1']];
change
$continents =
array(1 => "Africa",
2 => "Asia",
3 => "Australia",
4 => "America",
5 => "Europe");
or
if(($q1-1) == $i) {
$q2 = $_POST[$continents[$i]]
}
First, you may change your select continent HTML:
<select id="q1" name="q1">
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia</option>
<option value="America">America</option>
<option value="Europe">Europe</option>
</select>
Then you could loop over your continents and get the answer:
$q1 = $_POST['q1'];
$continents = array("Africa","Asia", "Australia","America","Europe");
foreach($continents as $continent) {
if ($_POST['q1'] == $continent) {
$q2 = $_POST[$continent];
}
}
Now you have your answer to the second question in $q2.
How about this?
// Always try to seperate logic from your view
// Intialize data
$continents = array("Africa", "Asia", "Australia", "America", "Europe");
// Check for $_POST
if(isset($_POST["q1"])) {
foreach($continents as $id => $continent) {
if($_POST["q1"] == $id) {
// Do something special here
}
}
}
// Render HTML
<form method="post" action="">
<fieldset>
<legend>Continents</legend>
<select id="q1" name="q1">
<!-- Notice that I echo only variables not all of the html -->
<?php foreach($continents as $id => $continent) { ?>
<option value="<?php echo $id; ?>"><?php echo $continent; ?></option>
<?php } ?>
</select>
<select id="q2" name="Africa">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Asia">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Australia">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="America">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
<select id="q2" name="Europe">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
</select>
</fieldset>
Beautiful thing about my solution is that now you can create whatever array you want and your code will always work.
You can for example SELECT data from database and store them in $continents variable.
$query = "SELECT id, name FROM continents";
$result = mysql_query($query);
$continents = array();
while($row = mysql_fetch_assoc($result)) {
$continents[$row["id"]] = $row["name"];
}
Cool right? :)
I found the solution finally!!!
Replace
$q2 = $_POST[$continents[$i-1]]
with
$q2 = $_POST["{$continents[$i-1]}"];
That solution I wanted!!
I have select box with multiple option in my project. The code is below
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
I am using jQuery in this project. Now I want to select some values to send message. How can I deselect all other values when I click All of Above
This is how I would do it:
$("option").click(function () {
if ($(this).text() == "All of Above") {
$(this).siblings().removeAttr("selected");
}
});
Here is the JSFiddle demo
$('#sendto').change(function() {
alert($('option:selected', this).val())
if ($('option:selected', this).val() === 'all') {
$("select[multiple] option").prop("selected", "selected");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
$('#sendto').change(function () {
if ($('option:selected', this).val() == 'all') {
$("select[multiple] option").prop("selected", "selected");
}
})
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
Try this
try below
$('#sendto option[value="all"]').on('click',function(){
$('#sendto').find('option').attr('selected','selected');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
$('option[value="all"]').on('click',function(){
$(this).parent().find('option').attr('selected','selected');
$(this).removeAttr('selected');
});
I have a dropdown list. However i want to set a default based on user selection. Therefore the default value is not consistent. What can i do to achieve this? I have set $country = $_POST['country']; as user selection.
<td>Country:</td>
<td colspan="2"><select name="country">
<option value="93">93-Afghanistan</option>
<option value="355">355-Albania</option>
<option value="213">213-Algeria</option>
<option value="1-684">1-684-American Samoa</option>
<option value="376">376-Andorra</option>
<option value="244">244-Angola</option>
<option value="1-264">1-264-Anguilla</option>
<option value="672">672-Antarctica</option>
<option value="1-268">1-268-Antigua and Barbuda</option>
<option value="54">54-Argentina</option>
<option value="374">374-Armenia</option>
<option value="297">297-Aruba</option>
<option value="61">61-Australia</option>
</select>
To add on. There are 200 over options (I never list all down) so i hope to get a convenience way to achieve this
You can use 'selected' for relevant option
<option value="93" <?php if($country==93) echo "selected" ?> >93-Afghanistan</option>
<option value="355" <?php if($country==355) echo "selected" ?> >355-Albania</option>
like this add if conditon for each option.
Try using session for it.
The php code:
session_start();
$_SESSION['selectedCountry'] = $_POST['country'];
Then you can use JQuery to make dropdown selected:
$(document).ready(function(){
$(function() {
$("#country").val("<?php echo $_SESSION['selectedCountry'];?>");
});
})
Please try out this ..
HTML :-
<td>Country:</td>
<td colspan="2"><select id="country" name="country">
<option value="93">93-Afghanistan</option>
<option value="355">355-Albania</option>
<option value="213">213-Algeria</option>
<option value="1-684">1-684-American Samoa</option>
<option value="376">376-Andorra</option>
<option value="244">244-Angola</option>
<option value="1-264">1-264-Anguilla</option>
<option value="672">672-Antarctica</option>
<option value="1-268">1-268-Antigua and Barbuda</option>
<option value="54">54-Argentina</option>
<option value="374">374-Armenia</option>
<option value="297">297-Aruba</option>
<option value="61">61-Australia</option>
</select>
</td>
JQuery :-
$(document).ready(function(){
$(function() {
$("#country").val("<?php echo $_POST['country'];?>");
});
})
Try this...
<?php
(isset($_POST["country"])) ? $country = $_POST["country"] : $country=93;
?>
<form action='stackover.php' method='POST'>
<select id="country" name="country">
<option <?php if ($country == 93 ) echo 'selected' ; ?> value="93">93-Afghanistan</option>
<option <?php if ($country == 355 ) echo 'selected' ; ?> value="355">355-Albania</option>
<option <?php if ($country == 213 ) echo 'selected' ; ?> value="213">213-Algeria</option>
</select>
<input type="submit" value="Submit">
</form>
I have this peace of HTML code
<select id="country" name="country" onchange="updateState()">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
and im trying to update state select with JQuery ajax
<script type="text/javascript">
function updateState(){
var state = $('#country').val();
alert(state);
$.ajax(
{
type: "GET",
url: "../functions/selectstate.php",
data: { sta : state }
}).done(function( html )
{
$('#state').empty();
$('#state').append(html);
})
}
}
</script>
selectstate.php have this php code, i tested it and work fine
include_once('select.php');
include_once('cndb.php');
$sDB = new SelectDb();
$data = $sDB->selectStatesById($_GET['sta']);
foreach($data as $row)
{
echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}
I just can't see where is the problem. Thanks in advance
HTML
<select id="country" name="country">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
SCRIPT
<script type="text/javascript">
$(document).on('change','#country',function (){
var state = $('#country').val();
alert(state);
$.ajax(
{
type: "GET",
url: "../functions/selectstate.php",
data: { sta : state }
}).done(function( html )
{
//$('#state').empty();
//$('#state').append(html);
$('#state').html(html);
// you can use it insetead of the above two lines
})
//}<-- here is th problem remove this extra bracket
});
</script>
Try using the below approach. It might help
HTML Code:
<select id="country" name="country" onchange="updateState()">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<div id="stateDiv">
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
</div>
JavaScript Code:
...
...
.done(function( result )
{
$('#stateDiv').html(result);
})
...
...
PHP Code:
...
...
echo '<select id="state" name="state">';
foreach($data as $row)
{
echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}
echo '</select>';
...
...
I am developing a website using CI, PHP, JQuery. I have a dropdown menu. When I try to get the value using JQuery, the result always 0. Here is my code.
html:
<div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
<option value="0">PILIH SATU</option>
<option value="1">ACURA</option>
<option value="2">ALFA ROMEO</option>
<option value="3">ASTON MARTIN</option>
<option value="4">AUDI</option>
<option value="5">BENTLEY</option>
<option value="6">BERTONE</option>
<option value="7">BIMANTARA</option>
<option value="8">BMW</option>
<option value="9">BUGATTI</option>
<option value="10">BUICK</option>
<option value="11">CADILLAC</option>
<option value="12">CHANA</option>
<option value="13">CHERY</option>
<option value="14">CHEVROLET</option>
<option value="15">CHRYSLER</option>
<option value="17">CITROEN</option>
<option value="18">CODA</option>
<option value="19">DAEWOO</option>
<option value="20">DAIHATSU</option>
<option value="21">DAIMLER</option>
<option value="22">DATSUN</option>
<option value="23">DODGE</option>
<option value="24">DYNA</option>
<option value="25">FERRARI</option>
<option value="26">FIAT</option>
<option value="27">FORD</option>
<option value="28">FOTON</option>
<option value="29">GREELY</option>
<option value="30">GMC</option>
<option value="31">GREAT WALL</option>
<option value="32">HAGLER</option>
<option value="33">HINO</option>
<option value="34">HOLDEN</option>
<option value="35">HONDA</option>
<option value="36">HUMMER</option>
<option value="37">HYUNDAI</option>
<option value="38">INFINITI</option>
<option value="39">ISUZU</option>
<option value="40">JAGUAR</option>
<option value="41">JEEP</option>
<option value="42">KIA</option>
<option value="43">KTM</option>
<option value="44">LAMBORGHINI</option>
<option value="45">LAND ROVER</option>
<option value="46">LEXUS</option>
<option value="47">LIGIER</option>
<option value="48">LOTUS</option>
<option value="49">MASERATI</option>
<option value="50">MAYBACH</option>
<option value="51">MAZDA</option>
<option value="52">MCLAREN</option>
<option value="53">MERCEDES-BEN</option>
<option value="54">MINI</option>
<option value="55">MITSUBISHI</option>
<option value="56">MORGAN</option>
<option value="57">NISSAN</option>
<option value="58">OPEL</option>
<option value="59">PEUGEOT</option>
<option value="60">PORSCHE</option>
<option value="61">PROTON</option>
<option value="62">RANGE ROVER</option>
<option value="63">RENAULT</option>
<option value="64">ROLLS-ROYCE</option>
<option value="65">SAAB</option>
<option value="66">SKODA</option>
<option value="67">SMART</option>
<option value="68">SSANGYONG</option>
<option value="69">SUBARU</option>
<option value="70">SUNBEAM</option>
<option value="71">SUZUKI</option>
<option value="72">TATA</option>
<option value="73">TIMOR</option>
<option value="74">TOYOTA</option>
<option value="75">TRIUMPH</option>
<option value="76">VAUXHALL</option>
<option value="77">VOLKSWAGEN</option>
<option value="78">VOLVO</option>
<option value="79">WRANGLER</option>
</select></div>
JQuery:
$('select[name="brand"]').change(function(){
var brand = $("select[name='brand']").val();
alert(brand);
$.ajax({
type: "POST",
url: '<?php echo site_url("ajax_data/getmodel"); ?>',
dataType: 'json',
data: { vehicle_class : '', vehicle_brand : brand },
success: function(data) {
// Clear all options from vehicle class select
$('select[name="model"] option').remove();
// Fill vehicle class select
$.each(data, function(i, j){
var row = "<option value=\"" + j.model_id + "\">" + j.model_name + "</option>";
$(row).appendTo('select[name="model"]');
});
}
});
});
What is wrong with my code actually? Thank you.
I've just put your code in to a text file (named test.html)...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
<option value="0">PILIH SATU</option>
<option value="1">ACURA</option>
<option value="2">ALFA ROMEO</option>
<option value="3">ASTON MARTIN</option>
: : :
<option value="77">VOLKSWAGEN</option>
<option value="78">VOLVO</option>
<option value="79">WRANGLER</option>
<script type="text/javascript">
$('select[name="brand"]').change(function(){
var brand = $("select[name='brand']").val();
alert( brand );
});
</script>
</body>
</html>
And the code works, perfectly in FireFox, Chrome and IE8.
Also, my mate says salam sejahtera. :o)
You're selecting with select[name=brand], which means you're trying to access
<select value="THIS_IS_WHAT_YOU_ARE_SELECTING">
but you want the selected option, so use
$('select[name=brand] option:selected').val();