I have the following php page with four dropdown list correctly populated with four differents mysql query.
I would populate Categories_2 through a query depending on CATEGORIES_1.c_id and the same nested for others dropdown.
Tried to call myFunction() onChange but it seems not working. I don't get the alert.
Does anyone know how I could do this? Any help would be much appreciated.
I know I have to use mysqli but it's an existing page and I will do it later.
<script>
var myDropdown=document.getElementsByName('cat1')[0];
function myFunction(){
alert('option changed : '+myDropdown.value);
}
</script>
<form enctype="multipart/form-data" method="post" action="import.php">
<label for="cat_name">Categories_1</label>
<select name = "cat1" onChange="myFunction()">
<?php
$s = mysql_query("SELECT * FROM `CATEGORIES_1`");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); } ?>
</select>
<br>
<label for="cat_nam">Categories_2</label>
<select>
<?php
$s = mysql_query("SELECT c_name FROM `CATEGORIES_2`");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>
</select>
<br>
<label for="cat_nae">Categories_3</label>
<select>
<?php
$s = mysql_query("SELECT c_name FROM `CATEGORIES_3`");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>
</select>
<br>
<label for="cat_ame">Categories_4</label>
<select>
<?php
$s = mysql_query("SELECT c_name FROM `CATEGORIES_4`");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); } ?>
</select>
You need to use ajax for that .. i hope this helps ..
JS
$(document).ready(function(){
$(document).on('change','#cat1',function(){
$.ajax({
cache: false,
url: 'getSecondSelect.php',
type: 'post',
data: 'input=' + $(this).val(),
success: function(data){
$('#cat2').html(data)
}
})
})
}
FORM
<form enctype="multipart/form-data" method="post" action="import.php">
<label for="cat_name">Categories_1</label>
<select id="cat1" name="cat1">
<?php
$s = mysql_query("SELECT * FROM `CATEGORIES_1`");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>'); }
?>
</select>
<br />
<label for="cat_name">Categories_2</label>
<select id="cat2" name="cat2"></select>
<br />
getSecondSelect.php
$s = mysql_query("SELECT c_name FROM `CATEGORIES_2` WHERE CATEGORIES_1.c_id='".$_POST['input']."'");
while($row = mysql_fetch_assoc($s)) {
echo ('<option value="0">' . $row['c_name'] . '</option>'); }
This is wrong method to call your dropdoen value
var myDropdown=document.getElementsByName('cat1')[0];
Your myFunction would be
<script>
function myFunction(){
var myDropdown=document.getElementById('cat1');
var myDropdowval= myDropdown[myDropdown.selectedIndex].value;
alert(myDropdowval);
}
</script>
here you assign id id="cat1" to your dropdown
<select name = "cat1" id="cat1" onChange="myFunction()">
<?php
$s = mysql_query("SELECT * FROM `CATEGORIES_1`");
while ($row = mysql_fetch_assoc($s)) {
echo ('<option value="' . $row['c_id'] . '">' . $row['c_name'] . '</option>');
}
?>
</select>
Use ajax call and different php pages to generate response based on AJAX call, send selected drop-down id as parameter to php page. and set that incoming response to your below drop-downs.
If your using Jquery then use
$('[name=cat1]').val()
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
alert($( "#myselect option:selected" ).text());
and here is working JSFIDDLE
Related
I have created two select boxes each have different country names with flag images using select2 plugin and values are fetching from Database below is the code.
JS CODE
$(".currencyconverterselect").select2({
templateResult: addflag,
templateSelection: addflag
});
function addflag(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span><img src="./img/flags/' + $(opt.element).attr('data-country-code') + '.png" class="userPic" /> ' + $(opt.element).text() + '</span>'
);
return $opt;
};
HTML CODE
<label style="color:white">Currency from</label>
<select name="fromcurrency_cc" id="fromcurrency_cc" class="form-control charts_currency" style="width:100%" required="required">
<?php
$sql = "SELECT fc.country_id,fc.code,fc.name,cc.country_code AS countrycode FROM fx_currency fc LEFT JOIN fx_country cc ON fc.country_id = cc.id ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
if ($row['code'] == 'AED')
{ ?>
<option data-country-code='<?php echo $row['countrycode']; ?>' value="<?php echo $row['code']; ?><?php echo $row['countrycode']; ?>" selected>
<?php echo $row['name']; ?>(
<?php echo $row['code']; ?> )</option>
<?php } else { ?>
<option data-country-code='<?php echo $row['countrycode']; ?>' value="<?php echo $row['code']; ?><?php echo $row['countrycode']; ?>">
<?php echo $row['name']; ?>(
<?php echo $row['code']; ?> )</option>
<?php }}
} else {
echo "0 results";
}
?>
</select>
I have also created a button below is the code
</i>
I want to swap the value of FROM currency to TO Currency and vice versa by clicking the button.
I have tried below code
$("#swapvalues_btn1").on('click', function() {
var pickup = $('#fromcurrency_cc').val();
$('#from').val($('#tocurrency').val());
$('#to').val(pickup);
});
Select2 will listen for the change event on the that it is attached to. If you make any external changes that need to be reflected in Select2 (such as changing the value).
Just use below code
$("#swapvalues_btn1").on('click', function() {
var fromcurrency = $('#fromcurrency').val();
var tocurrency = $('#tocurrency').val();
$('#fromcurrency').val(tocurrency).trigger('change');
$('#tocurrency').val(fromcurrency).trigger('change');
});
For More follow the link
https://select2.github.io/options.html#events
I do have a problem with two dropdown boxes on one page. Cause I have to work without a submit I use the "onblur=document.getElementById.submit" in the "". This works fine but only for one dropdown box. Using the same(equal) code for both forms will result in destroying the entries of form1 when selecting an item in form2 and visa verse.
Form-1:
<form id="formunit" name="formunit" method="post" action="" >
<select name="cbo_unit" required="required" form="formunit" style="width:100pt" onblur="document.getElementById('formunit').submit();">
<option value="0">--select--</option>
<?php
if ($_POST["cbo_unit"] == "MH") {
echo "<option value=\"MH\" selected=\"selected\">Motorhome</option>";
} else {
echo "<option value=\"MH\">Motorhome</option>";
}
if ($_POST["cbo_unit"] == "RT") {
echo "<option value=\"RT\" selected=\"selected\">Racetruck</option>";
} else {
echo "<option value=\"RT\">Racetruck</option>";
}
?>
</select>
<?php
if(isset($_POST['cbo_unit']) && $_POST['cbo_unit'] > '') {
$unit = $_POST['cbo_unit'];
}
?>
</form>
Form-2:
<?php
fc_opendb("1","something",$connect);
$dbtable = "course";
$result = mysqli_query($GLOBALS["connect"],"SELECT * FROM " . $dbtable . " WHERE blocked = 'no' ORDER BY matchcode ASC");
?>
<form id="formcourse" name="formcourse" method="post" action="" >
<select name="cbo_course" required="required" form="formcourse" style="width:130pt" onblur="document.getElementById('formcourse').submit();">
<option value="0">--select--</option>
<?php
while ($row = mysqli_fetch_assoc($result)) {
if ($row['matchcode'] == $_POST['cbo_course']) {
$selected = "selected";
} else {
$selected = "";
}
echo '<option value="' . $row['matchcode'] . '"' . $selected . '>' . utf8_encode($row['name']) . ' - ' . utf8_encode($row['place']) . '</option>'."\n";
}
?>
</select>
<?php
if(isset($_POST['cbo_course']) && $_POST['cbo_course'] > '') {
$course = $_POST['cbo_course'];
}
mysqli_close($GLOBALS["connect"]);
?>
</form>
I'm going a little nuts here. I know this has been answered a few times before but I can't seem to get it. I must be missing something very obvious.
I need the options of the second select input to be dynamically populated from a DB based on selection of the 1st select input. I have tested the getShowByBand.php code and it produces the intended results. My guess is the problem lies in the javascript file. Please take a look at my code and see if you can help.
testForm.php
<form role="form">
<div class="well" id="generalIDRows">
<div class="row">
<div class="col-md-6 padding-top-10">
<div class="form-group">
<label for="band">Choose Band:</label>
<select id="band" name="band" class="form-control">
<option value="">Band Name</option>
<?php
$sql = "SELECT bandID,bandName FROM Band";
$bandq = mysqli_query($link, $sql);
while($row = mysqli_fetch_array($bandq))
{
$band_ID=$row["bandID"];
$band=$row["bandName"];
echo '<option value="' . $band_ID . '">' . $band .'</option>';
}
?>
</select>
<script src="js/getShowByBand.js" type="text/javascript"></script>
</div>
</div>
<div class="col-md-6 padding-top-10">
<div class="form-group">
<label for="show">Choose Show:</label>
<select id="show" name="show" class="form-control">
<option value="">--Select Show--</option>
</select>
</div>
</div>
</div>
</div>
</form>
getShowByBand.js
$(document).ready(function()
{
$(".band").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "womhScripts/getShowByBand.php",
data: dataString,
cache: false,
success: function(html)
{
$(".show").html(html);
}
});
});
});
getShowByBand.php
<?php
$link=mysqli_connect("localhost","womhproduction","Derkadeepd0ng","womh");
if (mysqli_connect_errno())
echo "failed to connect" . mysqli_connect_error();
if($_POST)
{
$id=$_POST['id'];
$showSQL = mysqli_query($link,"SELECT showID FROM Act WHERE bandID =" . $id . ";");
$showResults = mysqli_num_rows($showSQL);
if($showResults > 0)
{
echo "<option selected disabled>--Select show--</option>";
while($showRow = mysqli_fetch_array($showSQL))
{
$showID= $showRow['showID'];
$showNameSQL = mysqli_query($link, "SELECT showName FROM Shows WHERE showID=". $showID . ";");
$showNameResults = mysqli_num_rows($showNameSQL);
if($showNameResults > 0)
{
while($showNameRow = mysqli_fetch_array($showNameSQL))
{
$showName = $showNameRow['showName'];
echo '<option value= "' . $showID . '">' . $showName . '</option>';
}
}
}
}
}
?>
Use $("#band").change... dot is used to select class.
try to change this $(".band") to this $("#band") on your javascript you are calling on change for the class you should do it by id.
i have some code this code is working ,, i a use it in codeigneter here my code
this my db
====================
= id = type = name =
====================
= 1 = 3 = adam =
= 2 = 2 = julia =
====================
that my database, name is customer
and this my controler
{ $data['customer'] = $this->usermodel->get_all_customer();
$this->template->set('title','Tambah User Baru | MyWebApplication.com');
$this->template->load('template','indoprisma/pemesanan',$data);
}
and my model
function get_all_customer()
{
$this->db->from('customer');
return $this->db->get();
}
and this my view
<?php
$jsArray = "var prdName = new Array();\n";
echo '<select name="id_cus" onchange="changeValue(this.value)">';
echo '<option>-------</option>';
foreach($customer->result() as $row)
{
$array_customer[$row->id] = $row->id;
echo "<option value = ".$row->id.">".$row->id."</option>";
$jsArray .= "prdName['" . $row->id . "'] = {name :'" . addslashes($row->name) . "' ,type :'" . addslashes($row->type) . "'};\n";
}
echo '</select>';
?>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('name').value = prdName[id].name;
document.getElementById('type').value = prdName[id].type;
};
</script>
<input name="name" type="text" id="name" size="20" readonly="readonly" />
<input name="type" type="text" id="type" size="20" readonly="readonly" />
i want to change that combobox into a input box , help me please
I see the problems here, you're trying to create JavaScript through PHP, then embed it to a script, and on top of that, creating objects you don't really need.. many problems here. You should never try to create JavaScript through PHP. This is what I would do to fix it:
Your model should return a result(). So you need to change it like this:
function get_all_customer() {
$this->db->from('customer');
$q = $this->db->get();
return $q->result(); ///change
}
Your view should be more HTML, and the least amount of PHP possible. Also, use PHP's function, in this case, json_encode() will come in handy. Redo it like this:
<select name="id_cus" onchange="changeValue(this.value)">
<option>-------</option>
<?php foreach ($customer as $row) { ?>
<option value='<?= json_encode($row) ?>'><?= $row->id ?></option>
<?php } ?>
</select>
<input name="name" type="text" id="name" size="20" readonly="readonly" />
<input name="type" type="text" id="type" size="20" readonly="readonly" />
Lastly, your Javascript like this:
<script>
function changeValue(value) {
var obj = JSON.parse(value);
document.getElementById('name').value = obj.name;
document.getElementById('type').value = obj.type;
}
</script>
Let me know if this works for you.
I hope my way can help you, here's how I solve the same case as you:
For controllers, yours is right.
for the model, I think it should be like this
function get_all_customer()
{
$hsl = $this->db->query("Select * FROM customer")->result();
return $hsl
}
For coding views, I think like this
<select name="id_cus" onchange="changeValue(this.value)">
<option value="0">-------</option>
<?php
$jsArray = "var prdName = new Array();\n";
foreach($customer as $row)
{
echo "<option value = ".$row->id.">".$row->id."</option>";
$jsArray .= "prdName['" . $row->id . "'] = {namee :'" . addslashes($row->name) . "' ,typee :'" . addslashes($row->type) . "'};\n";
}
?>
</select>
<input name="name" type="text" id="name" size="20" readonly="readonly" />
<input name="type" type="text" id="type" size="20" readonly="readonly" />
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('name').value = prdName[id].namee;
document.getElementById('type').value = prdName[id].typee;
};
</script>
Hopefully my opinion can help your coding :)
Selamat pagi.
By the way, why did you need to convert it into an input?
Is that combobox is retrieving a many data record?
If yes, then you must not change it into an input.
If you want it, try this :
$jsArray = "var prdName = new Array();\n";
$customer->result() as $row;
$array_customer[$row->id] = $row->id;
echo "<input type='text' name='id_cus' onchange='changeValue(this.value)' value = " . $row->id . ">";
$jsArray .= "prdName['" . $row->id . "'] = {name :'" . addslashes($row->name) . "' ,type :'" . addslashes($row->type) . "'};\n";
I'm stuck with trying to process multiple mySQL updates at the same time. I have 4 select/optiion boxes that pull entries from a db table. I want to be able to update the db onChange using JQuery. I have managed to get this working with one select module but as soon as I add more it spins out. I know that the main bad code is in db_submit.php but really not sure how else to write it. I know there has to be a cleaner way to do this.
FORM PAGE- INPUT.PHP
<html>
<head>
<script src="../assets/scripts/jquery-2.0.3.min.js"></script>
<script>
function updateDb() {
$.post("db_submit.php", $("#console").serialize());
}
</script>
<?php
include 'db_connect.php';
?>
</head>
<body>
<form id="console">
<select id="frame1" name="frame1" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame2" name="frame2" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame3" name="frame3" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame4" name="frame4" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
</form>
</body>
<?php
mysqli_close($con);
?>
</html>
PROCESSING PAGE- DB_SUBMIT.PHP
<?php
include 'db_connect.php';
$frame1= mysqli_escape_String($con,$_POST['frame1']);
$frame2= mysqli_escape_String($con,$_POST['frame2']);
$frame3= mysqli_escape_String($con,$_POST['frame3']);
$frame4= mysqli_escape_String($con,$_POST['frame4']);
$query = "UPDATE frameContent SET url='".$frame1."' WHERE name='frame1'";
$query = "UPDATE frameContent SET url='".$frame2."' WHERE name='frame2'";
$query = "UPDATE frameContent SET url='".$frame3."' WHERE name='frame3'";
$query = "UPDATE frameContent SET url='".$frame4."' WHERE name='frame4'";
mysqli_query($con,$query);
mysqli_close($con);
?>
I know that constantly setting the $query variable is causing problems but I'm not sure how else I can do this in the one page. Any help would be much appreciated.
Thanks!
First of all make sure the $queries are concatenated, then terminate each query with a semi-colon. After these you can use mysqli_multi_query to execute all four updates in one call from php.
$query = "UPDATE frameContent SET url='".$frame1."' WHERE name='frame1';";
$query .= "UPDATE frameContent SET url='".$frame2."' WHERE name='frame2';";
$query .= "UPDATE frameContent SET url='".$frame3."' WHERE name='frame3';";
$query .= "UPDATE frameContent SET url='".$frame4."' WHERE name='frame4';";
mysqli_multi_query($con,$query);
I think this might help :) but there's just a little changes within your codes:
<html>
<head>
<script src = "js/jquery-1.10.1.js"></script>
<script>
function updateDb()
{
// this var id will store all your 4 combobox values in an array
var id = [{val1: $("#frame1").val()},
{val1: $("#frame2").val()},
{val1: $("#frame3").val()},
{val1: $("#frame4").val()}];
//this .post will submit all data to db_submit.php
$.post("db_submit.php",{id:id}, function(data)
{
alert(data);
});
</script>
<?php
include 'db_connect.php';
?>
</head>
<body>
<select id="frame1" name="frame1">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame2" name="frame2">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame3" name="frame3">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame4" name="frame4">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<input type="button" value="Submit" onClick="updateDb()"/>
</body>
<?php
mysqli_close($con);
?>
</html>
And in your DB_SUBMIT.PHP
<?php
include 'db_connect.php';
$frame1= mysqli_escape_String($_POST['id'][0]['val1']);
$frame2= mysqli_escape_String($_POST['id'][1]['val1']);
$frame3= mysqli_escape_String($_POST['id'][2]['val1']);
$frame4= mysqli_escape_String($_POST['id'][3]['val1']);
$query = mysqli_query("UPDATE frameContent SET url='$frame1' WHERE name='frame1'");
$query = mysqli_query("UPDATE frameContent SET url='$frame2' WHERE name='frame2'");
$query = mysqli_query("UPDATE frameContent SET url='$frame3' WHERE name='frame3'");
$query = mysqli_query("UPDATE frameContent SET url='$frame4' WHERE name='frame4'");
echo "Data was Successfully updated";
mysqli_close($con);
?>
I just add a button there for convenience, but if you dont want it just delete it and put back the onChange on every combocboxes that you have :)