[RESOLVED] How do I populate multiple text boxes from a dropdown (I can populate 1 text box!)

shure2 · Mar 19, 2010

Below is the code I use to populate a textboxes (compaddress) when I select the compname from the dropdown.

I would like to be able to populate other textboxes such as the compdescription, compmaincontact and others when I select the compname from the dropdown.

I think that I need an array but I really would like some advice on how to do it as all of my attempts have failed so far

appreciate any help you can give!


<script type="text/javascript">
function showname(what)
{
  what.form.textfield.value=what.options[what.selectedIndex].title
}

window.onload=function() {
  showname(document.form1.number)
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Untitled Document</title>
</head>

<body>
    <form> 
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }



mysql_select_db("mct", $con);

//Query
$query1 = "SELECT * FROM company ".
"ORDER BY compname ";
$result1 = mysql_query($query1) or die(mysql_error());

//$result = mysql_query ($query);
echo "<select name=\"compid\" onchange=\"showname(this)\">";

// printing the list box select command
while($row1=mysql_fetch_array($result1)){
    echo "<option value=\"$row1[compid]\" title=\"$row1[compaddress]\">$row1[compname]</option>";
    //echo "<option value=\"$row1[compid]\" title=\"$row1[compdescription]\">$row1[compname]</option>";
}

echo "</select>";// Closing of list box
?>
      <label>
      <input type="text" name="textfield" value="" />
      <input type="text" name="textfield2" value="" />
      </label>
      <input name="submit" type="submit" id="submit" value="Aceptar" />
</form>
</body>
</html>

BIOSTALL · Mar 20, 2010

Good evening,

Try something like below. Build a Javascript array first using PHP. I haven't tested the code so it might not work but hopefully you'll get the gist

<?php
$con = mysql_connect("localhost","root","");
if (!$con) { die('Could not connect: ' . mysql_error()); }
$db = mysql_select_db("mct") or die('Could not select DB: ' . mysql_error()); 
?>
<html>
<head>
<script type="text/javascript">
	var compInfoArray = new Array();

<?php
	$query1 = "SELECT * FROM company ORDER BY compname";
	$result1 = mysql_query($query1) or die(mysql_error());

	// build javascript array
	while($row1=mysql_fetch_array($result1)){ 
		echo 'compInfoArray['.$row1['compid'].'] = new Array();';
		echo 'compInfoArray['.$row1['compid'].']["compname"] = "'.$row1['compname'].'";';
		echo 'compInfoArray['.$row1['compid'].']["compdescription"] = "'.$row1['compdescription'].'";';
	}
?>

function showname() {
	var compid = document.form1.compid.value;
	document.form1.compname.value = compInfoArray[compid]["compname"];
	document.form1.compdescription.value = compInfoArray[compid]["compdescription"];
}

window.onload=function() {
	showname();
} 

</script>
</head>
<body>
	<form name="form1">  

		<select name="compid" onchange="showname()">
		<?php
			$query1 = "SELECT * FROM company ORDER BY compname";
			$result1 = mysql_query($query1) or die(mysql_error());

		// build javascript array
		while($row1=mysql_fetch_array($result1)){ 
			echo '<option value="'.$row1['compid'].'">'.$row1['compname'].'</option>';
		}
	?>
	</select>
	<label>
		<input type="text" name="compname" value="" />
		<input type="text" name="compdescription" value="" />
  	</label>
	<input name="submit" type="submit" id="submit" value="Aceptar" /> 
</form>
</body>
</html>

Let me know if you have any questions about the above,

BIOSTALL

shure2 · Mar 21, 2010

BIOSTALL;10946735 wrote:

Good evening,

Try something like below. Build a Javascript array first using PHP. I haven't tested the code so it might not work but hopefully you'll get the gist

<?php
$con = mysql_connect("localhost","root","");
if (!$con) { die('Could not connect: ' . mysql_error()); }
$db = mysql_select_db("mct") or die('Could not select DB: ' . mysql_error()); 
?>
<html>
<head>
<script type="text/javascript">
	var compInfoArray = new Array();

