Galera, este é o meu primeiro post. Desculpa se não segui alguma regra/etiqueta de publicação.
Fiz um formulario em html que manda dados para um arquivo em php. Depois coloquei ajax pra não dar reload na pag. Até aí ok. Mas o html e ajax estão no mesmo scrip e quero separar eles.
O formulario tem um botao de responder. Então pensei em fazer no arquivo js. um querySelector com o id do formulario e addEventListener, e, quando o click ocorresse, ele executaria o ajax. É possível fazer isso?
1 - Ajax
<script>
$(document).ready(function(){
$("#form_resp_<?=$row['id']?>").submit(function(e){
//event.preventDefaut();
$.ajax({
method: 'POST',
url : 'banco-responder.php',
data: {
id : $("#id-resposta-<?=$row['id']?>").val() ,
resposta : $("#resposta-pergunta-<?=$row['id']?>").val()
}
}).done(function(data){
console.log($("#card-<?=$row['id']?>").hide());
alert("Respondido com Sucesso!");
}).fail(function(){
alert('Deu pau');
});
return false;
});
});
</script>
2 - Query Selector/addEventListener:
<script>
var botaoResponder = document.querySelector("#botao_resp_<?=$row['id']?>");
botaoResponder.addEventListener("click", function(){
alert("teste: Botão responder foi clicado com sucesso!!!");
});
</script>
Quero colocar o ajax dentro do addEventListener quando o click acontecer e depois assim separar os arquivos. Como posso fazer isso?