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;
}
}
Related
I have form inputs inside a table row which gets cloned on add new row button. I am trying to save all the rows in MySQL on clicking save button.
upon sending it through ajax to php I ony get only one value which is the default value before cloning.
The hmtl code:
<table role="table" class="striped table_view rowfy" id="user_table">
<tbody role="rowgroup">
<tr id="template" role="row">
<td role="cell">
<select name="module" class="browser-default mselect select module">
<option value="" class="validate" disabled selected>Select User Menu Module</option>
<?php echo modules(); ?>
</select>
</td>
<td role="cell">
<select name="create[]" class="browser-default mselect select create">
<option value="" class="validate" disabled selected>Create</option>
<option value="yes">No</option>
<option value="no">Yes</option>
</select>
</td>
<td role="cell">
<select name="edit[]" class="browser-default mselect select edit">
<option value="" class="validate" disabled selected>Edit</option>
<option value="yes">No</option>
<option value="no">Yes</option>
</select>
</td>
<td role="cell">
<select name="delete[]" class="browser-default mselect select delete">
<option value="" disabled selected>Delete</option>
<option value="yes">No</option>
<option value="no">Yes</option>
</select>
</td>
<td role="cell">
<select name="view[]" class="browser-default mselect select view">
<option value="" disabled selected>View</option>
<option value="yes">No</option>
<option value="no">Yes</option>
</select>
</td>
</tr>
</tbody>
</table>
jquery:
$(document).ready(function() {
var template = $('#template'),
id = 0;
$("#add-line").click(function() {
if(!template.is(':visible'))
{
template.show();
return;
}
var row = template.clone().append('<td><button class="btn btn-small btn btn-floating '
+ ($(this).is(":last-child") ?
'rowfy-addrow remove red">-' :
'rowfy-deleterow remove waves-effect waves-light red">-')
+'</button></td>');
//template.find(".mselect").val("");
row.attr('id', 'row_' + (++id));
template.after(row);
});
$('.form-fields').on('click', '.remove', function(){
var row = $(this).closest('tr');
if(row.attr('id') == 'template')
{
row.hide();
}
else
{
row.remove();
}
});
});
php code:
if(!empty($_POST['module'])){
$rowCount = count($_POST['module']);
for($i = 0; $i < $rowCount; $i++)
{
$module = clean($_POST['module'][$i]);
$edit = clean($_POST['edit'][$i]);
$view = clean($_POST['view'][$i]);
$create = clean($_POST['create'][$i]);
$del = clean($_POST['delete'][$i]);
echo $rowCount;
$sql = "INSERT INTO role_rights(rr_rolecode,rr_modulecode,rr_create,rr_edit,rr_delete,rr_view)
VALUES('$role', '$module','$create','$edit','$del','$view')";
$suc = mysqli_query($mysqli, $sql);
}
}
Below is the header format of data being sent:
module: PAGES
create[]: yes
edit[]: no
delete[]: yes
view[]: no
module: CATEGORIES
create[]: no
edit[]: no
delete[]: yes
view[]: no
module: ATTRIBUTES
create[]: no
edit[]: no
delete[]: no
view[]: no
Thanks guys, I have been able to figured out what the issue is.
I didn't add [] to module in the html.
Before:
<select name="module" class="browser-default mselect select module">
<option value="" class="validate" disabled selected>Select User Menu Module</option>
<?php echo modules(); ?>
</select>
after
<select name="module[]" class="browser-default mselect select module">
<option value="" class="validate" disabled selected>Select User Menu Module</option>
<?php echo modules(); ?>
</select>
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 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>
I want to display a number of textboxes in a form based on the selected option from a dropdown listbox.
For example, if user selects 1 then 1 textbox should be shown and if user selects 2 then 2 textboxes should be displayed. And I need to do it in PHP.
I found some answers using jQuery. Can we use jQuery inside PHP? If yes, then how?
Edit
#Edwin Alex
This is how my select option looks like.
<h2><u>DEPENDENT DETAILS</u></h2><br />
<table border="1" style="border-style:dotted" width="100%" id="dependenttable">
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td></tr>
<tr id="textboxDiv"></tr>
At the end of file inside <> these I have written your code.
You can use Jquery to get this. Try this,
HTML :
<tr><td>No of Dependent</td><td><select name="numDep" id="dropdown">
<option value="">Please Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></td>
</tr>
<tr id="textboxDiv"></tr>
Jquery :
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="textVal[]" value="" />');
}
}
});
});
</script>
Paste this code at the bottom of your page inside tag.
Your select box ID should be dropdown.
You need to have a div with an ID textboxDiv to place your generated textboxes.
I think you can do it easily with the help of JavaScript. Here is an example of it. Try it and modify it according to your requirement
<html>
<head>
<title>Select DIV to show</title>
<script type="text/javascript">
function show(obj) {
no = obj.options[obj.selectedIndex].value;
count = obj.options.length;
for(i=1;i<count;i++)
document.getElementById('myDiv'+i).style.display = 'none';
if(no>0)
document.getElementById('myDiv'+no).style.display = 'block';
}
</script>
</head>
<body>
<form name="myForm">
<select onChange="show(this)">
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
<div id="myDiv1" style="display:none"> <form>
<select>
<option value="0">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form></div>
<div id="myDiv2" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
<div id="myDiv3" style="display:none"><form><input type="text" ><br>
<input type="text"/><br>
<input type="submit"/></form></div>
</body>
</html>
In this example just change the code in "myDiv1", "myDiv2", "myDiv3". I think it will hep you.:)
i want to control the drop down box to control show or hide statement. I do like this but it seems it doesn't work, i have it working if im using radio button.
can help me with the code? which part am i wrong?
thank you.
$dbcnx = mysql_connect('localhost', 'root', '');
mysql_select_db('dbase');
if($_POST['gred'])$gred=$_POST['gred'];else $gred="";
<script language="JavaScript">
function funcHide(elemHide1,elemHide2,elemHide3)
{
document.getElementById(elemHide1).style.display = 'none';
document.getElementById(elemHide2).style.display = 'none';
document.getElementById(elemHide3).style.display = 'none';
document.getElementById(elemShow).style.visibility = 'visible';
}
function funcShow(elemShow1,elemShow2,elemShow3)
{
document.getElementById(elemShow1).style.display = 'block';
document.getElementById(elemShow2).style.display = 'block';
document.getElementById(elemShow3).style.display = 'block';
document.getElementById(elemShow1).style.visibility = 'visible';
document.getElementById(elemShow2).style.visibility = 'visible';
document.getElementById(elemShow3).style.visibility = 'visible';
}
</script>
<table>
<tr>
<td>Gred </td>
<td>:</td>
<td><select name="gred" id="gred">
<option value=""> </option>
<option value="A17" <?php if($gred=='A17')echo "selected";?> onClick="funcShow('box1', 'box2', 'box3');">A17</option>
<option value="A22" <?php if($gred=='A22')echo "selected";?>>A22</option>
<option value="A27" <?php if($gred=='A27')echo "selected";?>>A27</option>
</select>
</td>
</tr>
<tr>
<td>TK</td>
<td>:</td>
<td>
<select name="tk" id="tk">
<option value=""> </option>
<option value="01" <?php if($tk=='01')echo "selected";?>>01</option>
<option value="02" <?php if($tk=='02')echo "selected";?>>02</option>
<option value="03" <?php if($tk=='03')echo "selected";?>>03</option>
<option value="04" <?php if($tk=='04')echo "selected";?>>04</option>
<option value="05" <?php if($tk=='05')echo "selected";?>>05</option>
<option value="06" <?php if($tk=='06')echo "selected";?>>06</option>
</select>
<?} ?>
</td>
</tr>
<tr>
<td colspan="2" valign="top">Status</td>
<td valign="top">:</td>
<td>
<?php
$qry = "SELECT * from dtable where userid='".$USER->id."'";
$sql = mysql_query($qry);
$row = mysql_num_rows($sql);
if($row==0)
{
?>
<input type=radio name="status" <?php if($status=='retake') {?>checked="checked"<?php } ?> value="retake" onClick="funcShow('box1', 'box2', 'box3');">Retake<br /></tr> <tr>
<td colspan='2'>
<div id="box1" style="display: none;">Last Date <br> Latest Date<br>
</div></td>
<td><div id="box2" style="display: none;">: <br> : <br></div></td>
<td>
<div id="box3" style="display: none;">
<?php $rsu[lastdate] ?> <br> <?php $rsu[latestdate] ?>
</div>
</td>
don't put the onClick attribute onto the option tag. You should use onChange on the select tag and then pass in this.value. Then based on that value you can decide which "box" to show/hide. Just a simple example:
<script type="text/javascript">
function showHide(selValue){
switch(selValue){
case "A17":
//show/hide whatever box you want.
alert(selValue);
break;
default:
//do nothing
alert('nothing');
}
}
</script>
<select name="gred" id="gred" onChange="showHide(this.value);">
<option value=""> </option>
<option value="A17"<?php if($gred=='A17')echo "selected";?>>A17</option>
<option value="A22" <?php if($gred=='A22')echo "selected";?>>A22</option>
<option value="A27" <?php if($gred=='A27')echo "selected";?>>A27</option>
</select>
for now, as you can tell, it just alerts some values. But it is easy to change.
Use onChange to trigger JS when you change something in the dropdown menu, instead of onClick. With selectedIndex you can determine what has been selected (the option 'show' or 'hide') and go from there.
Tip: get rid of all the junk code and limit it to just the elements that you need. Try to make it work in its most basic form, then build it out to what you're actually trying to do. That way it's a lot easier to track bugs and find out why it's not working.
Also, you might want to look into jQuery. You can do pretty much the same in plain old JavaScript, but jQuery makes things like this a lot easier.