<?php
	$query1 = "SELECT * FROM company ORDER BY compname";
	$result1 = mysql_query($query1) or die(mysql_error());

	// build javascript array
	while($row1=mysql_fetch_array($result1)){ 
		echo 'compInfoArray['.$row1['compid'].'] = new Array();';
		echo 'compInfoArray['.$row1['compid'].']["compname"] = "'.$row1['compname'].'";';
		echo 'compInfoArray['.$row1['compid'].']["compdescription"] = "'.$row1['compdescription'].'";';
	}
?>

function showname() {
	var compid = document.form1.compid.value;
	document.form1.compname.value = compInfoArray[compid]["compname"];
	document.form1.compdescription.value = compInfoArray[compid]["compdescription"];
}

window.onload=function() {
	showname();
} 

</script>
</head>
<body>
	<form name="form1">  

		<select name="compid" onchange="showname()">
		<?php
			$query1 = "SELECT * FROM company ORDER BY compname";
			$result1 = mysql_query($query1) or die(mysql_error());

		// build javascript array
		while($row1=mysql_fetch_array($result1)){ 
			echo '<option value="'.$row1['compid'].'">'.$row1['compname'].'</option>';
		}
	?>
	</select>
	<label>
		<input type="text" name="compname" value="" />
		<input type="text" name="compdescription" value="" />
  	</label>
	<input name="submit" type="submit" id="submit" value="Aceptar" /> 
</form>
</body>
</html>

Let me know if you have any questions about the above,

BIOSTALL

This worked perfectly, the comments help my understanding, thanks!

bradgrafelman · Mar 22, 2010

Don't forget to mark this thread resolved (if it is) using the link on the Thread Tools menu.

shure2 · Apr 3, 2010

My attempt at trying to get the 1st combo box to try and populate the values of the 2nd combo box (all from a database).

<?php
require "session_logincheck.php";

