Develop Reference

how to show text box when the value from combo box is selected for more than one

i want to show the text box only when the value from combo box is selected otherwise it should be hidden. and i need that for more than one in the same page. I would be thankful for your help.
<label>1- Are there are friends/ neighbours/ family providing help ?</label>
<select class="form-control" name="formlist[any_friends_relatives_help3]" class="selincrease" id="edition"
onchange="func()" style="height: 5%;">
<option value="">choose...</option>
<?php
if (isset($forms['any_friends_relatives_help3'])) {
echo '<option selected="selected" value="' . $forms['any_friends_relatives_help3']. '" disabled>' . $forms['any_friends_relatives_help3'] . '</option>' ;
echo '<option value="<?=$forms[\'any_friends_relatives_help3\'] ?? \'Yes\'?>">Yes</option>' ;
echo ' <option value="<?=$forms[\'any_friends_relatives_help3\'] ?? \'No\'?>">No</option>';
?>
<?php }
else {?>
<option value="<?=$forms['any_friends_relatives_help3'] ?? 'Yes'?>">Yes</option>
<option value="<?=$forms['any_friends_relatives_help3'] ?? 'No'?>">No</option>
<?php }?>
</select>
<div id="trhide">
<label>Please Specify:</label><br />
<textarea class="form-control" name="formlist[specify_help3]"><?=$forms['specify_help3'] ?? ''?></textarea>
</div>
<script type="text/javascript">
function func() {
var elem = document.getElementById("edition");
if (elem.value == "Yes") {
document.getElementById("trhide").style.visibility = "visible";
} else {
document.getElementById("trhide").style.visibility = "hidden";
}
}
</script>
if i use only the above one it is working but when i use another one for another selection , both of them are not
working. the code for the second one is described below:
<label>Shopping</label>
<select class="form-control" name="formlist[shopping3]" class="selincrease" id="change" style="height: 5%;"
required="required">
<option value="">choose...</option>
<?php
if (isset($forms['shopping3'])) {
echo '<option selected="selected" value="' . $forms['shopping3']. '" disabled>' . $forms['shopping3'] . '</option>' ;
echo '<option value="<?=$forms[\'shopping3\'] ?? \'Self\'?>">Self</option>' ;
echo ' <option value="<?=$forms[\'shopping3\'] ?? \'Other\'?>">Other</option>';
?>
<?php }
else {?>
<option value="<?=$forms['shopping3'] ?? 'Self'?>">Self</option>
<option value="<?=$forms['shopping3'] ?? 'Other'?>">Other</option>
<?php }?>
</select><br />
<div id="change2">
<label>If others, Please Specify</label>
<br />
<textarea class="form-control" name="formlist[other_help3]"><?=$forms['other_help3'] ?? ''?></textarea>
<br />
</div>
<script type="text/javascript">
function func() {
var elem = document.getElementById("change");
if (elem.value == "Other") {
document.getElementById("change2").style.visibility = "visible";
} else {
document.getElementById("change2").style.visibility = "hidden";
}
}
</script>

You can't have multiple functions with the same name. Also, your function names should never be "func" as they are really non-descriptive. You could also combine both functions into ones, for example:
function changeVisibility(id1, id2, checkValue) {
var elem = document.getElementById(id1);
if(elem.value == checkValue) {
document.getElementById(id2).style.visibility = "visible";
} else {
document.getElementById(id2).style.visibility = "hidden";
}
}

Show subcategory for any chosen category

