OnClick to display result

Question

OnClick to display result

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (-1 votes)

0

I got a code that when something is typed in the input, it loads the data without refresh on the page, but I wanted to do this through button, thus avoiding bugs.

I am not able to convert the code to execute with button.

My .js code:

$("#busca").keyup(function(){
    var campo = $("#busca").val();
    $.post('processa.php', {campo: campo},function(data){
    $("#result").html(data);
    });
});

processa.php

$campo = $_POST['campo'];

$result = "SELECT * FROM usuario WHERE nome = '$campo'";
$resultado = mysqli_query($conn, $result);

if($resultado->num_rows != 0 ){
    while($row = mysqli_fetch_assoc($resultado)){
    echo $row('nome');
    echo $row(senha);
    echo $row(data_nasc);
} else { 
    "Nenhum usuário encontrado" 
   }

form:

<form action="processa.php" method="POST">
      <input type="text" class="form-control" name="busca" placeholder="Nome">
      <button id="executar" type="button" class="btn btn-warning"">Buscar</button>
</form>

php jquery

asked by anonymous 11.10.2018 / 21:25

3 answers

1

The following code should resolve:

$("body").on('click', '#executar', function(e) {
    e.preventDefault();
    const campo = $("#busca").val();

    $.post('processa.php', {campo: campo}, function(data) {
       $("#result").html(data);
    });

    return false;
});

11.10.2018 / 21:32

-1

You can try something like this: $ ("# idBotao"). onclick (remainder of the function), I believe only this exchange will suffice.

11.10.2018 / 21:29

Eloquent Laravel - Migration e Model Serialize form does not handle the table

score 1 · Accepted Answer

Only change from keyup to click

Description: bind an event handler to the event   JavaScript "click" or trigger this event on an element.   This method is a .on("click", handler) shortcut in the first two variations and     .trigger("click") in the third. The click event is sent to an element when the mouse pointer is over the element and the mouse button is pressed and released. Any HTML element can receive this event.

Source: link

$("#executar").click(function() {
  var campo = $("#busca").val();
  $("#result").html(campo);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="busca" type="text" />
<button id="executar" type="button" class="btn btn-warning">Buscar</button>
<div id="result"></div>