使用调用php函数（从sql数据库获取信息）的javascript编辑html。

Question

i am trying to edit a select list every time the list before it is being changed. what i am trying to do is change the list already existing into another list, called by a php function, that generates a list of the new information it has from the first list and an sql database.

it's pretty hard to explain so here is my code:

the base of my code

//php & html
....

$cli = lastNameList();       //first list
$tli = firstNameList();   //second list

echo"

$cli
<div id='editHtml'>$tli</div>

";

....

functions (php)

//the functions

function lastNameList(){

$options="<select id='lastNames'>"; 

$sql="SELECT * FROM lastName";
$result=mysql_query($sql); 

$options.="<option value='blank'>-- last names --</option>" ;
while ($row=mysql_fetch_array($result)) { 

$name=$row["name"]; 

$options.="<option value='$name'>$name</option>"; 
} 

$options.= "</SELECT>";
return "$options";
}


function firstNameList(){

$options="<select id='firstNames' style='margin-right:40px;'>"; 

having a problem over here:

$sql="SELECT DISTINCT Name FROM firstName WHERE LastName ='lastNameSelectedGoesHere'";
//how do i get the value of the last name so i could make a query for it?

//using distinct to make sure there are no duplicates

$result=mysql_query($sql); 

$options.="<option value='blank'>-- first name --</option>" ;
while ($row=mysql_fetch_array($result)) { 

$name=$row["Name"]; 
$options.="<option value='$name'>$name</option>"; 
} 

 $options.= "</SELECT>";
return "$options";
}

js (inside a php file if it matters)

echo"  <script type='text/javascript'>
$('#lastNames').change(function() {

 document.getElementById('eTech').innerHTML="; 

 $ll = firstNameList();
 echo"$ll;

});";

so as you can see my js file is in a php file, it does work, what i tried to do there, is generate a new first name list to come and replace the old one but i failed... anyone has an answer or suggestion to what i should do?

Answer 1

THis isn't complicated at all using ajax & jquery!

A quick dirty way is to do this

<div id="firstName"></div>
<script type='text/javascript'>
$('#lastNames').change(function() {
$('#firstName').load('getfirstname.php?lastname=' + $(this).val());
});
</script>

and for getfirstname.php page

$lastName = mysql_real_escape_string($_GET['lastname']);
$sql="SELECT DISTINCT Name FROM firstName WHERE LastName ='$lastName'";


//using distinct to make sure there are no duplicates

$result=mysql_query($sql); 
$options="<select id='firstNames' style='margin-right:40px;'>";
$options.="<option value='blank'>-- first name --</option>" ;
while ($row=mysql_fetch_array($result)) { 

$name=$row["Name"]; 
$options.="<option value='$name'>$name</option>"; 
} 

 $options.= "</SELECT>";
echo $options;

Here is a very simple page that shows how to execute php code using ajax and jquery.

<?
if(!isset($_GET['value'])):?>
<script src="jquery-1.7.1.js"></script>
<select id="select" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</options>
</select>

<div id="phpoutput"></div>

<script>
    $('#select').change(function() {
    $('#phpoutput').load('?value=' + $(this).val());
    });

</script>
<?else:
    $val = $_GET['value'];
    echo "$val sent to server. $val*3 = " . $val *3;
 ?>
<?endif;?>