We Keep Coding

PHP/Javascript to update input fields

OK, So not a big HTML or Javascript person. But I am doing what I can to get by.
I am working on a project for a Marine Cadets Explorers Post to create a online database for them to help manage their membership and other functions. In entering their membership records they will have multiple families that will have several kids in the post, so they don't want to have to re-enter their parents records. I wanted to create a drop down box that is populated by a SQL Database lookup (Which I did) and then, if they select a parent from that list, the form will populate, saving the entry.
I only provided a snipped of the HTML, since the form has over 50 fields and for example, I only really need to show one.
So the HTML is below.
<form name="YouthApp" class="form-application" method="post" id="application-form">
<div style="height:0.20in; left:1.75in; overflow:hidden; padding:2px; position:absolute; top:4.10in; width:1.48in; ">
<select name="selSupp" style="width:1.46in;">
<option value="">Existing Supporters</option>
<?php makeSuppDropdown() ?>
</select>
<div style="height:26px; left:0.36in; overflow:hidden; padding:2px; position:absolute; top:4.52in; width:353px; ">
<input style="height:0.20in; width:3.64in; " name="SuppFirst" required value="<?php if(isset($_POST['SuppFirst'])){ echo $_POST['SuppFirst']; } ?>" maxlength="20" type="text" placeholder="First Name" >
</div>
</div>
</form>
It calls a PHP Function that populates the drop down:
function makeSuppDropdown() {
include("dbconnect.php");
$sql = "SELECT SupporterId, ".
"CONCAT(LastName, ',', FirstName,' ',MidName,' ',trim(Suffix)) as 'SuppLookup' ".
"FROM tblsupporters ".
"ORDER BY LastName, FirstName, MidName, Suffix";
$sql_result = mysqli_query($conn,$sql);
$field= mysqli_fetch_fields($sql_result);
while ($row = mysqli_fetch_array($sql_result)) {
echo ' <option value="'.$row['SupporterId'].'" >'.$row['SuppLookup'].'</option>'.chr(10);
}
}
The function provided the following output:
<select name="selSupp" style="width:1.46in;">
<option value="">Existing Supporters</option>
<option value="32517-02" >Truxton,Karla Andrianne </option>
<option value="32517-01" >Truxton,Tommie Lee </option>
</select>
If the user selects a Parent Supporter then I wanted to start filling in the input fields. This is where I am having a problem.
Here is the PHP/Javacode I am using that is not working:
<?php
if (isset($_POST['selSupp'])) {
?>
<script type="text/javascript">
document.getElementById("SuppFirst").value = "Tommie";
</script>
<?php
} ?>
Now I know that PHP and Javascript don't always play well together, but I'm hoping that there is a solution that will allow me to fill in the fields.
Thank you in advance.

