I want to load a page on select on change event. But it aint displaying the page. the content on the page is just: this is bank/ this is cash.
<!DOCTYPE html>
<html>
<select id = "ddl" onchange="changeSheet()">
<option value = "bank">Bank Statement</option>
<option value = "cash">Cash Book</option>
</select>
<div id = "sheet">
</div>
<script>
function changeSheet()
{
document.getElementById('sheet').innerHTML = "";
var e = document.getElementById("ddl");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 'bank')
{
$("#sheet").load("bank.php");
}
else
{
$("#sheet").load("cash.php");
}
}
</script>
This is the right way to do that using JQuery: DEMO
<!DOCTYPE html>
<html>
<select id = "ddl" onchange="changeSheet()">
<option value = "bank">Bank Statement</option>
<option value = "cash">Cash Book</option>
</select>
<div id = "sheet"></div>
<script>
$(document).ready(function(){
$("#ddl").change(function(){
if($(this).val() === "bank")
$("#sheet").load("bank.php");
else
$("#sheet").load("cash.php");
});
});
</script>
Related
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.
`<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select> </p>`
<p>Select A Country
<select name="country" id="country">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select> </p>
I have two select boxes 1)state[] 2) country . What is want is that "If the selected country is not USA, disable the multi-select box which consists all the USA states". Any help is appreciated
Add this Javascript to your code:
<script type="text/javascript">
<!--
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
//-->
</script>
You could do the following if you have jQuery:
$('#country').change(function () {
if($('#country').val() != "USA") {
$('#state').attr('disabled', 'disabled');
}
else {
$('#state').removeAttr('disabled');
}
});
Or if you are using plain JavaScript:
var elem = document.getElementById("country");
elem.onchange = function () {
if(elem.options[e.selectedIndex].value != "USA") {
document.getElementById('state').disabled = "disabled";
}
else {
document.getElementById('state').removeAttribute("disabled");
}
}
This will disable the state combo box when the country combo box contains a value that is not "USA". When the selected country is "USA", it will remove the disabled attribute and make it usable again.
Hope this helps.
I'm not very experienced at JS (PHP is my strong side) so I need your help about something.
I have a script with 2 drop down menus that shows hidden content. I'm using this example Change content based on select dropdown id in jquery
When I execute a PHP script, it checks for errors and if there are some it will return the user to the form. The problem with this is that it will not show the hidden content. I can set some sort of PHP vars and put them in the input like $selected_one = 'selected="selected"' and the dropdown menus will have the right selection, but the jQuery function does not work like that. I think it puts some sort of class that shows and hides the content.
I can't quite put my finger on what's going on, so I need your help. Can any body give me a hint how to fix this?
Here's some code to make things visual
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
.list_publish, .list_news, option_value {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<?php
$selected_news = '';
$selected_review = '';
$selected_news_text = '';
$selected_news_video = '';
if(isset($_POST['submit_news_text'])){
$selected_news = 'selected="selected"';
$selected_news_text = 'selected="selected"';
$news_title = $_POST['news_title'];
// Checks blank forms and return error
if(empty($news_title)) {
$error_message = 'This field must not be empty!';
$proceed = false;
} else {
$proceed = true;
}
}
if($proceed){
// do stuff
echo 'do stuff';
} else {
?>
<form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
<select class="change_publish" name="publish_type" id="publish_type" style="width: 238px;">
<option value="publish_type" data-title="choose">Publishing...</option>
<option value="publish_news" data-title="news" <?php echo $selected_news ?>>Publish News</option>
<option value="publish_review" data-title="review" <?php echo $selected_review ?>>Publish Review</option>
</select>
<div class="list_publish publish_type">
</div>
<div class="list_publish publish_news">
<select class="change_news" name="news_type" id="news_type" style="width: 238px;">
<option value="news_type" selected="selected" data-title="choose">News Type</option>
<option value="news_text" data-title="text" <?php echo $selected_news_text; ?>>Text</option>
<option value="news_video" data-title="video"<?php echo $selected_news_video; ?>>Video</option>
</select>
<div class="list_news news_type">
</div>
<div class="list_news news_text">
<input name="news_title" type="text" id="news_title">
<input name="submit_news_text" type="submit" value="Publish" id="submit_news_text" />
</div>
<div class="list_news news_video">
> This function is not available at the moment.
</div>
</div>
<div class="list_publish publish_review">
> This function is not available at the moment.
</div>
</form>
<?php
echo $error_message;
}
?>
<script>
// дропдаун меню
$('.change_publish').change(function(){
var selected = $(this).find(':selected');
$('.optionvalue').fadeOut(function(){
$('.optionvalue').html(selected.html()).fadeIn()
.attr('class', 'optionvalue '+selected.val());
});
var count = $('.list_publish').length;
$('.list_publish').slideUp(function(){
if(!--count) {
$('.'+selected.val()).slideDown();
}
});
});
$('.change_news').change(function(){
var selected = $(this).find(':selected');
$('.optionvalue').fadeOut(function(){
$('.optionvalue').html(selected.html()).fadeIn()
.attr('class', 'optionvalue '+selected.val());
});
var count = $('.list_news').length;
$('.list_news').slideUp(function(){
if(!--count) {
$('.'+selected.val()).slideDown();
}
});
});
</script>
</body>
</html>
And here's a demo http://www.demirevdesign.com/public/form.php
Trigger the change event on document load, like here:
<script>
// дропдаун меню
$('.change_publish').change(function(){
var selected = $(this).find(':selected');
$('.optionvalue').fadeOut(function(){
$('.optionvalue').html(selected.html()).fadeIn()
.attr('class', 'optionvalue '+selected.val());
});
var count = $('.list_publish').length;
$('.list_publish').slideUp(function(){
if(!--count) {
$('.'+selected.val()).slideDown();
}
});
}).change(); // HERE THE CHANGE
$('.change_news').change(function(){
var selected = $(this).find(':selected');
$('.optionvalue').fadeOut(function(){
$('.optionvalue').html(selected.html()).fadeIn()
.attr('class', 'optionvalue '+selected.val());
});
var count = $('.list_news').length;
$('.list_news').slideUp(function(){
if(!--count) {
$('.'+selected.val()).slideDown();
}
});
}).change(); // HERE THE CHANGE
</script>
Why I do not get any printing on the screen (m1, m2 or m3)?
i.e. how can I pass JavaScript var to PHP Session.
<?php session_start(); ?>
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
<?php $_SESSION['color'] ?> = p;
<?php echo $_SESSION['color'] ?>;
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red
<OPTION VALUE="m2">Blue
<OPTION VALUE="m3">Green
</SELECT>
</FORM>
Thanks for any help.
And another one for the count... JavaScript runs on the user's computer, PHP runs on the server. View the page source (right-click, View Source) and you will see exactly why it doesn't work:
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
= p;
;
}
</script>
The only way to get JS variables into PHP is via a form (which I am using loosely to include AJAX).
Try this
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var e = document.getElementsByName("mylist")[0];
var p = e.options[e.selectedIndex].value;
sessionStorage.color = p;
document.write(p);
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red</OPTION>
<OPTION VALUE="m2">Blue</OPTION>
<OPTION VALUE="m3">Green</OPTION>
</SELECT>
</FORM>
</body>
</html>
index.php:
<script type="text/javascript">
var time = "OK then, let's do this!";
sessionStorage.setItem("time", time);
window.location.href = "test.php";
</script>
test.php
<script type="text/javascript">
var time = sessionStorage.getItem("time");
console.log(time);
<?php $abc = "<script>document.write(time)</script>"?>
</script>
<?php
echo $abc;
?>
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>