3

Tenho um formulario simples, validado com javascript, e preciso enviar via POST para um arquivo PHP que fara a inserção via banco de dados mysql, porem quando deixo o script JS no form ele não envia para o PHP, alguem poderia me ajudar ?

JS

window.addEventListener("load", main);

function main(){
    var btnSend = document.querySelector("#buttonSend");
    btnSend.addEventListener("click", validar);
}

function validar(){
    event.preventDefault();

    var form = document.querySelector("#form-paciente");
    var paciente = obtemPacienteFormulario(form);
    var erros = validaPaciente(paciente);


    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return;
    }

    // limpando a parte de erros
    form.reset();
    var mensagemerro = document.querySelector("#mensagens-erro");
    mensagemerro.innerHTML = "";
}

// criando objeto paciente
function obtemPacienteFormulario(form){
    var paciente = {
        namePatient: form.namePatient.value,
        phone: form.phone.value
    };
    return paciente;
}


// validando formulario
function validaPaciente(paciente){
    var erros = [];

    if(paciente.namePatient.length == 0) erros.push("Nome do Paciente deve ser preenchido!");

    return erros;
}

PHP

<?php

function insereProduto($conexao, $namePatient){
    $queryInsert = "insert into agenda (NOMEPACIENTE) values ('{$namePatient}')";
    return mysqli_query($conexao, $queryInsert);
}

$namePatient = $_POST["namePatient"];

$conexao = mysqli_connect('localhost','root','','agendamento');

    if(insereProduto($conexao, $namePatient)){ ?>
        <p class="text-success">Paciente <?= $namePatient; ?> ,adicionado com sucesso!</p>
    <?php } else{
        $msg = mysqli_error($conexao);
    ?>
        <p class="text-danger">Paciente <?= $namePatient; ?> não foi adicionado: <?= msg ?></p>
     <?php
    }

mysqli_close($conexao);
?>

HTML:

<!-- Html -->
<form id="#form-paciente">
    <div>
        <label for="namePatient">Nome paciente</label>
        <input type="text" class"form-input" name="namePatiente" id="namePatient">
    </div>
    <button id="#buttonSend">Enviar</button>
</form>
7
  • @CaiqueRomero coloquei o que estou usando, a pergunta ainda esta confusa ?
    – Diogo dgo
    Commented 2/10/2017 às 19:51
  • Não use "Trecho de código" (Stack Snippets) sem necessidade, leia: meta.pt.stackoverflow.com/q/2115/3635 ... O proposito dele é executar algo, se for apenas para marcação de texto (organizar teu código na pergunta) não use ele, use o "amostra de código" (Ctrl+K).
    – Syzoth
    Commented 2/10/2017 às 19:59
  • Pelo que vi faltou dar o submit do formulário Commented 2/10/2017 às 20:09
  • @CaiqueRomero eu ja isso aqui: <button type="submit" id="buttonSend" >Enviar</button>, mas nao foi
    – Diogo dgo
    Commented 2/10/2017 às 20:26
  • Solução Dá uma olhada neste link, pode te ajudar.... Commented 2/10/2017 às 23:23

1 Resposta 1

1

Você deve indicar na propriedade action do seu form a página PHP que fará a requisição dos dados. Para que os dados sejam enviados você precisa realizar o submit para essa página, você pode fazer isso pelo javascript ou através de elementos com type="submit".

Outra coisa importante quando você chama o event.preventDefault(); no clique do botão ele vai evitar que submit seja realizado:

event.preventDefault();

Se esse método for chamado, a ação padrão não será disparada.

Faltou partes do código, como por exemplo o método que exibe o erro então eu criei um somente para poder demonstrar:

function validar(){
    event.preventDefault(); //Evito o submit do formulário

    var form      = document.getElementById("#form-paciente");
    var paciente  = obtemPacienteFormulario(form);
    var erros     = validaPaciente(paciente);

    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return false;
    }else{
      form.submit(); //Envio o formulário se não houver erros.
    }
    
    // limpando a parte de erros
    form.reset();
    var campoErro = document.getElementById("#mensagens-erro");
    campoErro.innerHTML = "";

}

// criando objeto paciente
function obtemPacienteFormulario(form){
    var paciente = {
        namePatient: form.namePatient.value,
        phone: form.phone.value
    };
    return paciente;
}

function exibeMensagensDeErro(erros){
  var mensagemErro = "";
  
  for(i=0;i<erros.length;i++){
    mensagemErro = mensagemErro + erros[i];
  }
  
  var campoErro = document.getElementById("#mensagens-erro");
  campoErro.innerHTML = mensagemErro;
  
}


// validando formulario
function validaPaciente(paciente){
    var erros = [];
     
     
    if(paciente.namePatient.length == 0) 
      erros.push("<li>Nome do Paciente deve ser preenchido!</li>");
      
    if(paciente.phone.length == 0) 
      erros.push("<li>Telefone do Paciente deve ser preenchido!</li>");

    return erros;
}
<form id="#form-paciente" action="">
  <div>
    <label for="namePatient">
      Nome do paciente:
    </label>
    <input type="text" class"form-input" 
          name="namePatiente" id="namePatient">
  </div>
  
  <div>
    <label for="phone">
      Telefone do paciente:
    </label>
    <input type="text" class"form-input" name="phone" id="phone">
  </div>
  
  <button type="submit" id="#buttonSend" onclick="validar();">
    Enviar
  </button>
  
  <ul id="#mensagens-erro"></ul>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .