Botão não dispara o evento

faylonxd · Novembro 30, 2017

Ola a Todos!! estou aprendendo php/ajax, porem nao consigo fazer o botao disparar o evento!

Meu codigo index esta assim:

<html>
<head>
	<title>Inserindo dados com PHP, Ajax e DOM</title>
	<style type="text/css">
body{
  background:#f7f7ff;
}

#geral{
  font:bold 12px trebuchet MS:
  color:blue;
  position:absolute;
  top:155px;
  left:220px;
}

p{
  text-align:center;
  font:bold 15px verdana,arial;
  color:red;
  position:absolute;
  top:200px;
  left:200px;
}

legend{
  font:bold 12px trebuchet MS;
  color:#193935;
  text-transform:uppercase;
}

	</style>
</head>
<body>
<div id="geral">

 <fieldset style="width:300px">
  <legend> Cadastro com ajax, php e DOM </legend>

   <form id="frm">
    <center>

     Apelido: <input type="text" name="nome" id="nome"><br>
     Senha:    <input type="text" name="senha" id="senha"><br>
     <input type="button" value="cadastrar" onClick="function cadastra();">

    </center>
   </form>

 </fieldset>

</div>

<script type="text/javascript">

var request = getXmlHttp();

function cadastra(){
  var nm = document.getElementById("nome").value;
  var se = document.getElementById("senha").value;
  var url= "cadastra.php?nome="+nm+"&senha="+se;
  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("geral");
    var formid = document.getElementById("frm");
    var pelement = document.createElement("p");
    var text = document.createTextNode("Parabéns " + response + ", Cadastro Concluido!");
    pelement.appendChild(text);
    divmain.replaceNode(pelement,frm);

    var ael = document.createElement("a");
    var pula = document.createElement("<br>");
    var textlink = document.createTextNode("voltar");
    
    ael.appendChild(textlink); 
    ael.setAttribute("href","Cadastro.html");
    pelement.appendChild(pula); 
    pelement.appendChild(ael); 
   }
  }
</script>

</body>
</html>

Porem, ao executar a pagina, preencher os campos e clicar no botao, nada acontece!

Alem desses tenho os arquivos php para conectar ao BD e o arquivo php que executara a inserção dos dados no DB

Gleyson Abreu · Novembro 30, 2017

2 horas atrás, faylonxd disse:

<input type="button" value="cadastrar" onClick="function cadastra();">

Deixe apenas cadastra()

Use:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Eu adicionaria essa function também já que seu: var request = getXmlHttp(); está dando como inexistente.

function getXMLHTTP() {
           var x = false;
           try {
              x = new XMLHttpRequest();
           }catch(e) {
             try {
                x = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(ex) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1) {
                    x = false;
                }
             }
          }
          return x;
        }
        
var request = getXMLHTTP();

No Internet Explore o seu código funciona da a mensagem de "Parabéns, Cadastrado Concluido!" , Nos outros navegadores que testei deu um erro na seguinte linha:

 divmain.replaceNode(pelement,frm);

Com a seguinte mensagem no Microsoft Edge:

Citar

Object doesn't support property or method 'replaceNode'

Já no Google Chrome a seguinte mensagem:

Citar

Uncaught TypeError: divmain.replaceNode is not a function
at XMLHttpRequest.confirma

Eu li um pouco sobre o replaceNode é parece que ele não e nativo dos navegadores atuais e sim baseado no replaceChild, aqui esta a documentação https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

Sou um muito leigo no assunto mais só consegui resolver até esse ponto.

E a área está errada, pois era para ter postado na área de JavaScript.

Qualquer coisa de um Ctrl+shift+i e vai na aba Console lá fica os erros dos códigos.