I'm having issues trying to figure out how to dynamically populate form fields using database fields. The code I'm using is as follows:
<form id="notes" name="notes" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<table width="700" border="0.5" align="center">
<tr>
<td colspan="6" style="text-align:center">
<select name="noteselect" id="noteselect" onchange="<?php ?>">
<option value="new">
Add new...
</option>
<?php
if(isset($_COOKIE['deceasedID']))
{
$SqlStatement = "SELECT PK_Notes, Note_Title, Date_Entered FROM Notes WHERE FK_Deceased = '".$_COOKIE['deceasedID']."'";
$res = ExecuteSQL($SqlStatement, true);
while($row = mysqli_fetch_array($res))
{
echo "<option value='".$row['PK_Notes']."'>".$row['Note_Title']." - ".$row['Date_Entered']."</option>";
}
$error = " ";
}
In this snippet, the ExecuteSQL function runs the mysqli_connect/query/close functions and then returns a result set
What I'd like to do is to use the onchange event for the select tag to run a php script that runs a mysqli function that populates the fields with the data. I think I'd have to use javascript to dynamically edit the field's innerHTML with the data from the result set, but how do I embed the javascript into the php function? I've tried doing the following, keep in mind, the $SqlStatement variable contains the sql statement, and the statement does work, I've run it directly on the db and it works:
$res = ExecuteSQL($SqlStatement, true)
$row = mysqli_fetch_array($res)
<script type="text/javascript">document.getElementById(*fieldname*).value = $row['db_row_name']</script>
Yet this does nothing, so I don't know whats wrong here. Is it not possible to use a php function to run javascript and dynamically update fields? Or would it be better to just use 100% javascript to do this and run any sql through embedded php in the javascript? Any help would be appreciated.
I tried to provide a sample here to solve this type of problem.
This will give an idea of how AJAX will be used to populate dynamic content from PHP.
** HTML file ** $(document).ready(function() { $('#select1').change(function() {
//Get current item's value
var select1 = $(this).val();
$.ajax({
url : "getOptions.php?select1=" + select1,
success : function(data) {
var result, opts = "";
//We get comma separated data
result = data.split(',');
//Prepare options
for(var i = 0; i < result.length; i++) {
opts += "<option value='" + result[i] + "'>" + result[i] + "</option>";
}
//Populate second select
$('#select2').html(opts);
},
error : function() {
alert("Error");
}
});
});
//By default populate options for currently selected item
$('#select1').trigger('change');
});
</script>
</head>
<body>
<form>
<p>
Select 1
<select id='select1'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
Select 2
<select id='select2'>
</select>
</p>
</form>
</body>
</html>
** PHP File (getOptions.php) **
<?php
$select1 = $_GET['select1'];
$result = "";
/*
Here fetch data and return to front-end
*/
//following is used to generate some dummy code.
for ($i=1; $i<=5; $i++) {
if($result != "") $result .= ",";
$result .= $select1.$i;
}
echo $result;
?>
I am just sending comma separated values from back-end. You can try JSON.
Also I am sending some dummy code from back-end. You can use your DB to fetch results and send to front-end.