Ajax 生成的表单也有 ajax 调用
你好,Stackoverflow!,
好吧,这个问题可能很长,但首先我要写下我想要完成的任务。
我有一个带有“区域”(国家/地区)的下拉菜单,当选择一个区域时,有一个onchange函数,它获取值并转到 AJAX函数,回显结果的php文件(该地区的客户端),并且此结果还回显每个客户端的表单,该表单基本上是一个删除和编辑按钮。
当我点击编辑时,这也是一个AJAX调用功能,它回显了我可以编辑注册表的另一种形式。
index.php中的脚本
<script type="text/javascript">
function showUser(str){
if (str=="")
{
document.getElementById("mostrarClientes").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mostrarClientes").innerHTML=xmlhttp.responseText;
}
}
document.getElementById("mostrarClientes").innerHTML='Espere un momento porfavor...';
xmlhttp.open("GET","verClientesAjax.php?ver="+str,true);
xmlhttp.send();
}
function editUser(str){
if (str=="")
{
document.getElementById("editarClientes").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("editarClientes").innerHTML=xmlhttp.responseText;
}
}
document.getElementById("editarClientes").innerHTML='Espere un momento porfavor...';
xmlhttp.open("GET","editarClientesAjax.php?edit="+str,true);
xmlhttp.send();
}
</script>
这是我的index.php //索引页面
<form name="form2">
<select name="regiones" onchange="showUser(this.value)">
<option>Seleccione una region</option>
<?php
while($row = mysql_fetch_assoc($resultRegion)){
echo "<option value=\"".$row['idRegion']."\">".$row['nombre']."</option><br/>";
}
?>
</select>
</form>
<br />
<div id="mostrarClientes"><b>clients by region</b></div>
<div id="editarClientes"><b>form to edit the client</b></div>
这是我的verCliente.php //这是第一个ajax调用我在该区域显示客户端的位置
<?php
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("db_clients") or die(mysql_error());
header("Content-type: text/html; charset=windows-1252");
//////THIS IS THE FUNCTION THAT PRINTS THE FORM TO EDIT (IT'S IN THE RETURN)
function repr($pair){
list($a, $b) = $pair;
return "<form name=\"formEdit$b\"> <div style=\"float:left; margin-right:3px\">• $a</div> <div style=\"float:right\"> <input type=\"image\" name=\"edit\" src=\"edit.gif\" border=\"0\" title=\"editar\" value=\"$b\" onClick=\"editUser(this.value)\"></> <input type=\"image\" name=\"del\" src=\"delete.gif\" border=\"0\" title=\"eliminar\" value=\"$b\" onClick=\"if (!confirm('seguro que desea ELIMINAR el registro \'$a\' ?')) {return false} else{delUser(this.value)}\"></> </div> </form>";
}
////////////////////
//////codigo para mostrar clientes
$numReg=$_GET["ver"];
$nombreProvincia = "";
$nombreComuna = "";
$nombreGiro = "";
$nombreNombre = array();
$resultRegion = mysql_query("SELECT idRegion, nombre FROM region WHERE idRegion = '$numReg'");
$titleRegion= mysql_fetch_array($resultRegion);
$resultClientes = mysql_query("SELECT nombre.idNombre AS idNombre, nombre.nombre AS nombreNombre, comuna.nombre AS nombreComuna, giro.nombre AS nombreGiro, provincia.nombre AS nombreProvincia, provincia.region_idRegion AS idRegion FROM nombre INNER JOIN comuna ON nombre.Comuna_idComuna = comuna.idComuna INNER JOIN giro ON nombre.Giro_idGiro = giro.idGiro INNER JOIN provincia ON comuna.Provincia_idProvincia = provincia.idProvincia WHERE provincia.region_idRegion = '$numReg' ORDER BY nombreProvincia, nombreComuna, nombreGiro, nombreNombre");
$num_results = mysql_num_rows($resultClientes);
echo '<h2>'.$titleRegion['nombre'].'</h2>';
if ($num_results > 0){
while ($row = mysql_fetch_assoc($resultClientes)) {
if ($nombreProvincia == $row['nombreProvincia']) {
if ($nombreComuna == $row['nombreComuna']) {
if ($nombreGiro == $row['nombreGiro']) {
$nombreNombre[] = $row['nombreNombre'];
array_push($nombreNombre,$row['idNombre']);
}
else { //nombreGiro
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' .implode('<br />', $nombreNombre).'';
$nombreGiro = $row['nombreGiro'];
echo '</ul></td></tr><tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
else { // nombreComuna
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr>';
$nombreComuna = $row['nombreComuna'];
echo '<tr><td colspan="2" style="background-color: #FFCC00"><h4 style="margin: 0">'.$nombreComuna.'</h4></td></tr>';
$nombreGiro = $row['nombreGiro'];
echo '<tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
else { // nombreProvincia
if (!empty($nombreNombre)) {
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr></table>';
}
$nombreProvincia = $row['nombreProvincia'];
echo '<table cellspacing="1" style="background-color:#000000; float:left;margin-right:10px"><tr><td colspan="2" style="background-color: #FF6600; text-align:center"><h3 style="margin: 0">'.$nombreProvincia.'</h3></td></tr>';
$nombreComuna = $row['nombreComuna'];
echo '<tr><td colspan="2" style="background-color: #FFCC00"><h4 style="margin: 0">'.$nombreComuna.'</h4></td></tr>';
$nombreGiro = $row['nombreGiro'];
echo '<tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
if (!empty($nombreNombre)) {
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr></table>';
}
}
else{echo '<p>ningun dato fue encontrado aqui!</p>';}
?>
这是我的 editCliente.php // 这是嵌套的 ajax 调用,我在其中编辑客户端信息
<?php
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("db_clients") or die(mysql_error());
header("Content-type: text/html; charset=windows-1252");
$regEdit=$_GET["edit"];
//////dropbox results para EDITAR
$resultComunaEdit = mysql_query("SELECT idComuna, nombre FROM comuna ORDER BY nombre ASC");
$resultGiroEdit = mysql_query("SELECT idGiro, nombre FROM giro ORDER BY nombre ASC");
/////////////////////
$editSql=mysql_query("SELECT nombre.idNombre AS idNombre, comuna.nombre AS comuna, giro.nombre AS giro, nombre.nombre AS nombre FROM nombre INNER JOIN comuna ON nombre.Comuna_idComuna = comuna.idComuna INNER JOIN giro ON nombre.Giro_idGiro = giro.idGiro WHERE idNombre = '$regEdit'");
$rowEdit = mysql_fetch_array($editSql);
$regName=$rowEdit['nombre'];
$regComuna=$rowEdit['comuna'];
$regGiro=$rowEdit['giro'];
echo '<h3>========================EDITAR CLIENTES====================================</h3>';
echo 'editando registro numero: '.$regEdit.'';
echo "<form name=\"editor\" method=\"POST\" action=\"".$_SERVER['PHP_SELF']."\"><div align=\"center\">";
echo "NOMBRE CLIENTE (max 16): <input name=\"nombreNuevo\" type=\"text\" maxlength=\"16\" size=\"25\" value=\"".$regName."\"></>";
echo "GIRO: ";
echo "<input name=\"giroNuevo\" type=\"text\" style=\"background-color:#CFCFCF\" maxlength=\"16\" size=\"15\" value=\"".$regGiro."\" readonly=\"readonly\"></>";
echo "<select name=\"giroEdit\"><option value=\"\">CAMBIAR A:</option>";
while($row = mysql_fetch_assoc($resultGiroEdit)){
echo "<option value=\"".$row['idGiro']."\">".$row['nombre']."</option><br/>";
}
echo "</select>";
echo "COMUNA: ";
echo "<input name=\"comunaNuevo\" type=\"text\" style=\"background-color:#CFCFCF\" maxlength=\"20\" size=\"15\" value=\"".$regComuna."\" readonly=\"readonly\"></>";
echo "<select name=\"comunaEdit\"><option value=\"\">CABIAR A:</option>";
while($row = mysql_fetch_assoc($resultComunaEdit)){
echo "<option value=\"".$row['idComuna']."\">".$row['nombre']."</option><br/>";
}
echo "</select>";
echo "<input type=\"submit\" name=\"submitEditar\" value=\"Guardar Cambio\" onClick=\"return confirm('seguro que desea guardar cambios?');\"> </>";
echo "<input type=\"hidden\" value=\"".$regEdit."\" name=\"idEdit\" id=\"idEdit\"/>";
echo "</div></form>";
?>
第一个调用工作完美,我得到了客户端区域,但是当我单击编辑按钮时出现问题。希望你能帮助我,对这个长问题感到抱歉。
以防万一你想知道,当我提交第二个表单来编辑客户信息时,它将使用 post 方法而不是 ajax。
Hello Stackoverflow!,
ok this question might be long, but first of all im going to write what i want to accomplish.
I Have a dropdown menu with 'regions' (of a country), when a region is selected there is a function onchange which gets the value and goes to a AJAX function, the php file that echo the result (which are clients in that region), and this results also echo a form for each client, this form is basically a delete and an edit button.
When I click on edit, this is a AJAX call function too, that echo another form where i can edit the registry.
script in the index.php
<script type="text/javascript">
function showUser(str){
if (str=="")
{
document.getElementById("mostrarClientes").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("mostrarClientes").innerHTML=xmlhttp.responseText;
}
}
document.getElementById("mostrarClientes").innerHTML='Espere un momento porfavor...';
xmlhttp.open("GET","verClientesAjax.php?ver="+str,true);
xmlhttp.send();
}
function editUser(str){
if (str=="")
{
document.getElementById("editarClientes").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("editarClientes").innerHTML=xmlhttp.responseText;
}
}
document.getElementById("editarClientes").innerHTML='Espere un momento porfavor...';
xmlhttp.open("GET","editarClientesAjax.php?edit="+str,true);
xmlhttp.send();
}
</script>
this is my index.php //index page
<form name="form2">
<select name="regiones" onchange="showUser(this.value)">
<option>Seleccione una region</option>
<?php
while($row = mysql_fetch_assoc($resultRegion)){
echo "<option value=\"".$row['idRegion']."\">".$row['nombre']."</option><br/>";
}
?>
</select>
</form>
<br />
<div id="mostrarClientes"><b>clients by region</b></div>
<div id="editarClientes"><b>form to edit the client</b></div>
this is my verCliente.php //this is the first ajax call where i show the clients in the region
<?php
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("db_clients") or die(mysql_error());
header("Content-type: text/html; charset=windows-1252");
//////THIS IS THE FUNCTION THAT PRINTS THE FORM TO EDIT (IT'S IN THE RETURN)
function repr($pair){
list($a, $b) = $pair;
return "<form name=\"formEdit$b\"> <div style=\"float:left; margin-right:3px\"> $a</div> <div style=\"float:right\"> <input type=\"image\" name=\"edit\" src=\"edit.gif\" border=\"0\" title=\"editar\" value=\"$b\" onClick=\"editUser(this.value)\"></> <input type=\"image\" name=\"del\" src=\"delete.gif\" border=\"0\" title=\"eliminar\" value=\"$b\" onClick=\"if (!confirm('seguro que desea ELIMINAR el registro \'$a\' ?')) {return false} else{delUser(this.value)}\"></> </div> </form>";
}
////////////////////
//////codigo para mostrar clientes
$numReg=$_GET["ver"];
$nombreProvincia = "";
$nombreComuna = "";
$nombreGiro = "";
$nombreNombre = array();
$resultRegion = mysql_query("SELECT idRegion, nombre FROM region WHERE idRegion = '$numReg'");
$titleRegion= mysql_fetch_array($resultRegion);
$resultClientes = mysql_query("SELECT nombre.idNombre AS idNombre, nombre.nombre AS nombreNombre, comuna.nombre AS nombreComuna, giro.nombre AS nombreGiro, provincia.nombre AS nombreProvincia, provincia.region_idRegion AS idRegion FROM nombre INNER JOIN comuna ON nombre.Comuna_idComuna = comuna.idComuna INNER JOIN giro ON nombre.Giro_idGiro = giro.idGiro INNER JOIN provincia ON comuna.Provincia_idProvincia = provincia.idProvincia WHERE provincia.region_idRegion = '$numReg' ORDER BY nombreProvincia, nombreComuna, nombreGiro, nombreNombre");
$num_results = mysql_num_rows($resultClientes);
echo '<h2>'.$titleRegion['nombre'].'</h2>';
if ($num_results > 0){
while ($row = mysql_fetch_assoc($resultClientes)) {
if ($nombreProvincia == $row['nombreProvincia']) {
if ($nombreComuna == $row['nombreComuna']) {
if ($nombreGiro == $row['nombreGiro']) {
$nombreNombre[] = $row['nombreNombre'];
array_push($nombreNombre,$row['idNombre']);
}
else { //nombreGiro
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' .implode('<br />', $nombreNombre).'';
$nombreGiro = $row['nombreGiro'];
echo '</ul></td></tr><tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
else { // nombreComuna
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr>';
$nombreComuna = $row['nombreComuna'];
echo '<tr><td colspan="2" style="background-color: #FFCC00"><h4 style="margin: 0">'.$nombreComuna.'</h4></td></tr>';
$nombreGiro = $row['nombreGiro'];
echo '<tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
else { // nombreProvincia
if (!empty($nombreNombre)) {
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr></table>';
}
$nombreProvincia = $row['nombreProvincia'];
echo '<table cellspacing="1" style="background-color:#000000; float:left;margin-right:10px"><tr><td colspan="2" style="background-color: #FF6600; text-align:center"><h3 style="margin: 0">'.$nombreProvincia.'</h3></td></tr>';
$nombreComuna = $row['nombreComuna'];
echo '<tr><td colspan="2" style="background-color: #FFCC00"><h4 style="margin: 0">'.$nombreComuna.'</h4></td></tr>';
$nombreGiro = $row['nombreGiro'];
echo '<tr><td style="background-color: #FFF084">'.$nombreGiro.'</td>';
$nombreNombre = array($row['nombreNombre']);
array_push($nombreNombre,$row['idNombre']);
}
}
if (!empty($nombreNombre)) {
$nombreNombre = array_chunk($nombreNombre, 2);
$nombreNombre = array_map("repr", $nombreNombre);
echo '<td style="background-color: #CCCCFF">' . implode('<br />', $nombreNombre).'</td></tr></table>';
}
}
else{echo '<p>ningun dato fue encontrado aqui!</p>';}
?>
this is my editCliente.php // this is the nested ajax call where i edit the client info
<?php
mysql_connect("localhost", "user", "pass") or die(mysql_error());
mysql_select_db("db_clients") or die(mysql_error());
header("Content-type: text/html; charset=windows-1252");
$regEdit=$_GET["edit"];
//////dropbox results para EDITAR
$resultComunaEdit = mysql_query("SELECT idComuna, nombre FROM comuna ORDER BY nombre ASC");
$resultGiroEdit = mysql_query("SELECT idGiro, nombre FROM giro ORDER BY nombre ASC");
/////////////////////
$editSql=mysql_query("SELECT nombre.idNombre AS idNombre, comuna.nombre AS comuna, giro.nombre AS giro, nombre.nombre AS nombre FROM nombre INNER JOIN comuna ON nombre.Comuna_idComuna = comuna.idComuna INNER JOIN giro ON nombre.Giro_idGiro = giro.idGiro WHERE idNombre = '$regEdit'");
$rowEdit = mysql_fetch_array($editSql);
$regName=$rowEdit['nombre'];
$regComuna=$rowEdit['comuna'];
$regGiro=$rowEdit['giro'];
echo '<h3>========================EDITAR CLIENTES====================================</h3>';
echo 'editando registro numero: '.$regEdit.'';
echo "<form name=\"editor\" method=\"POST\" action=\"".$_SERVER['PHP_SELF']."\"><div align=\"center\">";
echo "NOMBRE CLIENTE (max 16): <input name=\"nombreNuevo\" type=\"text\" maxlength=\"16\" size=\"25\" value=\"".$regName."\"></>";
echo "GIRO: ";
echo "<input name=\"giroNuevo\" type=\"text\" style=\"background-color:#CFCFCF\" maxlength=\"16\" size=\"15\" value=\"".$regGiro."\" readonly=\"readonly\"></>";
echo "<select name=\"giroEdit\"><option value=\"\">CAMBIAR A:</option>";
while($row = mysql_fetch_assoc($resultGiroEdit)){
echo "<option value=\"".$row['idGiro']."\">".$row['nombre']."</option><br/>";
}
echo "</select>";
echo "COMUNA: ";
echo "<input name=\"comunaNuevo\" type=\"text\" style=\"background-color:#CFCFCF\" maxlength=\"20\" size=\"15\" value=\"".$regComuna."\" readonly=\"readonly\"></>";
echo "<select name=\"comunaEdit\"><option value=\"\">CABIAR A:</option>";
while($row = mysql_fetch_assoc($resultComunaEdit)){
echo "<option value=\"".$row['idComuna']."\">".$row['nombre']."</option><br/>";
}
echo "</select>";
echo "<input type=\"submit\" name=\"submitEditar\" value=\"Guardar Cambio\" onClick=\"return confirm('seguro que desea guardar cambios?');\"> </>";
echo "<input type=\"hidden\" value=\"".$regEdit."\" name=\"idEdit\" id=\"idEdit\"/>";
echo "</div></form>";
?>
the first call work perfectly i get the clients of the region, but when i click on the edit button something goes wrong. hope you can help me, and sorry about the long question.
just in case you wonder, when i submit the second form to edit the client info that's going to be with post method not ajax.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题是我正在使用输入类型图像,所以当单击时,正在刷新网站,并且 onclick 函数没有加载,所以我只是更改了按钮的输入类型图像,然后它就起作用了 =)
the problem was I was using input type image, so when clicked, was refreshing the site, nad the onclick function wasnt loading, so i just changed the input type image for a button and then it worked =)