I have a problem in hiding a list menu generated dynamically with php. My browser didn't hide it. I am using Firefox; the code is like this:
<div id="groupstd">
<br />
<select style="text-align:center;" name="std3">
<option value="Select" selected="selected">Please Select Student.no#3</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
<div id="grpstd">
<br />
<select style="text-align:center;" name="std4" id="std4">
<option value="Select" selected="selected">Please Select Student.no#4</option>
<?php
$result=Connect();
if($result>0)
{
while($row = mysql_fetch_array($result))
{
echo '<option value=$row[\'Roll#\'].\'i-\'.$row[\'Batch\']>$row[\'Roll#\'].\'i-\'.$row[\'Batch\']</option>';
}
}?>
</select>
</div>
I am using JQuery to hide like this:
$(document).ready(function()
{
$('#grpstd').hide();
$('#groupstd').hide();
});
try doing this after the dom is ready as using this:
$(document).ready(function() {
$('#grpstd, #groupstd').hide();//using two elements using one statement
});
When are you trying to hide the divs? You will need to wait until at least the document is ready:
$(document).ready(function() {
$('#grpstd').hide();
$('#groupstd').hide();
});
Did you try this?
$(document).ready(function() {
$('#grpstd, #groupstd').hide();
});
or
$(function() {
$('#grpstd, #groupstd').hide();
});
Related
I have an issue. I need to set the select value as text in the select box using jQuery but unable to do it.
<select name="countryCode" class="chosen-select" id="countryCode" required>
<?php foreach ($countrydata as $key => $value) {
if ($value['con_code']=='IN') {
$select='selected';
}else{
$select='';
}
?>
<option data-text="<?php echo $value['country']; ?>" value="<?php echo $value['dial_code']; ?>" <?php echo $select; ?>><?php echo $value['country']; ?></option>
<?php } ?>
</select>
My script part is given below.
$('#countryCode').find(':selected').html($('#countryCode').find(':selected').attr('value')); // already changed onload
$('#countryCode').on('change mouseleave', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
$('#countryCode option:selected').html($('#countryCode option:selected').attr('value'));
$(this).blur();
});
$('#countryCode').on('focus', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
});
What I need is that when the user selects any text, it's value will be shown to the user. In my code it's not happening like this.
1st: a little optimization of your JS :
$('#countryCode option:selected').html($(this).val());// already changed onload
Now, how to select an option using JS :
$(function() {
var $sel = $('.chosen-select');
$('#exists').click(function() {
$sel.val('option3');
console.log($sel.val());
});
$('#disabled').click(function() {
$sel.val('option2');
console.log($sel.val());
});
$('#noExist').click(function() {
$sel.val('option5');
console.log($sel.val());
});
$sel.on('change', function() {
console.log($sel.val());
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="exists">Select 3rd option</button>
<button id="disabled">Select disabled option</button>
<button id="noExist">Select inexistant option</button>
<select class="chosen-select">
<option>option1</option>
<option disabled>option2</option>
<option>option3</option>
<option selected>option4</option>
</select>
<button onclick="console.clear();">X</button>
As you can see, only existant and not disabled options can be selected.
should be something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('#countryCode').on('change', function(){
var val = $(this).val();
$(this).find("option").each(function(){
$(this).text($(this).attr("data-text"));
});
$(this).find(":selected").text(val);
}).trigger("change");
});
</script>
<select id="countryCode" class="chosen-select">
<option data-text="A Text" value="A value">A Text</option>
<option data-text="B Text" value="B value">B Text</option>
<option data-text="C Text" value="C value" selected>C Text</option>
</select>
hi i'm using select2 to style my dependent dynamic dropdown list on my php file, the problem is when i select a value from 1st dropdown to fetch data from mysql DB to 2nd dropdown list it goes to it's default style so i need some solution to solve the problem here is my files.
select2 script:
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
index.php:`
<form name="form1" action="test.php" method="post">
<table>
<tr>
<td>
<select name="brand" id="branddd" class="js-example-basic-single" required>
<option disabled selected required >brand</option>
<?php
$res=mysqli_query($link,"select * from brand");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>
<select name="model" id="model" class="js-example-basic-single" required>
<option disabled selected required >model</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="submit"></td>
</tr>
</table>
</form>
script to fetch DB values:
<script type="text/javascript">
function change_brand()
{
var xmlhttp=new XMLHttpRequest () ;
xmlhttp.open("GET","ajax.php?brand="+document.getElementById("branddd").value,false) ;
xmlhttp.send(null) ;
document.getElementById("model").innerHTML=xmlhttp.responseText ;
}
$(function(){
$('#branddd').on('change',function(){
this.value && // if value!="" then call ajax
$.get('ajax.php',{brand:this.value},function(response){
$('select[name="model"]').html(response);
});
});
});
</script>
ajax.php:
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link,"test_db");
$brand=$_GET["brand"];
if($brand!="")
{
$res=mysqli_query($link,"select * from model where brand_id=$brand");
echo "<select>";
while($row=mysqli_fetch_array($res))
{
echo "<option>"; echo $row["name"]; echo "</option>";
}
echo "</select>";
}
?>
This is your styled select element:
<select name="model" id="model" class="js-example-basic-single" required>
You need to add the name, id, and class attributes to your PHP echo. Something like this:
echo "<select name=\"model\" id=\"model\" class=\"js-example-basic-single\" required>";
But a much better way would be to not write out a new select element and replace it with the html function. Instead, output the data from your PHP page as a JSON object, then add those options to the select element.
JSON object:
{
"option1": "Data A",
"option2": "Data B",
"option3": "Data C"
}
JavaScript:
function change_brand() {
$.ajax({
url: "ajax.php?brand="+document.getElementById("branddd").value,
dataType: "json",
success: function(data) {
var name, select, option;
select = document.getElementById('model');
// Clear the old options
select.options.length = 0;
// Load the new options
for (name in data) {
if (data.hasOwnProperty(name)) {
select.options.add(new Option(data[name], name));
}
}
}
});
}
My goal is to show a second "select" in a "div" with options depending on the selection made by the user on the first "select".
The first "select" is a list of regions, while the second is the list of provinces in the forementioned region.
The function 'change' should update the div 'province', passing a value to another php file used for determining the provinces, with the second select but that doesn't happen.
Main page:
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
function change(value) {
$('province').load('select.php?id='+ value);
}
</script>
<body>
<div>
<select onchange="change.call(this.value)">
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
Script for updating:
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
for($i=1;$i<(count($vector)+1);$i++)
{
$n=key($vector)
if($n==$i)
{
echo "<select>";
$content=current($vector);
for($k=0;$k<count($content);$k++)
{
echo "<option>".$content[$k]."<option>";
}
echo "</select>";
break;
}
else
{
next($vector);
}
}
}
?>
You're missing the id selector # in :
$('#province').load('select.php?id='+ value);
Hope this helps.
function change(_this) {
console.log(_this.value)
$('#province').load('select.php?id='+ _this.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select onchange="change(this)">
<option value="0"></option>
<option value="1">Abruzzo</option>
<option value="2">Basilicata</option>
<option value="3">Calabria</option>
</select>
</div>
<div id="province"></div>
You are missing the # from the id selector and the ; from $n=key($vector) in your PHP file used for update. Also, if you tagged your question jQuery you should use it. Inline onchange is deprecated and I will recommend you NOT to use it anymore.
Change this:
$n=key($vector)
to this:
$n=key($vector);
jQuery code should look like this:
$('select').on('change', function() {
var selected = $(this).find(":selected").val();
$('#province').load('send.php?id=' + selected);
});
And HTML like this:
<div>
<select name='select'>
<?php for($i=0;$i<count($region);$i++) { echo "<option value=".$i. ">".$region[$i]. "</option>"; } ?>
</select>
</div>
<div id="province"></div>
**Main page:**
<?php
$region= array("","Abruzzo", "Basilicata", "Calabria");
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#region").change(function(){
var value=$(this).val();
$("#province").load('select.php?id='+value);
});
});
</script>
<body>
<div>
<select id="region" >
<?php
for($i=0;$i<count($region);$i++)
{
echo "<option value=".$i.">".$region[$i]."</option>";
}
?>
</select>
</div>
<div id="province"></div>
</body>
</html>
**Script for updating:**
<?php
$vector=array(1 =>array("CH","AQ","PE","TE"),
2 => array("MT","PZ"),
3 => array("CZ","CS","KR","RC","VV"));
$id = $_GET['id'];
if($id==0)
{
echo "";
}
else{
if(array_key_exists($id,$vector))
{
echo "<select>";
for($i=0;$i<(count($vector[$id]));$i++)
{
echo "<option>".$vector[$id][$i]."</option>";
}
echo "</select>";
}
}
?>
My Code:
select name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php
}
?>
</select>
When I select the dropdown list I want to to redirect different functions to load different pages, like:
<option value="<?php echo site_url('Controller_n/function'><?php echo$act;?></option>
Is this possible?
Check this sample:
<select id="accttype" name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo $act ?>"><?php echo $act ?></option>
<?php } ?>
</select>
<script>
$(function(){
// bind change event to select
$('#accttype').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
Give a id to your select like below
<select id="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype; ?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php } ?>
</select>
// add jquery library if you not added already
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#accttype').change(function(){
window.location = $(this).val();
});
});
</script>
Hope it will help you.
I am using a selectbox to display the list of "enterpirses" from the database. But the onchange event is not triggering. But when i manually once put the value of querystring then it starts working. I dont understand why it is happening.
I am new to javascript and php, kindly suggest me the solution to this.
<select id="enterprisebox" onchange="javascript:valueselect()" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
and my javascript is--
function valueselect()
{
var i = document.getElementById('enterprisebox');
var p = i.options[i.selectedIndex].value;
//alert(p);
window.location.href = "channelinformation.html?selected="+p;
}
onchange="javascript:valueselect()" replace with onchange="valueselect(this.value);"
function valueselect(myval)
{
window.location.href = "channelinformation.html?selected="+myaval;
}
You Can Use Directly
onchange="window.location='channelinformation.html?selected='+myaval"
Make life easier and use jQuery:
$(document).ready(function () {
$('#enterprisebox').change(function () {
window.location.href = "channelinformation.html?selected="+ $(this).val();
});
});
Try this,
<select id="enterprisebox" onchange="javascript:valueselect(this)" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
<script>
function valueselect(sel) {
var value = sel.options[sel.selectedIndex].value;
window.location.href = "channelinformation.html?selected="+value;
}
</script>