Fill two fields from one drop-list

howard-moore · 12-29-2012, 07:47 PM

Hi All,

I have a bit of a tricky PHP/MySQL/JavaScript issue that I hope someone can help me with. I have a dynamically created drop-list (select) as follows:

Code:

<?php
	$sql = "SELECT * FROM `$filename` ORDER BY parent_title ASC";
	$sql_result = mysql_query ($sql, $connection ) or die ('request "Could not execute SQL query" '.$sql);
	while ($row = mysql_fetch_assoc($sql_result)) {
		if ($row["parent_title"]<>'') {
			echo '<option value="';
			echo nl2br(stripslashes(utf8_decode($row["parent_code"]))).'">';
			echo nl2br(stripslashes(utf8_decode($row["parent_title"]))).'</option>';			
		};
	};
?>

There are two fields here: 'parent_code' and 'parent_title'. What I want to do is have it so that when 'parent_title' is selected (which is what is shown because it is a more user-friendly text entry) it fills in a form field for 'parent_code' AND 'parent_title'. I presume that this is possible using JS, but I confess that I don't know how it can be done. Can anyone give me any pointers?

Thanks,
Neil

xelawho · 12-29-2012, 08:37 PM

so the code is the value and the title is the option text?

Code:

<body>
<form>
<select onchange="fillFields(this)">
<option value="">select</option>
<option value="3869">gone with the wind</option>
<option value="3482">fight club</option>
</select>
<input name="code"/><input name="title"/> 
</form>
<script type='text/javascript'>
function fillFields(sel){
sel.form.code.value=sel.value;
var txt=sel.value==""?"":sel.options[sel.selectedIndex].text;
sel.form.title.value=txt;
}
</script>
</body>

howard-moore · 12-30-2012, 02:07 PM

Hi,

That's right, but I need to save both fields, and the plan is that when the user selects the text, it also populates the code field. I'll have a play with what you suggest and see how it goes - huge thanks for the help!

Neil

vwphillips · 12-30-2012, 02:57 PM

Code:

<body>
<script type='text/javascript'>

var ary=[
 [['code',''],['title','']],
 [['code','23'],['title','123']],
 [['code','323'],['title','423']]
];

function fillFields(sel,ary){
 var i=sel.selectedIndex,ary=ary[i];
 sel.form.code.value=sel.value;
 if (ary){
  for (var z0=0;z0<ary.length;z0++){
   if (ary[z0]&&sel.form[ary[z0][0]]){
    sel.form[ary[z0][0]].value=ary[z0][1]||'';
   }
  }
 }
}

function fillFields1(sel,ary){
 var s=sel.value.split(':'),args=fillFields1.arguments;
 for (var z0=1;z0<args.length;z0++){
  if (sel.form[args[z0]]){
   sel.form[args[z0]].value=s[z0-1]||'';
  }
 }
}

</script>
<form>
<select onchange="fillFields(this,ary);">
<option value="">select</option>
<option value="3869">gone with the wind</option>
<option value="3482">fight club</option>
</select>
<input name="code"/><input name="title"/>
<br />
<select onchange="fillFields1(this,'code1','title1');">
<option value="">select</option>
<option value="38:69">gone with the wind</option>
<option value="34:82">fight club</option>
</select>
<input name="code1"/><input name="title1"/>

</form>
</body>