I don't really understand your question, however, to the best of my knowledge, you want the users after choosing their parents' information, a form appears with filled parents' info and extra fields.
If so, i suggest creating a submit button, since I'm not sure if a drop-down select can be submitted on itself:
if ($_POST['sbm']) { //if submit button is pressed
$option = mysqli_real_escape_string($conn, $_POST['select-name']);
//Get option from the users
if ($option == '') { //If $option == '' means if there is no value
header("Location: this_file.php?error=notselected"); //Redirect to the desired page
exit();
}
else {
header("Location: this_file.php?error=noerror");
exit();
}
}
And in the desired page (the page that contains the select form), you add:
if (isset($_GET['error'] && !empty($_GET['error'])) { //Check if error parameter exists
$error = $_GET['error'];
//Get the error
switch ($error) {
case "notselected": echo "<b style=\"color:red;\">Error!</b>"; break;
case "noerror": echo "<script>$(document).ready(function(){$('input-wanted-to-show').show();});</script>"; break; //Print out the script part that you need or show the hidden input. After this php code, please go to html and add desired input fields.
}
}
Overall, I know you want to submit that select form and add javascript if it is done, so I advice is to add a submit button, add parameter when option is valid, then use $_GET to check the parameter, print out the approriate tags.
If you still want to keep the select value, use AJAX.
If there is any problem, just comment.
I will be glad to help you figure out!

Three dropdown menus responding to eachother

I have 3 dropdown lists like this:
The code I have for this is as follows:
<td class="tditemlabel">Category*</td>
<td>
<select id='catselect' class='catselect' name='catselect' onclick="document.getElementById('subcatselect').disabled=false">
<option value="0">--Select a category--</option>
<?php getAllCategories(); ?>
</select>
</td>
<td class="formhelp">Choose item category</td>
</tr>
<tr>
<td class="tditemlabel">Subcategory*</td>
<td>
<select id='subcatselect' class='catselect' name='subcatselect' disabled onclick="document.getElementById('subsubcatselect').disabled=false">
<option value="0">--Select a subcategory--</option>
</select>
</td>
</tr>
<tr>
<td class="tditemlabel">Sub-subcategory*</td>
<td>
<select id='subsubcatselect' class='catselect' name='subsubcatselect' disabled>
<option value="0">--Select a sub-subcategory--</option>
</select>
</td>
</tr>
The data in the dropdown boxes is correctly fetched from my MySQL database. So, based on what is selected in the category dropdown list, the second one enables and the data is correctly inserted there. No problems so far.
At this point I encounter a couple of problems:
The first one is when for example (as soon in the picture below) is when I select the 'electronics' category, the subcategory list enables and shows me the 3 possible values it has ('computers&tablets','smartphones','photography'), now as can be seen, the first option is automatically selected and thus the 3rd dropdown list is not automatically enabled and filled with content. And clicking on this first one does not work either, i have to click on another one and then click again on the first one to see its contents in the 3rd dropdown.
A solution could be to add a 'dummy-option' everywhere, however this seems like a somewhat bad use case in my example. Since I have 9 categories, which all have 2 to 3 subcategories, and these subcategories all have 3 to 4 subcategories on their turn. If i have to add 'select a subsubcat' in every dropdown list (with e.g. 2 items) this seems a lot of useless information. (Could anyone provide me a solution to this? if not could anyone also explain me how to get this dummy text everywhere since I only know how to do that if it is in the database as well.)
And so we come to my second problem is let's say a user clicked on a category, a subcategory and a sub-subcategory, but now he wants to change the category again, this is what happens:
How can I disable again the sub-subcategory dropdown lists when the user changes category (and instantly enable the correct subcategory list)
The JQuery code I have so far is this:
$("#catselect").on("change", function() {
var categoryid = document.getElementById("catselect").value;
$.post('category_list.php', { catid: categoryid }, function(result) {
$('#subcatselect').html(result);
}
);
});
$("#subcatselect").on("change", function() {
var subcategoryid = document.getElementById("subcatselect").value;
$.post('subcategory_list.php', { subcatid: subcategoryid }, function(result) {
$('#subsubcatselect').html(result);
}
);
});
and the PHP code:
'category_list.php' (the 'subcategory_list.php' file is pretty much the exact same)
<?php
require 'includes/functions.php';
$cat_id = $_REQUEST['catid'];
if ($cat_id != 0)
{
$result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
}
while($row = mysqli_fetch_array($result)) {
echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
}
?>

VERY EDITED (context remains):
First thing first, you PHP is SQLinjection-ready... You send the input from your select (catid) directly to the db... Change it... Make sure it's numeric before you create your query.
Also, if your query never gets executed, you will probably get an exception when trying to fetch rows... So put it all under if:
$cat_id = $_REQUEST['catid'];
if ( is_numeric($cat_id) && $cat_id != 0 ) {
$result = db_query("SELECT categoryid, name FROM category WHERE parent = '$cat_id'");
while($row = mysqli_fetch_array($result)) {
echo '<option value="' . $row['categoryid'] . '">' . $row['name'] . '</option>';
}
}
Now, let's take it to your question. This is the full javascript you should need.
var subcat = '<option value="0">--Select a category--</option>';
var subsubcat = '<option value="0">--Select a sub-subcategory--</option>';
// ^^ these should be placed in the new controls
$("#catselect").on("change", function() {
$.post('category_list.php',
{ catid: categoryid },
function(result) {
$('#subcatselect').html(subcat+result);
$('#subcatselect').change();
}
);
});
$("#subcatselect").on("change", function() {
$.post('subcategory_list.php',
{ catid: subcategoryid },
function(result) {
$('#subsubcatselect').html(subsubcat+result);
$('#subsubcatselect').change(); // I guess you don't need this
}
);
});

Populate html dropdown list dynamically from other dropdown

I have two dropdown lists, the first is populated from database and works fine, the second dropdown must be populated dynamically from what user has chosen from the first dropdown list. For example, my first dropdown contains many country's name, when user choose a country, the second dropdown will be populated by city's of that country which are in same database. Have anyone an example of this?
This is the first dropdown list
<select size="1" name="listeOrg">
<option value = "0" selected>---Choisir une région---</option>
<?php
$link3 = mysql_connect_db();
$query3 = "SELECT nom_region FROM region ";
$result3 = mysql_query($query3, $link3) or die();
while ($row = mysql_fetch_array($result3)) {
echo '<option value="'.$row['nom_region'].'">'.$row['nom_region'].'</option>';
}
mysql_close($link3); ?>
</select>
And the second:
<?php
$link4 = mysql_connect_db();
$selectregion=$_POST['listeOrg'];
$query4 = "SELECT organisme FROM region_organisme where nom_region='$selectregion' ";
$result4 = mysql_query($query4, $link4) or die();
while ($row2 = mysql_fetch_array($result4)) {
echo '<option value="'.$row2['nom_region'].'">'.$row2['nom_region'].'</option>';
}
mysql_close($link4); ?>
<option value="1" >autre
</select>

I found finally a good solution with a proper code. This is the link to the tutorial if someone has been stacked on this case.
A good explained tutorial with demo

How to show dropdown selected data in textbox

I want to show the drop down selected value in textbox.
This is my design.
This is my php code for drop downlist...
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$s=mysql_query("select * from dealerdetail order by Dealer asc ");
?>
Select Dealer Name:
<select name="dealer" id="dealer">
<option value="">---- select Dealer -----</option>
<?php
while($dd=mysql_fetch_array($s))
{
?>
<option value="<?php echo $dd['D_id'] ?>"><?php echo $dd['Dealer'] ?></option>
<?php
}
?>
</select>
Please help.

I think you are looking for
$('#dealer').val(); //return selected value
$( "#dealer option:selected" ).text() // return selected options text

Use the change event and text property of select box to access the value
$('#dealer').change(function () {
$("#idOfTextBox").val($("#dealer option:selected").text());
});

use jquery:
Live demo : http://jsfiddle.net/t6YHK/25/
$('#dealer').change(function () {
$("#your_input_id").val($(this).val());
});

Use this:
$("#dealer").change(function(){
$("textarea").val( $(this).val() );
});

AngularJS
http://angularjs.org/
Scroll down to below the black area.

Seems like you're taking your first steps in web development, and for this, i strictly recommend that you stop using DreamWeaver to learn more about the code and how things go.
Each element in your web page is in the DOM (see HTML Document Object Model). So using native javascript all of your elements using :
document.getElementById("elementId")
And this is ALL what you need. All other solutions using frameworks will use this line of code whether you see this or not.
so for your specific question we will create a javascript function to be used in the event of value change of your dropdown list (assuming your text field's id is myText)
function updateMyText()
{
var dd = document.getElementById("myDropDown");
var ddtext = dd.options[dd.selectedIndex].text;
document.getElementById("myText").value = ddtext;
}
to call it when a dropdown list item is selected you need the attribute onchange
<select name="dealer" id="dealer" onchange='updateMyText()'>

Set specific row from database as default value for drop down menu

this is my first time asking for help and I know very little about coding. This was mostly done for me.
On a product page I have two drop down menus. One with a version select and one with a size select. Version selection determines what sizes are offered.
When the page loads the first record set for the respective product is used as initially selected.
<body onload="WA_FilterAndPopulateSubList(rssize_WAJA,MM_findObj('SelectVersion'),MM_findObj('SelectSize'),0,0,false,': '); showprice()">
This is the function for showprice witch is also called in the drop menu, because whenever the user makes a selection, three values on the page switch,prize, pzn and item number (no pzn in English):
function showprice() {
var fm = document.segufix_1_ATC_<?php echo $row_DetailRS1["product_id"]; ?>;
var selectedversion = fm.SelectVersion.options[document.segufix_1_ATC_<?php echo $row_DetailRS1["product_id"]; ?>.SelectVersion.selectedIndex].text;
var selectedsize = fm.SelectSize.options[document.segufix_1_ATC_<?php echo $row_DetailRS1["product_id"]; ?>.SelectSize.selectedIndex].text;
var versionset = fm.SelectVersion.value;
var sizeset = fm.SelectSize.value;
var priceset = js_array[(sizeset+0+versionset)].toFixed(2);
<?php if(isset($_SESSION['languageID']) && (!($_SESSION['languageID'] == "2" || $_SESSION['languageID'] == "4"))) { ?>
priceset = priceset.replace(".", ",");
<?php } ?>
var pznset = js_array2[(sizeset+0+versionset)];
var itemnolongset = js_array3[(sizeset+0+versionset)];
document.getElementById('pricelabel').innerHTML=' € '+priceset;
document.getElementById('pznlabel').innerHTML=pznset;
document.getElementById('itemnolonglabel').innerHTML=itemnolongset;
}
This is the second select menu (size menu):
<select class="<?php echo $tmpElementClassSize; ?> name="SelectSize" id="SelectSize" onchange="showprice()">
<?php
do {
?>
<option value="<?php echo $row_rssizedefault['size_id']?>"<?php if (!(strcmp($row_rssizedefault['size_id'], $row_rssize['size']))) {echo "selected=\"selected\"";} ?>><?php echo $row_rssizedefault['size']?></option>
<?php
} while ($row_rssizedefault = mysql_fetch_assoc($rssizedefault));
$rows = mysql_num_rows($rssizedefault);
if($rows > 0) {
mysql_data_seek($rssizedefault, 0);
$row_rssizedefault = mysql_fetch_assoc($rssizedefault);
}
?>
</select>
I would like for the size menu to initially select size "M".
Replacing this line:
<?php if (!(strcmp($row_rssizedefault['size_id'], $row_rssize['size']))) {echo "selected=\"selected\"";} ?>
with this line:
<?php echo $row_rssizedefault['size_id']?>"<?php if ($row_rssizedefault['size_id']=='4' ?>
initially selects size "M", but the prize is not displayed correctly (though it will put the product in the cart with the correct prize). For "M" to display I also have to delete the onload in the body tag. Otherwise it will show "M" for a split second and then change to "XS" (the first record).
Is it possible to select a default from the database in the javascript function?
Sorry for the long post. This is the link to one of the product pages: http://www.segufixshop.eu/detail_en.php?recordID=13

Having the body tag like this:
<body onload="showprice()">
and the select attribute like this:
<?php if ($row_rssizedefault['size_id']=='4') {echo "selected=\"selected\"";} ?>
preselects size "M" in the size menu, but then the size menu is populated with all size choices and not size choices relevant to the version.
Is it possible to change the body tag, so that the size menu will populate according to the version menu without resetting the size to "XS"?
<body onload="WA_FilterAndPopulateSubList(rssize_WAJA,MM_findObj('SelectVersion'),MM_findObj('SelectSize'),0,0,false,': '); showprice()">