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
<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>
<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!