function selectProductAndPopulate()
{
    require "product_details.php";
    require "connect.php";
?>
<html>
<script type="text/javascript">
	var prodDetailsArray = new Array();
        var prodSpecificDetailsArray = new Array();



<?php
	$selectProductQuery = "SELECT * FROM product ORDER BY prodname";
	$selectProductResult = mysql_query($selectProductQuery) or die(mysql_error());


	// build javascript array
	while ($prodrow1=mysql_fetch_array($selectProductResult))

                {

                    echo 'prodDetailsArray['.$prodrow1['prodid'].'] = new Array();';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodid"] = "'.$prodrow1['prodid'].'";';
		echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcompid"] = "'.$prodrow1['prodcompid'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcode"] = "'.$prodrow1['prodcode'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodname"] = "'.$prodrow1['prodname'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodcategory"] = "'.$prodrow1['prodcategory'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["produnitprice"] = "'.$prodrow1['produnitprice'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["prodphoto"] = "'.$prodrow1['prodphoto'].'";';
                    echo 'prodDetailsArray['.$prodrow1['prodid'].']["proddescription"] = "'.$prodrow1['proddescription'].'";';


	}

            $selectProductDetailsQuery = "SELECT * FROM productdetail ORDER BY proddetfield";
	$selectProductDetailsResult = mysql_query($selectProductDetailsQuery) or die(mysql_error());


	// build javascript array
	while ($proddetrow1=mysql_fetch_array($selectProductDetailsResult))

                {

                    echo 'prodSpecificDetailsArray['.$proddetrow1['proddetid'].'] = new Array();';
		echo 'prodSpecificDetailsArray['.$proddetrow1['proddetid'].']["proddetvalue"] = "'.$proddetrow1['proddetvalue'].'";';


	}


?>

function showProductName() {
	var prodid = document.prodform.prodid.value;
	document.prodform.prodcompid.value = prodDetailsArray[prodid]["prodcompid"];
            document.prodform.proddetid.value = prodDetailsArray[prodid]["prodid"];
            document.prodform.prodcode.value = prodDetailsArray[prodid]["prodcode"];
	document.prodform.prodname.value = prodDetailsArray[prodid]["prodname"];
            document.prodform.prodcategory.value = prodDetailsArray[prodid]["prodcategory"];
            document.prodform.produnitprice.value = prodDetailsArray[prodid]["produnitprice"];
            document.prodform.prodphoto.value = prodDetailsArray[prodid]["prodphoto"];
            document.prodform.proddescription.value = prodDetailsArray[prodid]["proddescription"];


}

    function showProductSpecName() {
	var proddetid = document.prodform.proddetid.value;
	document.prodform.editproddetvalue.value = prodSpecificDetailsArray[proddetid]["proddetvalue"];
    }


window.onload=function() {
	showProductName();
            //showProductSpecName();

}

</script>


<form name="prodform">
    <div id="topl">
        <div class ="toplpost">
            <h1 class="title"> Select a product </h1>
            <div class="entry">
                <select name="prodid" onchange="showProductName()">
                <?php
                $selectProductQuery = "SELECT * FROM product where userid = '".$_SESSION['userid']."' ORDER BY prodname";
                $selectProductResult = mysql_query($selectProductQuery) or die(mysql_error());

            while($prodrow1=mysql_fetch_array($selectProductResult))
            {
                echo '<option value="'.$prodrow1['prodid'].'">'.$prodrow1['prodname'].'</option>';
                $productID = $prodrow1['prodid'];
            } ?>
	</select>
            <?php echo $productID; ?>
        </div>
    </div>
</div>

<div id="topm">
    <div class ="topmpost">
        <h1 class="title"> Select a product detail </h1>
        <div class="entry">
            <select name="proddetid" onchange="showProductSpecName()">
            <?php
            $selectProductDetailsQuery = "SELECT * FROM productdetail where prodid = '".$productID."' ORDER BY proddetfield"; //this selects proddetfield with prodid's of 1, but I need it to change based on the products selcted from the 1st combo box
            $selectProductDetailsResult = mysql_query($selectProductDetailsQuery) or die(mysql_error());

            while($proddetrow1=mysql_fetch_array($selectProductDetailsResult))
            {
                echo '<option value="'.$proddetrow1['proddetid'].'">'.$proddetrow1['proddetfield'].'</option>';
            } ?>
            </select>
        </div>
    </div>
</div>
            <?php productDetails(); ?>
</form>
</html>
<?php

}?>

griffo2k · Sep 3, 2010

i have this code working on a normal table but i also have a table where i can add and delete rows and it only works on the first row in the table. Is there a way to get this to work with the dynamic table? my dropdown is populated from the database and it works fine in the dynamic rows. thanks for any help

Chasermac050 · Jan 29, 2013

Hello, I recently ran into your post, thank you for sharing this info. I'd like to know if you can help me with clearing out the textboxes if the following added statement is selected:

<form name="form1">  
	<select name="compid" onchange="showname()">
	<option value="">Select a company</option>

Thanks in advance.

BIOSTALL;10946735 wrote:

Good evening,

Try something like below. Build a Javascript array first using PHP. I haven't tested the code so it might not work but hopefully you'll get the gist

<?php
$con = mysql_connect("localhost","root","");
if (!$con) { die('Could not connect: ' . mysql_error()); }
$db = mysql_select_db("mct") or die('Could not select DB: ' . mysql_error()); 
?>
<html>
<head>
<script type="text/javascript">
	var compInfoArray = new Array();

<?php
	$query1 = "SELECT * FROM company ORDER BY compname";
	$result1 = mysql_query($query1) or die(mysql_error());

	// build javascript array
	while($row1=mysql_fetch_array($result1)){ 
		echo 'compInfoArray['.$row1['compid'].'] = new Array();';
		echo 'compInfoArray['.$row1['compid'].']["compname"] = "'.$row1['compname'].'";';
		echo 'compInfoArray['.$row1['compid'].']["compdescription"] = "'.$row1['compdescription'].'";';
	}
?>

function showname() {
	var compid = document.form1.compid.value;
	document.form1.compname.value = compInfoArray[compid]["compname"];
	document.form1.compdescription.value = compInfoArray[compid]["compdescription"];
}

window.onload=function() {
	showname();
} 

</script>
</head>
<body>
	<form name="form1">  

		<select name="compid" onchange="showname()">
		<?php
			$query1 = "SELECT * FROM company ORDER BY compname";
			$result1 = mysql_query($query1) or die(mysql_error());

		// build javascript array
		while($row1=mysql_fetch_array($result1)){ 
			echo '<option value="'.$row1['compid'].'">'.$row1['compname'].'</option>';
		}
	?>
	</select>
	<label>
		<input type="text" name="compname" value="" />
		<input type="text" name="compdescription" value="" />
  	</label>
	<input name="submit" type="submit" id="submit" value="Aceptar" /> 
</form>
</body>
</html>

Let me know if you have any questions about the above,

BIOSTALL

BIOSTALL · Jan 30, 2013

Sure. Simply update the showname() function like so:

function showname() {
	var compid = document.form1.compid.value;
	if (compid == "") {
		document.form1.compname.value = "";
		document.form1.compdescription.value = "";
	}else{
		document.form1.compname.value = compInfoArray[compid]["compname"];
		document.form1.compdescription.value = compInfoArray[compid]["compdescription"];
	}
}

We're checking if the dropdown is empty or not and emptying the textfields if a blank option is selected.

Chasermac050 · Jan 30, 2013

I appreciate all your help! Have a great day!

BIOSTALL;11023397 wrote:
Sure. Simply update the showname() function like so:
function showname() {
	var compid = document.form1.compid.value;
	if (compid == "") {
		document.form1.compname.value = "";
		document.form1.compdescription.value = "";
	}else{
		document.form1.compname.value = compInfoArray[compid]["compname"];
		document.form1.compdescription.value = compInfoArray[compid]["compdescription"];
	}
}
We're checking if the dropdown is empty or not and emptying the textfields if a blank option is selected.

bayinghound · Jul 2, 2013

I got the drop down working but the textfields are not being populated.

bayinghound · Jul 14, 2013

I'm using this script along with cloning. Mind you I'm a complete newbee. What I'd like to do is add rows and use the same population as seen here. It will work for the first row but not the cloned rows. Please help.

<?php
$con = mysql_connect("localhost","user","pass");
if (!$con) { die('Could not connect: ' . mysql_error()); }
$db = mysql_select_db("db") or die('Could not select DB: ' . mysql_error()); 
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/reCopy.js"></script>
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

$('a.add').relCopy({ append: removeLink});
});
</script>
<script type="text/javascript">
	var compInfoArray = new Array();

