I have the following HTML code for my element and it is populated with elements.
<select name="category" class = "form-control">
<option value = "Awearness">Awearness</option>
<option value = "ITandTechnology">IT and Technology</option>
<option value = "Physics">Physics</option>
<option value = "Sport">Sport</option>
<option value = "Science">Science</option>
<option value = "Social">Social</option>
</select>
I also have PHP code above tag that gets me value of category from MySQL database. So for example:
...$category = "Sport";...
What I need to know is, is there a way to select certain option when page loads that corresponds to $category variable I got in PHP?
So if
...$category = "Sport";...
it selects the Sport option from tags.
To set an option as selected on page load we can use the selected attribute.
<option value="some-value" <?= $category == 'some-value' ? 'selected' : '' >>....</option>
Then do the same for each option in your list.
I suggest using JavaScript along with your php.
For example,
<?php
$cat = 'Sport';
?>
<!DOCTYPE html>
<html>
<body>
<select name="category" class = "form-control" id = "i1">
<option value = "Awearness">Awearness</option>
<option value = "ITandTechnology">IT and Technology</option>
<option value = "Physics">Physics</option>
<option value = "Sport">Sport</option>
<option value = "Science">Science</option>
<option value = "Social">Social</option>
</select>
<script>
var a= document.getElementById('i1');
a.getElementsByTagName('option');
for(i=0;i<a.length;i++)
{
if(a[i].value=='<?php echo $cat;?>')
{
a[i].setAttribute("selected","selected");
break;
}
}
</script>
</body>
</html>
Related
I have a drop down list where I select options
<form action="" method="POST" class="styled-select">
<select name="seasons" onchange='this.form.submit()'>
<option value="">Select a Season</option>
<option value="1">2002/2003</option>
<option value="2">2003/2004</option>
<option value="3">2004/2005</option>
<option value="4">2005/2006</option>
<option value="5">2006/2007</option>
<option value="6">2007/2008</option>
<option value="7">2008/2009</option>
<option value="8">2009/2010</option>
<option value="9">2010/2011</option>
<option value="10">2011/2012</option>
<option value="11">2012/2013</option>
<option value="12">2013/2014</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
You can see the list here footystat
I am using the following PHP
if(isset($_POST['seasons'])){ $seasonette = $_POST['seasons']; }
if(isset($_POST['year'])){ $yearette = $_POST['year']; }
if(isset($_POST['comp'])){ $competitionette = $_POST['comp']; }
if(isset($_POST['which'])){ $whichette = $_POST['which']; }
When I select something from the list, I want selected item in the list to continue showing. At the moment when I select (for example) 2013/2014, it will show the results but the drop down menu goes back to its original state instead of showing 2013/2014.
Get Option value selected when it gets posted value, like this,
<option value="1" <?php if(isset($_POST['seasons']) && $_POST['seasons'] == '1'){ ?> selected="selected" <?php } ?>>2002/2003</option>
Set value like this for each option
You can set the "selected" property to the option , just like you set a value !
<option value="8" selected>2009/2010</option>
Use a if statement in PHP to determine which one should be selected.
Thats because the page refreshes.
On page load check if there is post variable than match the value with each option's HTML and write selected attribute.
The shorter way is
<option value="1" <?php echo $_POST['seasons']==1?"selected":""; ?>2002/2003</option>
I have created the dropdown list in my index page i want to select the one value from that list and validate it if not selected any value the code for that is as follows:
<form action="" method="post">
<select value="state" name="state">
<option selected="">---please enter---</option>
<option value="1">andhra</option>
<option value="2">thamil</option>
<option value="3">kerela</option>
</select>
</form>
php code for the above file is as follows:
<?php
if(!empty($_POST['state'])) {
$state = $_POST['state'];
}
else {
echo "required";
}
?>
I dont want to be select the first option in selection list please enter to be selected but the code which I have used is taking that value also I want relevant code how to validate that list?
I prefer adding a disabled attribute to the placeholder option, that way, a user has to choose something if they click the drop-down:
<select value="state" name="state">
<option selected disabled>---please enter---</option>
<option value="1">andhra</option>
<option value="2">thamil</option>
<option value="3">kerela</option>
</select>
Quick demo: http://jsfiddle.net/hxxJZ/
something like this should to the trick:
<form action="" method="post">
<select name="state">
<option value="0" selected>---please enter---</option>
<option value="1">andhra</option>
<option value="2">thamil</option>
<option value="3">kerela</option>
</select>
</form>
php
<?php
if( 0 != $_POST['state'] ) {
$state = $_POST['state'];
}
else {
echo "required";
}
?>
your HTML is not right,
try edit this line
<option selected=""...
to this one
<option selected value="">---
select elements do not have an (HTML) value attribute, so remove value="state".
The selected attribute should be selected="selected" (or just SELECTED).
I have 2 drop-down menu forms 'category' and 'sub-category'. in 'category' I have options music and film and in the subcategories I have options 'pop' and 'rock'(f1) and in film 'comedy'and 'drama'(f2). the problem is, with the code I have the subcategories for film should register as follows(cat,subcat): film-drama=2,5 and film-comedy=2,6 however they both register as 2,0 when entered in the mysql table. here is the code:
<form action='submitsite.php' method='POST'>
<table>
<tr>
<td>category(optional)</td>
<td><select name='cat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "1">music </option>
<option value = "2">film </option>
</select>
<div id = "f1" style="display:none">
<form name= "subcat">
<select name='subcat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "3">pop</option>
<option value = "4">rock </option>
</select>
</form>
</div>
<div id = "f2" style="display:none">
<form name= "subcat">
<select name='subcat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "5">comedy</option>
<option value = "6">drama</option>
</select>
</form>
</div>
<script type = "text/javascript">
function showForm()
{
var selopt = document.getElementById("opts").value;
if (selopt == 1)
{
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2)
{
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}
and here is the variable declarations and mysql query:
$cat=$_POST['cat'];
$subcat=$_POST['subcat'];
$sql="INSERT INTO favorites VALUES('$cat','$subcat')";
it's not a mysql issue I just added that part to give a better overall picture.
You can't have nested forms in HTML. The markup is not valid and I guess you get unexpected behavior when submitting. The solution to this is using a single form. There's more than one way to do this, but here's one example:
HTML code:
<form action='submitsite.php' method='POST'>
<table>
<tr>
<td>category(optional)</td>
<td><select name='cat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "1">music </option>
<option value = "2">film </option>
</select>
<div id = "f1" style="display:none">
<select name='subcat1' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "3">pop</option>
<option value = "4">rock </option>
</select>
</div>
<div id = "f2" style="display:none">
<select name='subcat2' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "5">comedy</option>
<option value = "6">drama</option>
</select>
</div>
</form>
....
PHP code:
$cat = $_POST['cat'];
$subcat = $_POST['subcat' . $cat];
Keep in mind that all user-submitted values must be validated before being used further. In this case, you would check for is_numeric(), check to see if it's in your accepted range of values and maybe cast to an int.
how can I differentiate the 'select name' of 'f1' and 'f2' currently both named 'subcat' while still having only 1 subcat variable? this code works accurately only if cat value=2, if cat value=1 then subcat value always =0
<?php
$cat=$_POST['cat'];
$subcat = $_POST['subcat'];
?>
<form action='submitsite.php' method='POST'>
<table>
<tr>
<td>category(optional)</td>
<td>
<select name='cat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "1">music </option>
<option value = "2">film </option>
</select>
<div id = "f1" style="display:none">
<select name='subcat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "3">pop</option>
<option value = "4">rock </option>
</select>
</div>
<div id = "f2" style="display:none">
<select name='subcat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "5">comedy</option>
<option value = "6">drama</option>
</select>
</div>
</form>
</div>
<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts").value;
if (selopt == 1) {
document.getElementById("f1").style.display="block";
document.getElementById("f2").style.display="none";
}
if (selopt == 2) {
document.getElementById("f2").style.display="block";
document.getElementById("f1").style.display="none";
}
}
</script>
Add [] to the name. The selects will then be interpreted as an array when submitted.
<select name="subcat[]">...</select>
With PHP it can be accessed (if POSTed) like this:
<?php
$subCatArr = $_POST['subcat'];
$firstIndex = $subCatArr[0];
$secondIndex = $subCatArr[1];
Oh yeah, and reusing IDs in HTML is not valid. They must be unique.
UPDATE After better understanding OP's intent:
If I understand the intent of this spaghetti code (that's a term of endearment, OP), the user may select one category and one subcategory, which is based on the category that he/she selected. Then the user submits the form and that selection is recorded in the database.
First of all, let's get rid of the use of table elements, because they're unnecessary. Secondly, you only need one select for the subcategory.
<form action='submitsite.php' method='POST'>
<label>category(optional)</label>
<select name='cat' id = "opts" onchange = "showForm()">
<option value = "0">Select</option>
<option value = "1">music </option>
<option value = "2">film </option>
</select>
<div id="subcatDiv" style="display:none;">
<select name='subcat' id='opts'></select>
</div>
.
.
.
<input type='submit' />
</form>
We can leave it blank, since it's not being displayed anyway.
Now, when the user makes a change, we'll either display the appropriate subcategories, or we'll just hide the div again:
<script type = "text/javascript">
function showForm(){
var selopt = document.getElementById("opts");
var seloptVal = selOpt.value;
var subcatDiv = document.getElementById("subcatDiv");
var options = "";
switch(seloptVal * 1) {
case 1:
options = "<option value='0'>Select</option>" +
"<option value='3'>pop</option>" +
"<option value='4'>rock</option>";
break;
case 2:
options = "<option value='0'>Select</option>" +
"<option value='5'>comedy</option>" +
"<option value='6'>drama</option>";
break;
default:
break;
}
if (options == "") {
subcatDiv.style.display = "none";
selopt.innerHTML = options;
} else {
selopt.innerHTML = options;
subcatDiv.style.display = "block";
}
}
</script>
Now you only have to deal with one select for the subcategory.
I have altered a lot of your code to make it valid html and also work as i "think" you want it as your question did not make it very clear.
Here is a list of amends I had to make:
Changed ID's to make it clear what they are for.
Removed duplicate ID's.
Closed off your table properly.
Completely changed your JavaScript to show and hide certain select's
Many more things that I have forgotten.
Please see this jsfiddle.
Fixed html:
<form action='submitsite.php' method='POST'>
<table>
<tr>
<td>category(optional)</td>
<td>
<select name="cat" id="selectType">
<option value="0">Select</option>
<option value="1">music</option>
<option value="2">film</option>
</select>
<div id="f1" style="display:none">
<select name='music' id="selectMusic">
<option value="0">Select</option>
<option value="3">pop</option>
<option value="4">rock</option>
</select>
</div>
<div id="f2" style="display:none">
<select name="type" id="selectFilm">
<option value="0">Select</option>
<option value="5">comedy</option>
<option value="6">drama</option>
</select>
</div>
</td>
</tr>
</table>
</form>
Fixed JavaScript:
$("#selectType").change(function() {
var selected = $(this).val();
$("#f1, #f2").hide();
switch (selected) {
case "1":
$("#f1").show();
break;
case "2":
$("#f2").show();
break;
}
});
document.forms[0].subcat will be an array.
document.forms[0].subcat[0] will be the first instance, etc.
p.s. IDs are supposed to be unique.
document.getElementById('f2').getElementsByTagName('select')[0]
You are violating HTML standards by reusing IDs, by the way.
I'm trying to select the option based on the php variable value. So I need option value=1 is selected in the first <select> and option value=6 selected in second . Since I have a bunch of other <select> in the form, eventually, I will have an php array of some values, and I need each of the value match up with the option value under corresponding index in the a group of <select> that sharing the same class='si_1', and assign selected to that option.
Thanks
php part
<?php
$select_1 = "1";
$select_2 = "6";
?>
JQuery part
$(document).ready(function(){
var sel_class = $(".si_1");
var array = {"<?php echo $select_1?>","<?php echo $select_2?>"};
JQuery.each(array, function(index, value) {
var current = sel_class.get(index);
$(current + " option[value=" + value + "]").attr('selected', 'selected');
});
});
I don't know if $(current + " option[value=" + value + "]") is the correct syntax to target the <select> at index in $(".si_1") that has option where the option attribute value has value that's at index in array
HTML part
<select class="si_1">
<option value="1">Test 1</option>
<option value="3">Test 3</option>
<option value="5">Test 5</option>
<option value="7">Test 7</option>
</select>
<select class="si_1">
<option value="2">Test 2</option>
<option value="4">Test 4</option>
<option value="6">Test 6</option>
<option value="8">Test 8</option>
</select>
You can do this in the JavaScript:
selectedVal1 = "<?= $select_1; ?>";
selectedVal2 = "<?= $select_2; ?>";
When the client looks at it, it will look like this:
selectedVal1 = "1";
selectedVal2 = "6";
Then it's just using jQuery to set the selected attribute to selected (Just do .attr('selected', 'selected'))