mauricio.imbe

Preciso de ajuda:

Quero fazer um formulário de cadastro interativo e dinâmico. Alguns campos textfield normais e outros dinâmicos combobox.
PHP, MySql e JavaScript + Ájax são meus aliados...

Eu estou preenchendo alguns campos do form normalmente, então seleciono uma combobox e vejo que não foi cadastrado determinado item. Eis que ao lado da combo tenho um botão para cadastrá-lo naquele instante! Clico no botão, que faz surgir uma div (outro form) que faz o cadastro do novo item no servidor, retorna mensagem de sucesso e atualiza o combobox, tudo isso sem REFRESH, já que tenho campos que foram digitados.

O que já consegui fazer:

1- form que clica, aparece a div com o outro form.
2- Cadastra o novo item e retorna a mensagem de sucesso

O que não consegui fazer:

1- recarregar apenas o combobox com os dados do db.



Estrutura do db:

id | nome



index.php

&lt;script type="text/javascript" src="ajax.js"></script>
<input type="text" />
<div id="pai">
<div id="filho">
<?

include("combobox.php");

?>
</div>
</div>
<input type="submit" name="button" id="button" value="Submit" onclick="document.getElementById('novo_item').style.display='block'" />


<div style="display:none; border:1px solid gray;" id="novo_item">
 <form id="frm">
	<center>

	 novo item
	   <input type="text" name="nome" id="nome">
	  <input type="button" value="cadastrar" onclick="cadastra();">

	</center>
  </form>
</div>


&lt;script language="javascript">
// cadastro com PHP, javascript, DOM, xmlhttprequest
var request = getXmlHttp();

function cadastra(){
  var nm = document.getElementById('nome').value;
  var url= "cadastra.php?nome="+nm;
  request.open('GET', url, true);
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.onreadystatechange = confirma;
  request.send(null);
}

function confirma(){

  if(request.readyState == 4){
	var response = request.responseText;
	var divmain = document.getElementById('novo_item');
	var formid = document.getElementById('frm');
	var pelement = document.createElement("p");
	var text = document.createTextNode("Parabens  " + response + ", Cadastro Concluido! ");
	pelement.appendChild(text);
	divmain.replaceNode(pelement,frm);

	var ael = document.createElement("button"); //cria um elemento

	var textlink = document.createTextNode("voltar"); //cria um texto
	
	ael.appendChild(textlink);  //insere texto
	ael.setAttribute("type","onclick");
	ael.onclick = function () {include_combobox()};
		
	//document.appendChild(ael);

		
		
	pelement.appendChild(ael); //insere elemento
   }
 
  }
  
	function include_combobox(){
	
	document.getElementById('filho').innerHTML = "combobox.php";
	}
	
//function include_combobox()
//		{
//		   alert ('hello');
//		}
//</script>

ajax.js

function getXmlHttp() {
var xmlhttp;
try{
 xmlhttp = new XMLHttpRequest();
}catch(ee){
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
	xmlhttp = false;
  }
 }
}
return xmlhttp;
}

combobox.php

<?

include("config.php");
$select = "SELECT * FROM clientes";

$query = mysql_query($select) or die("Não foi possível realizar consulta ao banco de dados Clientes.");


if ($_REQUEST['pagina'] == "novo_item"){
 echo '<input name="text" id="text">';
} else {
 
  echo '<select name="select" id="select">';
	
?>

<?	
	while($row = mysql_fetch_array($query)){
		$id		 = $row["id"];
		$nome_list	 = $row["nome"];
		
	echo "<option>";	
	echo $nome_list;
	echo "</option>";	
	}
	}
?>

cadastra.php

<?
include "config.php";

$nm = addslashes(trim($_REQUEST['nome']));

$sql = "INSERT INTO clientes(nome) VALUES ('$nm')";
$cadastra = mysql_query($sql, $conn);
if(!$cadastra){
echo "Não foi possivel realizar seu cadastro!";
}else{
echo $nm;
}
mysql_close();
?>

Qualquer luz....


Agradeço à todos!