<?php
	$query1 = "SELECT * FROM bha_product ORDER BY product";
	$result1 = mysql_query($query1) or die(mysql_error());

	// build javascript array
	while($row1=mysql_fetch_array($result1)){ 
		echo 'compInfoArray['.$row1['productid'].'] = new Array();';
		echo 'compInfoArray['.$row1['productid'].']["product"] = "'.$row1['product'].'";';
		echo 'compInfoArray['.$row1['productid'].']["description"] = "'.$row1['description'].'";';
                    echo 'compInfoArray['.$row1['productid'].']["price"] = "'.$row1['price'].'";';
	}
?>

function showname() {
	var productid = document.form1.productid.value;
	document.form1.product.value = compInfoArray[productid]["product"];
	document.form1.description.value = compInfoArray[productid]["description"];
	document.form1.price.value = compInfoArray[productid]["price"];
}

window.onload=function() {
	showname();
} 

</script>
</head>
<body>
	<form name="form1">  

	<p class="clone"> 	
	         <select name="productid" onchange="showname()">
		<option value="">Select Product</option>
		<?php
			$query1 = "SELECT * FROM bha_product ORDER BY product";
			$result1 = mysql_query($query1) or die(mysql_error());

		// build javascript array
		while($row1=mysql_fetch_array($result1)){ 
			echo '<option value="'.$row1['productid'].'">'.$row1['product'].'</option>';
		}
	?>
	</select>
	<label>
		<input type="text" name="product" value="" />
		<input type="text" name="description" value="" />
		<input type="text" name="price" value="" />
  	</label></p><p><a href="#" class="add" rel=".clone">Add More</a></p>

<br>	


<input name="submit" type="submit" id="submit" value="Aceptar" /> 
</form>
</body>
</html>

boyangaZ · Jul 21, 2013

can someone help me with my query -- > http://board.phpbuilder.com/showthread.php?10390331-session-variable-as-selected-in-a-listbox&p=11031441#post11031441

please

[RESOLVED] How do I populate multiple text boxes from a dropdown (I can populate 1 text box!)

Sshure2

BBIOSTALL

Sshure2

Bbradgrafelman

Sshure2

Ggriffo2k

CChasermac050

BBIOSTALL

CChasermac050

Bbayinghound

Bbayinghound

BboyangaZ