I have a form with this drop list
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?>>Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?>>Absent</option>
</select>
I want to change background color like this if Present is selected its green and when absent is selected its red.
Can someone please guide.
Regards,
actually you are setting selected data by getting value from php so everytime when the script loads it have to trigger the change event of the select box so that the latest color automatically get changed here is the snippet for you rest you can use PHP in option to echo selected;
$(document).ready(function() {
$('[name="status"]').trigger('change');
$('[name="status"]').change(function(){
if ($(this).val() == '1') {
$('#back_color').css('background-color','green');
} else if ($(this).val() == '2') {
$('#back_color').css('background-color','red');
}
}) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0">Select Color</option>
<option value="1" >Present</option>
<option value="2" >Absent</option>
</select>
<div id="back_color">dddd</div>
for some reasons i have removed php tags from your code but you can re-insert them now.
Regards
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<select name="status" class="form-control" style="width:100px; float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?>>Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?>>Absent</option>
</select>
<div id="back_color">dddd</div>
<script>
$(document).ready(function(){
$('[name="status"]').change(function(){
if ($(this).val() == '1') {
$('#back_color').css('background-color','green');
} else if ($(this).val() == '2') {
$('#back_color').css('background-color','red');
}
}) ;
});
</script>
You can do it with CSS
CSS:
.opt-absent.selected {
background-color: red;
}
.opt-present.selected {
background-color: green;
}
Just echo a class with php with your conditions
<select name="status" class="form-control" style="width:100px;float:left;">
<option value="0" <?php if($status == 0)echo 'selected="selected"';?>></option>
<option value="1" <?php if($status == 1)echo 'selected="selected"';?> class="opt-present <?php if($status == 1)echo 'selected';?>">Present</option>
<option value="2" <?php if($status == 2)echo 'selected="selected"';?> class="opt-absent <?php if($status == 2)echo 'selected';?>">Absent</option>
</select>
you can do this way by using only php:
<?php
error_reporting(E_ALL);
$val=$_POST['abprt'];
?>
<html>
<head>
<style type="text/css">
#colorChange
{
padding:20px;
<?php
switch($val)
{
case 'pre':
echo "background-color:green;";
break;
case 'abs':
echo "background-color:red;";
break;
default:
echo "background-color:white;";
}
?>
}
</style>
</head>
<body>
<div id="colorChange">
<form method="post" action="test3.php">
<select name="abprt" >
<option value="pre" >Presnt</option>
<option value="abs">Absent</option>
<input type="submit" name="submit">
</select>
</form>
</div>
</body>
</html>
or trigger submit using js while hiding the submit button..
or you can go for jquery, which will be a bit complicated..
Try with jquery -
$('.form-control').on('change', function() {
if ($(this).val() == 1) {
$(this).css('background-color', 'green');
} else if ($(this).val() == 2) {
$(this).css('background-color', 'red');
} else {
$(this).css('background-color', 'white');
}
})
Add the jquery library before applying it.
DEMO
May be this will help you.
<?php if($status == 1): ?>
<select name="status" class="form-control" style="width:100px; float:left;background-color:green;">
<option value="1" selected>Present</option>
<option value="2" >Absent</option>
<?php else: ?>
<select name="status" class="form-control" style="width:100px; float:left;background-color:red;">
<option value="1" >Present</option>
<option value="2" Selected>Absent</option>
<?php endif; ?>
</select>
Related
I have a registration form where I want to be able to get the account plan users have selected form another page and will autofill my form for account type.
The a href from the pricing site
signup.php?type=free
signup.php?type=pro
signup.php?type=plus
Code for the form in registration site
<form class="form-signin" action="pricing.php" method="get">
<div class="form-group">
<label for="type">Account Type</label>
<select class="form-control" id="type">
<option value="free">Free</option>
<option value="pro">Pro</option>
<option value="plus">Plus</option>
</select>
</div></form>
This will get the $_GET['type'] variable & set selected attribute for the drop down! You could also do it with jQuery (seen below)
<?php
if(isset($_GET['type'])){
$type = $_GET['type'];
}
?>
<form class="form-signin" action="pricing.php" method="get">
<div class="form-group">
<label for="type">Account Type</label>
<select class="form-control" id="type">
<option <?php if($type == 'free'){ echo "selected='selected'"; } ?> value="free">Free</option>
<option <?php if($type == 'pro'){ echo "selected='selected'"; } ?> value="pro">Pro</option>
<option <?php if($type == 'plus'){ echo "selected='selected'"; } ?> value="plus">Plus</option>
</select>
</div></form>
jQuery...
<?php if(isset($_GET['type'])){ ?>
<script>
$(document).ready(function(){
var type = "<?php echo $_GET['type'] ?>";
$("#type > option").each(function(){
if($(this).val() == type){
$(this).attr("selected", "selected")
}
})
})
</script>
<?php } ?>
How do I pass the id value to the function?
What I am doing is, When the user changes the dropdown then it will get the value of dropdown and also get the input value which is hidden inside foreach.
I tried from my side I am getting on change the value from the dropdown but how do I get the input value in the jquery? now I am getting the last value of the input field.
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
jquery
$('[id^="Duration"]').change(function () {
var a=$('input[id^="activeID"]').attr('id');// how to I display the input id here
alert(a);
var value = $('input[id^="activityID"]').val();// i tried this one as well
alert(value);
var end = this.value;
alert(end);//getting drodpown id value
});
You can put your input and select inside a div. When the dropdowns are changed, get the input sibling
<?php
$x=1;
foreach ($duration as $row) {
?>
<div>
//Your input and select here
</div>
<?php } ?>
<script>
$('[id^="Duration"]').change(function () {
var input = $($(this).siblings("input")[0]); // get the input element
var id = input.attr("id"); //id of the input
var value = input.val(); //value of the input
alert(value);
});
</script>
One thing I have observed in your code:
$x=1;
foreach ($duration as $row) {
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
}
You are not at all increasing $x anywhere and hence each and every hidden input tag is getting id = 'activeId1'
<?php
$x=1;
foreach ($duration as $row) {
?>
<input type="hidden" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" class="form-control DurationClass" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php } ?>
<script>
$('.DurationClass').change(function () {
var a=$('input[id^="activeID"]').attr('id');
var selectID=$(this).attr('id');
//alert(a);
var value = $(this).val(); // in loop every dropdown select current option value return
alert(value);
});
</script>
You can use onchange event in your HTML part of the code
$x=1;
foreach ($duration as $row) {?>
<input type="hidden" class="activeID" name="activeID" id="activeID<?php echo $x;?>" value="<?php echo $row->activity_name_id;?>">
<select name="Duration<?php echo $x;?>" onchange="myfunction();" class="form-control" id="Duration<?php echo $x;?>">
<option selected disabled >Select year</option>
<option value="12m" <?php if($row->Duration == '12m' ){ echo 'selected="selected"'; } ?>>1 Year</option>
<option value="6m" <?php if($row->Duration == '6m' ){ echo 'selected="selected"'; } ?>>6 months</option>
</select>
<div id="results<?php echo $x;?>"></div>
<?php $x++;}
Here is the function
function myfunction () {
alert($(this).parent()); //what are you getting
alert($(this).parent().find(".activeID").value()); //what are you getting?
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
};
$(".select").change(function(){
alert("Id of the select box is "+ this.id);
alert("Value of the select box is "+this.value );
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form>
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control select" id="Sell">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1-item">Select list sell item (select one):</label>
<select class="form-control select" id="Sell-item">
<option>car</option>
<option>bike</option>
<option>cycle</option>
<option>auto</option>
</select>
</div>
</form>
</div>
</body>
</html>
I'm having a hard time to fix and how can make my codes work well.
My textbox echo correctly while my dropdown box is not.
Can anyone help me and also clean my codes?
I wanna know how did you do it and can u please explain it to me.
Thank you so much.
index.php
<?php include 'test.php' ?>
<form method="post" action="index.php">
Textbox: <input type="text" name="txt1" value="<?php echo $txt1;?>">
Dropdown: <select name="drpdown1" value="<?php echo $drpdown1;?>">
<option></option>
<option value="1">Mark</option>
<option value="2">Extreme</option>
</select>
<input type="submit" name="btn1">
</form>
test.php
<?php
$txt1 = "";
$drpdown1 = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$txt1 = $_POST["txt1"];
$drpdown1 = $_POST["drpdown1"];
}
?>
You're not echoing the value of $drpdown1 correctly:
// this is wrong for a select:
<select name="drpdown1" value="<?php echo $drpdown1;?>">
// etc.
If you want to select automatically the previously selected value, you need to add the selected attribute:
<select name="drpdown1">
<option value="1" <?php if ($drpdown1 === '1') { echo "selected='selected'"; } ?>>Mark</option>
<option value="2" <?php if ($drpdown1 === '2') { echo "selected='selected'"; } ?>>Extreme</option>
// etc.
you have to know more about the dropdown box because you can not put the value inside the
<select value="<?php echo $drpdown1;?>">
you have to compare the value inside the option directly. example
<select name="drpdown1">
<?php
if($drpdown1 == ""){
?>
<option selected></option>
<option value="1">Mark</option>
<option value="2">Extreme</option>
<?php
}else if($drpdown1 == "1"){
?>
<option></option>
<option value="1" selected>Mark</option>
<option value="2">Extreme</option>
<?php
}
?>
</select>
I'm trying to take the value of SELECT option and use it in php variable, but can not figure out how. Would you assist me. Thank you.
Here is my code:
<select name="pcs" id="pcs">
<option class="option" value="8" selected class="selected">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="24+">над 24</option>
</select></br>
My goal is, after taking the value to make some calculation with it and show results. Thank you for the help.
This is one option:
<select name="pcs" id="pcs" onchange="this.form.submit()">
<option class="option" value="8" selected">8</option>
<option value="12" <?php if($pcs =="12") { echo "selected"; } ?>>12</option>
<option value="16" <?php if($pcs =="16") { echo "selected"; } ?>>16</option>
<option value="20" <?php if($pcs =="20") { echo "selected"; } ?>>20</option>
<option value="24" <?php if($pcs =="24") { echo "selected"; } ?>>24</option>
<option value="24+" <?php if($pcs =="24+") { echo "selected"; } ?>>над 24</option>
</select></br>
But I do not want the page to reload.
Using jQuery get the select box value on change or submit, pass the value to a php file via Ajax say calculation.php, Do the necessary calculation and echo the result in calculation.php. Get the value and display inside DIV or desired place.
EXAMPLE BELOW:
main_file.php
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pcs").on('change', function(){
var pcs_val = $(this).val();
$.ajax({
type: "POST",
url: "calculation.php",
data: { pcs: pcs_val},
success: function(theResponse) {
$('#outputDiv').html(theResponse);
}
});
});
});
</script>
<select name="pcs" id="pcs">
<option class="option" value="8" selected class="selected">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="24+">над 24</option>
</select></br>
<div id="outputDiv">--output here--</div>
calculation.php
<?php
$pcs = isset($_POST['pcs']) ? $_POST['pcs'] : '';
echo 'Calculation Result = '.$pcs;
?>
Try the following without using AJAX:
<?php
$pcs_array = array('8'=>'8','12'=>'12','16'=>'16','20'=>'20','24'=>'24','24+'=>'над 24');
$select_pcs = '';
if(isset($_POST['pcs']) && !empty(isset($_POST['pcs']))){
$select_pcs = $_POST['pcs'];
}
if(!empty($pcs_array)){
?>
<select name="pcs" id="pcs">
<?php
$option_count = 0;
foreach($pcs_array as $k=>$v){
if(!empty($select_pcs) && $select_pcs == $k){
echo '<option class="option" value="'.$k.'" selected class="selected">'.$v.'</option>';
}elseif($option_count == 0 && empty($select_pcs)){
echo '<option class="option" value="'.$k.'" selected class="selected">'.$v.'</option>';
}else{
echo '<option value="'.$k.'">'.$v.'</option>';
}
$option_count++;
}
?>
</select></br>
<?php
}
?>
I am trying to show another selection from when the user selects a selection from, for example if user selects products then another selection box appears with product types. Here is my code
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>TestPage</title>
<script type="text/javascript">
function ProductSelection() {
var selectedValue = document.getElementById("internet").value;
if(selectedValue == "Matchcode")
document.getElementById("Types").style.display = "";
if(selectedValue == "Kaleidoscope")
document.getElementById("Kaleidoscopes").style.display = "";
}
</script>
</head>
<body>
<table align="center">
<form id="form1" name="form1" method="post" action="process.php">
<tr><td>Products</td>
<td>
<select name="Products" id="Products" onChange="ProductSelection();">
<option>Select a product....</option>
<option value="Matchcode">Matchcode</option>
<option value="Nearcode">Nearcode</option>
<option value="Kaleidoscope">Kaleidoscope Plus</option>
<option value="Kaleidoscope">Matchcode Kaleidoscope</option>
</select>
</td>
</tr>
<tbody id="Types" style="display:none">
<tr><td>Type:</td>
<td><select name="Types" id="Types" title="Types">
<option value="UK">UK</option>
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="DNB">DNB</option>
<option value="Names">Names</option>
</select></td></tr></tbody>
<tbody id="Kaleidoscopes" style="display:none">
<tr><td>Type:</td>
<td><select name="Kaleidoscopes" id="Kaleidoscopes" title="Kaleidoscopes">
<option value="New Zealand">New Zealand</option>
</select>
</td></tr></tbody>
<tr><td>Computers:</td>
<td>
<select name="Computers" id="Computers" title="Computers">
<option value="QA-N1">QA-N1</option>
<option value="QA-N2">QA-N2</option>
</select>
</td></tr>
<tr>
<td>Keys:</td>
<td> <input name="Key" type="text" title="Key" />
<input type="submit" name="Save" id="Save" value="Save"/>
</td>
</tr>
</form></table>
</body>
</html>
I would change your script to be like this:
function ProductSelection(el) {
var selectedValue = el.value;
if(selectedValue == "Matchcode")
document.getElementById("Types").style.display = "";
if(selectedValue == "Kaleidoscope")
document.getElementById("Kaleidoscopes").style.display = "";
}
And change your input to be:
<select name="Products" id="Products" onChange="ProductSelection(this);">
That way, you have a reference to the element itself. Before you were trying to get an element with an ID of internet which didn't exist.
I think your after something like this
<select name="Products" id="Products" onChange="ProductSelection(this);">
function ProductSelection(element) {
var selectedValue = element.value
if(selectedValue == "Matchcode") {
document.getElementById("Types").style.display = "inline";
document.getElementById("Kaleidoscopes").style.display = "none";
//hide other elements that need to be hidden;
}
if(selectedValue == "Kaleidoscope") {
document.getElementById("Kaleidoscopes").style.display = "inline";
document.getElementById("Types").style.display = "none";
//hide other elements that need to be hidden;
}
if(selectedValue == "Nearcode") {
document.getElementById("Kaleidoscopes").style.display = "none";
document.getElementById("Types").style.display = "none";
//hide other elements that need to be hidden;
}
}