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.:)
Related
I'm want to show php include based on the drop down menu choice.
But the trick is that I want to show the include before submitting the page.
<?php include 'page.php'; ?>
<select name="s1"style="width: 70px;" >
<optgroup label="My Input">
<option value="">Select...</option>
<option value="one kind</option>
<option value="second kind</option>
</select>
How can I show my page based on option selected before page is submited?
I found it!
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
I have a dropdown where the values are fetched from the database,
now, when the last option which is the " ADD ELEMENTARY SCHOOL" is selected, I want the dropdown to be hidden and an input text will replace the dropdown that will let the user enter a not existing data like this one. Thanks
This is my html code.
<select id="elemschool" class="form-control">
<?php
$select=$dbcon->query("Select * from elem_school");
while ($row=$select->fetch_array()) {
?>
<option value="<?php echo $row['Elem_ID']?>">
<?php echo $row['School_Name']?>
</option>
<?php
}
?>
<option style="background-color: #77A5F8" class="addelem" value="addelementary">- ADD ELEMENTARY SCHOOL -</option>
</select>
<input type="text" class="form-control hidden" name="elem_school" id="elem_school" placeholder="NAME OF SCHOOL">
</div>
First of all please provide us with a snippet of the existing code so we can change it to a working one and secondly what if someone want to select the
MANAOLO FORTICH CENTRAL ELEMENTARY SCHOOL
and selected the
ADD ELEMENTARY SCHOOL option
how would you allow the user to select another option if its not there
What I would recommend is to show/hide or disable/enable the input box depending on what user select from the list
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
If you want to hide it as well as disabling it
<html>
<head>
</head>
<body>
<select name='school' onchange="newSchool(this.value)">
<option value="">Select a school</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" id="input" disabled />
<script>
document.getElementById("input").hidden = true;
function newSchool(schoolName) {
if (schoolName == 3) {
document.getElementById("input").hidden = false;
document.getElementById("input").disabled = false;
} else {
document.getElementById("input").hidden = true;
document.getElementById("input").disabled = true;
}
}
</script>
</body>
</html>
prepare two DOM element. A visible select element and a hidden input element.
bind a change event to select element, and check if the value equal to the value of item named "add elementary school", and then hidden the select element and show the input element.
<select name='car1'>
<option value='1'>Toyota</option>
<option value='2'>Honda</option>
<option value='3'>Ford</option>
</select>
<input type='submit' name='submitform' />
if(isset($_POST['submitform'])){
$Getvalue = $_POST['car1'];
echo $Getvalue;
}
How do I get the values (Toyota, Honda, and Ford) not the numbers
In POST you receive only submitted value, so you should use
<option value="Toyota">Toyota</option>
Use it.
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>
Alternatively, if you could, you could use jquery in this one. You need another container for that 'Name'. Consider this example:
<?php
if(isset($_POST['car1'])) {
$id = $_POST['car1'];
$name = $_POST['selected'];
echo $name;
}
?>
<form method="POST" action="">
<input type="hidden" name="selected" value="" />
<select name='car1'>
<option value='1'>Toyota</option>
<option value='2'>Honda</option>
<option value='3'>Ford</option>
</select>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('select[name="car1"]').change(function(){
// as you select your pick,
// this will append the name inside the hidden input
var selected = $(this).val();
var value = $('select[name="car1"] option[value="'+selected+'"]').text();
$(this).prev('input[name="selected"]').attr('value', value);
$('form').submit();
});
});
</script>
Sample Fiddle
Only option values will be send in $_POST. If you don't need values in numbers, replace them with text values.
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>
Web-browser send to web-server post line like "car1=1&submitform=". Php script does not known about what inside options. Change values to:
<select name='car1'>
<option value='Toyota'>Toyota</option>
<option value='Honda'>Honda</option>
<option value='Ford'>Ford</option>
</select>
I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>
Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});
I have a dropdown list populated by mysql working perfectly, I also have it displaying the price set by mysql, so far i'm happy.
What the issue is as it's a multiple dropdown list, it will only display what is chosen first, if I pick 2 or more selections, only the first price is shown.
My second issue is I want the prices to add up i.e. 1st Selection's price is £1.99, 2nd Selection's price is £2.99 so the total should be £4.98
Finally once i have all this working, I want to continue this onto the 2nd / 3rd / 4th dropdown boxes so that all the boxes add up giving me a combined total.
Here's my html code to show you what i'm using:
<form method="post" action="" name="form1">
<?
include 'classes.php';
$query="SELECT * FROM Sex_Table";
$result=mysql_query($query);
?>
<select data-placeholder="Your Favorite Football Team" class="chzn-select" multiple tabindex="6" id="Sexdiv" name="Sexdiv" style="width: 300px;" onChange="getClothing(this.value),changePrice()">
<option>Select Colour Type</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['ID']?> sex_price="<?=$row['Price']?>"><?=$row['Sex_Name']?> (£<?=$row['Price']?>)</option>
<? } ?>
</select><br /><br />
<p id="Clothingdiv">
<select style="width: 300px;" name="Clothing" disabled='disabled'>
<option>Select Sex First</option>
</select>
</p><br />
<script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script>
</form>
and here's my js:
function changePrice() {
var sex_price = $("option:selected").attr("sex_price");
$("#price_div").html("Price = £" + sex_price);
}
Thanks
Below is an example of what you're trying to do, I've given each select element I want to calculate the total for a class so that they are not mixed up with other elements.
jQuery
<script>
$(document).ready(function() {
$('.calculate').change(function() {
var total = 0;
$('.calculate').each(function() {
if($(this).val() != 0) {
total += parseFloat($(this).val());
}
});
$('#total').text('£' + total.toFixed(2));
});
});
</script>
HTML
<select class="calculate" name="select-1">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<select class="calculate" name="select-2">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<select class="calculate" name="select-3">
<option value="0">Please Select</option>
<option value="1.99">£1.99</option>
<option value="2.99">£2.99</option>
</select>
<span id="total">£0</span>
This will update the contents of total with the total price of each select element with class calculate when one of them is changed.
select with multiple should have the size attribute set as well, like this:
<select data-placeholder="Your Favorite Football Team" class="chzn-select" multiple="multiple" tabindex="6" id="Sexdiv" name="Sexdiv" style="width: 300px;" onChange="getClothing(this.value),changePrice()" size="10">
Your jQuery script:
$('select#Sexdiv').change(function() {
var value = 0;
$("select#Sexdiv option:selected").each(function(){
value += parseFloat($(this).val());
});
$("#price_div").html("Price = £" + value);
});
Hmm?