I've been looking for a way to automatically display a subcategory select drop-down, only if a user selects a category. If the user doesn't select a category, the subcategory dropdown will remain hidden.
I have been looking for a way to do it by referring to online tutorials and videos but all that I've tried so far does not really work.
So please, I will like to have an assistance on how I can solve this problem. I have created a database with 2 tables:
category: catId,catName and
subcategory: subcatId,catId,subcatName
and here is my html code
<div class="row required">
<label for="category_level_1">Category</label>
<div class="column">
<select id="Category" name="category" required="required" data-parsley-required-message="Please select a Category." data-level="0">
<option value="">Select Category</option>
<?php
$getCategory = $category->getAllCat();
if($getCategory){
while($result = $getCategory->fetch_assoc()){
?>
<option value="<?php echo $result['catId']; ?>"><?php echo $result['catName']; ?></option>
<?php
}
}
?>
</select>
</div>
</div>
<div id="Subcategory" class="row hidden" >
<label for="subcategory">Subcategory</label>
<div class="column">
<select id="Subcategory" name="subcategory" required="required" data-parsley-required-message="Please select a subcategory." data-level="1">
<option value="">Select sub-category</option>
</select>
</div>
</div>
Category Table
Subcategory Table
So any suggestions on how I can code it using php and javascript? I am totally new to php and javascript.

Try this code, I have found it while I need to implement dependable dropdown.(fiddle demo)
You can change design and logic as per your need.
Tip : Get category and subcategory in this format :
$cat = array(['t'] => array('t1', 't2', 't3'), ['x'] => array('x1', 'x2', 'x3'));
Controller:
$cat = $this->model_name->getCat();
$final = [];
foreach ($cat as $value) {
$final[$value['catName']][] = array('name' => $value['subcatName'], 'key' => $value['subcatId']);
}
Model: I have assumed category table name as cat and sub category as sub_cat, you can replace it with your table name.
function getCat() {
$this->db->select('*');
$this->db->from('cat a');
$this->db->join('sub_cat b', 'a.catId = b.catId');
$result = $this->db->get();
$cat = $result->result_array();
$final = [];
foreach ($cat as $value) {
$final[$value['catName']][] = array('name' => $value['subcatName'], 'key' => $value['subcatId']);
}
}
View :
echo "<select class="dependent" name="products" multiple>";
foreach ($final as $catName => $sub) {
echo '<optgroup label="'.$catName.'">'.'<bR>';
foreach ($sub as $value) {
echo '<option value="'. $value['key'] .'">'. $value['name'] .'</option>';
}
}
echo "</select>";
You can loop through this and make dynamic dropdown.
jQuery Code :
$(function () {
$("select.dependent").each(function (i, sel) {
var original = $(this).clone(),
dependent = $("<select></select>").attr({
name: this.name
}).insertAfter(this)
this.name = "categories_" + this.name
$("optgroup", this).replaceWith(function () {
return "<option>" + this.label + "</option>"
})
$("option:first",this).prop("selected",true)
$(this).removeAttr("multiple").on("change", function () {
var cat = $(this).val()
dependent.html(original.children("[label='" + cat + "']").html())
}).change()
console.log(this)
})
})
HTML Code :
<select class="dependent" name="products" multiple>
<optgroup label="C1">
<option>P1A</option>
<option>P1B</option>
<option>P1C</option>
</optgroup>
<optgroup label="C2">
<option>P2A</option>
<option>P2B</option>
<option>P2C</option>
</optgroup>
<optgroup label="C3">
<option>P3A</option>
<option>P3B</option>
<option>P3C</option>
</optgroup>
</select>

How to change a second select list based on the first select list option when values are dynamic?

