I have a validated form with JS and need to send via PHP to BD

Question

I have a validated form with JS and need to send via PHP to BD

Navigation

#1 by (1 votes)

3

I have a simple form, validated with javascript , and I need to send via POST to a PHP file that will insert via mysql database, however when I leave script JS in form it does not send to PHP , could anyone help me?

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>

php javascript

asked by anonymous 02.10.2017 / 21:07

1 answer

How to perform a query of a query stored in a string through class DB? Excel can not read cell in VB code

score 1 · Accepted Answer

You must indicate in the action property of your form the PHP page that will request the data. In order for the data to be sent you need to submit for this page, you can do this by javascript or by elements with type="submit" .

Another important thing when you call event.preventDefault(); on the click of the button will prevent submit from being performed:

event.preventDefault ();

If this method is called, the default action will not be triggered.

I have missed parts of the code, such as the method that displays the error so I created one only to be able to demonstrate:

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>