|
add new form fields, dropdown filled by mysql
Hello, I've been trying for days to bring several example codes together. I found a solution to fill a second dropdown list depending on the value of the first one. I want to implement this in another script, which allows to add a new set of form fields by clicking an "add" button within a <div>. The latter already works, but the second ajax call to a php script to populate the dropdown does not. I get messed up with parentNode etc...
Actually I want to get rid of the dependency between the two select lists. The most important is, that each form element has unique names and that the second select gets filled by the mysql table (better already onload, what does not work at all).
Any help is much appreciated!
Here's my puzzle so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[NEW] Generate more fields</title>
<script type="text/javascript">
<!--
function getMore(theId, myParent){
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
responcer = ajaxRequest.responseText.split(",");
size = responcer.length - 1;
myParent.(second + counter).innerHTML = "";
for(i = 0; i <= size;i=i+2)
if(responcer[i] != "")
myParent.(second + counter).innerHTML += '<option value="' + responcer[i] + '">' + responcer[i+1] + '</option>';
}
}
ajaxRequest.open("GET", "grabber.php?id=" + theId, true);
ajaxRequest.send(null);
}
//-->
<!--
var counter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = function (){moreFields();};
// -->
</script>
</head>
<body>
<div id="readroot" style="display: none" onload="getMore(this.value, parentNode)">
<input type="button" value="Remove"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<input type='hidden' name='ID' id='ID'>
Study group:
<select name="first" onfocus="getMore(this.value, parentNode)">
<option value="99">please select</option>
<option value="0">cases</option>
<option value="1">controls</option>
<option value="2">cohort</option>
</select><br>
Ethnicity of group:
<select name="second"></select>
<br>
Percentage of selected ethnicity: <input type="text" name="percentage" />
</div>
<form method="post" action="show_params.php">
<span id="writeroot"></span>
<input type="button" id="btnMoreFields" onclick="moreFields();" value="Give me more fields!" />
<input type="submit" value="Send form" />
</form>
</body>
</html>
The grabber.php file just connects to the ethnicity table in the mysql DB:
<?php
//$id = (int) $_GET['id'];
//data for dropdownlist
$con = mysql_connect("localhost","root","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("new_db", $con);
$query = mysql_query("SELECT ethn_type_ID as value, ethn_type FROM ethn_type ORDER BY freq ASC;");
if(mysql_num_rows($query) != 0)
while($row = mysql_fetch_array($query))
echo $row['value']. ',' . $row['ethn_type'] . ',';
?>
|
Before you post, read our: 