I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects
<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<?php if(count($vehicleType) > 0 ){
foreach($vehicleType as $vt){ ?>
<option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
<?php }
} ?>
</select>
</div>
<div class="fields">
<p>Total No. of Passengers*</p>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<option <?php if(#$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
<option <?php if(#$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
<option <?php if(#$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
<option <?php if(#$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
<option <?php if(#$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
<option <?php if(#$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
<option <?php if(#$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
<option <?php if(#$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>
</select>
</div>
How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..

I would probably do something along these lines:
<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
$number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}
$passengers = 0;
if(!empty($_REQUEST['passengers'])){
$passengers = (int) $_REQUEST['passengers'];
}
?>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<option value="RV/Motorhome">RV/Motorhome</option>
<option value="Campervans">Campervans</option>
</select>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<?php
for($i = 1; $i <= $number_of_passengers; $i++) {
?>
<option
<?php
if($i == $passengers) {
echo ' selected ';
}
?>
>
<?php echo $i ?>
</option>
<?php
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#car_type').change(function() {
$("#passengers").children().removeAttr("selected");
if ($(this).val() === 'Campervans') {
$('#passengers option:nth-child(n+7)').hide();
} else {
$('#passengers option').show();
}
});
</script>
There are cleaner ways of doing this but this should serve to get the point across.
Few things to note about the PHP:
See how I check if the $_REQUEST key is available using empty - this avoids having to use # which is generally not a good idea.
I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)
Hope this helps!

yes you need to add javascript code for that.
insert below code in your page and check if this is what you want?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.car').on('change', function(){
if($(this).val() === 'RV/Motorhome'){
$('.half').find('option').show()
}else if($(this).val() === 'Campervans'){
$('.half').find('option').slice(6).hide();
}
})
</script>

Values not inserting into database table

I am trying to insert the values from drop-down and text box throug web page.
first there will be one drop down box that has numbers from 1 to 25..
when i select the number from the dropdown, the corresponding textboxes and dropdown boxes are created.
But when i enter the data and click the submit button,the values are not going to database, instead only the last row values are inserting into database.
for example:
say i have selected 4 from number dropdown, now 4 rows with textbox and dropdown box appears.
when i enter the data in the textbox and select value from dropdown and click submit. the last row values are getting inserted 4 times.
i want it to insert the values correctly...How can i solve this.?
here is the code i am using..
code:
<html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/page.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
<link href="css/loginmodule.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$("#Fname").autocomplete("get_course_list.php", {
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
});
});
</script>
<script>
function showUser(str) {
if(str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if(window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gettheater.php?q="+str,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
function create(param) {
'use strict';
var i, target = document.getElementById('screens');
target.innerHTML = '';
target.innerHTML = '<input name="RowCount" value="' + param + '" hidden />';
for(i = 0; i < param; i += 1) {
target.innerHTML +='</br>';
target.innerHTML +='New Movie '+i+' ';
target.innerHTML += '<input type="text" name="Fname">';
target.innerHTML +=' '+'Language '+' ';
target.innerHTML += "<?php
try {
$dbh = new PDO('mysql:dbname=theaterdb;host=localhost','tiger','tiger');
} catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
$sql = 'SELECT language FROM languages;';
$sth = $dbh->prepare($sql);
$sth->execute();
echo "<select name='language' id='course'>";
echo "<option>----Select Language----</option>";
while($row = $sth->fetch(PDO::FETCH_ASSOC)) {
echo "<option value='" . $row['language'] ."'>" . $row['language']. " </option>";
}
echo "</select>";
?>";
target.innerHTML +='</br>';
target.innerHTML +='</br>';
}
}
</script>
<style>
#screens{
color:black;
}
</style>
</head>
<body>
<h1>Welcome <?php echo $_SESSION['SESS_FIRST_NAME'];?></h1>
My Profile | Logout
<p>This is a password protected area only accessible to Admins. </p>
<center>
<div class="pan"><br><br>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" autocomplete="off">
<div class="head">Update Theater Information</div>
<table>
<tr>
<td><label for="screens">New Movies Released</label></td>
<td>
<select id="select" onchange='javascript:create(this.value);' name="range">
<option>--Select Number Of New Movies Released--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="screens">
</div>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="button" name='submit' value="Submit" /></td>
</tr>
</table>
</form><br><br>
</div>
<?php
mysql_connect("localhost", "tiger", "tiger") or die(mysql_error());
mysql_select_db("theaterdb") or die(mysql_error());
for ($i=0; $i < $_POST["range"] ; $i++)
{
$query = mysql_query("INSERT INTO movie (movie_name,language) VALUES('$_POST[Fname]','$_POST[language]') ") or die(mysql_error());
}
?>
</center>
</body>
</html>

You should change you name to array like
target.innerHTML += '<input type="text" name="Fname[]">';
And also in insert query should be
$query = mysql_query("INSERT INTO movie (movie_name,language) VALUES('".$_POST['Fname'][$i]."','".$_POST['language']."') ") or die(mysql_error());

1.Use mysqli_* function instead of mysql_* function...
2. What is error showing up.
If you have insertion query on same page then try it:.....
<?php
if(isset($_POST['submit'])
{
mysql_connect("localhost", "tiger", "tiger") or die(mysql_error());
mysql_select_db("theaterdb") or die(mysql_error());
for ($i=0; $i < $_POST["range"] ; $i++)
{
$query = mysql_query("INSERT INTO movie (movie_name,language) VALUES('$_POST[Fname]','$_POST[language]') ") or die(mysql_error());
}
}
?>
It will triger your query when submit button will hit.... may this help

Use this
$query = mysql_query("INSERT INTO movie (movie_name,language) VALUES('".$_POST['Fname']."','".$_POST['language']."') ") or die(mysql_error());
instead of
$query = mysql_query("INSERT INTO movie (movie_name,language) VALUES('$_POST[Fname]','$_POST[language]') ") or die(mysql_error());
You must keep php code outside of quote and Concate them
2.If The index of $_POST Array is string then it must be with quote. (e.x: $_POST[language] it must be $_POST['language']

Thank god....I resolved My issue.....i used the same logic that was applied to first text box...
and now the dropdown values are also getting inserted....
i added array to language[]
echo "<select name='language[]' id='course'>";
and added the $i in loop
.$_POST['language'][$i]
Thanks all for helping me.....
HaPpY CoDiNg....

I don't want to be an ass, but I would suggest cleaning things up and seperating the JavaScript, jQuery and PHP even loose JavaScript AJAX and use jQuery AJAX. It's no surprise code like this is giving you bugs.

Is Javascript causing my form to not echo selected once error reloads the page?

I am still new at PHP/Javascript/Ajax and am having a very hard time (been going on for weeks) troubleshooting this problem.
My site has a registration to be a member page that requires all fields to be filled out. This is a website for the Cystic Fibrosis community, so there is a section on the form where you choose your relationship to Cystic Fibrosis. (I have it/ Someone I know has it) If you choose I have it, a drop-down box appears and gives you the option Fibro(male) or Cyster(female). If you choose someone I know, a different drop-down opens with various options(aunt, uncle etc.)
I have a myriad of possible errors that can be made. Passwords don't match, captcha or terms of use not checked/filled out, etc...therefore the page reloads to display the error message. I have put "echo selected" in all of my option values to have the page load the previously selected information as it should. When you choose 'I have CF' this is what happens:
When signing up - if I select "I have CF" the first time but forget to fill in "Cyster or Fibro" I get the error message. THEN when I go back and add in Cyster or Fibro, it continues to tell me, that I need to enter my relation to CF, even though it SHOWS in the box that Cyster or Fibro is selected.
If I'm signing up. Have filled in the relation to CF as "I have CF" AND filled in the "Cyster or Fibro" but get ANY error message (wrong email, passwords don't match etc) the Cyster or Fibro answer falls out (not there) and if I select it again, it will not accept my choice and keeps saying that "you must choose your relation" even though it's clearly been selected.
Like I said, I've been struggling with this for weeks, and as far as I can tell my code looks correct. I'm thinking it has something to do with the Javascript? Here is my code:
(Please let me know if you need surrounding code to help, thank you)
<tr>
<td class="left">
<span style="color:#FF0000;">*</span> Relation to CF:
</td>
<td class="right">
<select name="CFDistance" onchange="switch_distance(this);">
<option value="null" disabled selected>choose one</option>
<option value="self" <?php if($_POST['CFDistance'] == "self") { echo "selected"; } ?>>I have CF</option>
<option value="others" <?php if($_POST['CFDistance'] == "others") { echo "selected"; } ?>>Someone I know has CF</option>
</select>
<div id="self_cf_box" class="signup_dropdowns" style="margin:10px 0px 0px 0px;<?php if($_POST['CFDistance'] != "self") { echo "display:none;"; } ?>">
<span style="color:#FF0000;">*</span> I am a
<select id="RelationToCF_self" name="RelationToCF" <?php if($_POST['CFDistance'] != "self") { echo "display:none;"; } ?>>
<option value="null" disabled selected>choose one</option>
<option value="Fibro" <?php if($_POST['RelationToCF'] == "Fibro") { echo "selected"; } ?>>Fibro (male)</option>
<option value="Cyster" <?php if ($_POST['RelationToCF'] == "Cyster") { echo "selected";} ?>>Cyster (female)</option>
</select>
</div>
Here is the other option (I know someon with CF) that is working just fine:
<div id="others_cf_box" class="signup_dropdowns" style="margin:10px 0px 0px 0px;<?php if($_POST['CFDistance'] != "others") { echo "display:none;"; } ?>">
<span style="color:#FF0000;">*</span> I am this person's
<select id="RelationToCF_others" name="RelationToCF" <?php if($_POST['CFDistance'] != "others") { echo "display:none;"; } ?>>
<option value="null" disabled selected>choose one</option>
<option value="Mom" <?php if ($_POST['RelationToCF'] == "Mom") { echo "selected"; } ?>>Mom</option>
<option value="Dad" <?php if ($_POST['RelationToCF'] == "Dad") { echo "selected"; } ?>>Dad</option>
<option value="Aunt" <?php if ($_POST['RelationToCF'] == "Aunt") { echo "selected"; } ?>>Aunt</option>
<option value="Brother" <?php if ($_POST['RelationToCF'] == "Brother") { echo "selected"; } ?>>Brother</option>
<option value="Caregiver" <?php if ($_POST['RelationToCF'] == "Caregiver") { echo "selected"; } ?>>Caregiver</option>
<option value="Child" <?php if ($_POST['RelationToCF'] == "Child") { echo "selected"; } ?>>Child</option>
<option value="Cousin" <?php if ($_POST['RelationToCF'] == "Cousin") { echo "selected"; } ?>>Cousin</option>
<option value="Friend" <?php if ($_POST['RelationToCF'] == "Friend") { echo "selected"; } ?>>Friend</option>
<option value="Grandma" <?php if ($_POST['RelationToCF'] == "Grandma") { echo "selected"; } ?>>Grandma</option>
<option value="Grandpa" <?php if ($_POST['RelationToCF'] == "Grandpa") { echo "selected"; } ?>>Grandpa</option>
<option value="Guardian" <?php if ($_POST['RelationToCF'] == "Guardian") { echo "selected"; } ?>>Guardian</option>
<option value="Husband" <?php if ($_POST['RelationToCF'] == "Husband") { echo "selected"; } ?>>Husband</option>
<option value="Nephew" <?php if ($_POST['RelationToCF'] == "Nephew") { echo "selected"; } ?>>Nephew</option>
<option value="Niece" <?php if ($_POST['RelationToCF'] == "Niece") { echo "selected"; } ?>>Niece</option>
<option value="Partner" <?php if ($_POST['RelationToCF'] == "Partner") { echo "selected"; } ?>>Partner</option>
<option value="Sister" <?php if ($_POST['RelationToCF'] == "Sister") { echo "selected"; } ?>>Sister</option>
<option value="Uncle" <?php if ($_POST['RelationToCF'] == "Uncle") { echo "selected"; } ?>>Uncle</option>
<option value="Wife" <?php if ($_POST['RelationToCF'] == "Wife") { echo "selected"; } ?>>Wife</option>
</select>
</div>
Here is the JavaScript chunk:
<script type="text/javascript">
function switch_distance(el) {
if(el.value == 'self') {
document.getElementById('self_cf_box').style.display = "block";
document.getElementById('RelationToCF_self').disabled = false;
document.getElementById('others_cf_box').style.display = "none";
document.getElementById('RelationToCF_others').disabled = true;
}else{
document.getElementById('self_cf_box').style.display = "none";
document.getElementById('RelationToCF_self').disabled = true;
document.getElementById('others_cf_box').style.display = "block";
document.getElementById('RelationToCF_others').disabled = false;
}
}
</script>

The best way to accomplish this is to use JavaScript for loading the values and validation. I would use a framework to make it easier.
ExtJS
Dojo
JQuery
are a few of the most well known. These have form validators built in along with AJAX functionality to make your like easier.
See http://www.extjs.com/deploy/dev/examples/form/dynamic.html

The best solution is to validate on the PHP side (using AJAX) and return the validation result as JSON. Also see here.