Page redirection when performing research

Asked

Viewed 42 times

-5

Personal I have the following code below: Where the user will perform the search in the input, and will click the "button " next, where activates the onclick event that redirects the same to page with the searched parameter, however I wanted it to work when the user pressed the ENTER of the keyboard but I can’t make it work I tried several ways, at the end of the code has a script to capture the ENTER click and perform the action of searching, however it does not work, and if I take the comment from Alert, it works but the redirect does not.

Another thing I also found interesting is the following if I remove input from the script, the code works if I type the search and give ENTER out of the input, who wants to test: https://cilojas.com.br/Portal/empresas.php?cidade=Tupi%20Paulista&empresa=All

<?php

$get_cidade = $_GET['cidade'];
$pesq_cidade = $get_cidade;

$get_empresa = $_GET['empresa'];
$pesq_empresa = $get_empresa;

?>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <title>CI - Lojas</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico"/>

    <link rel="stylesheet" type="text/css" href="View/_css/home-css.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="index.php">
        <img src="img/logo-contorno.webp" style="padding-left: 25px; padding-right: 10px;" class="d-inline-block align-top" alt="Logo" loading="lazy">
        CI Lojas
    </a>
</nav>

<div class="container-fluid">
    <div class="row" style="padding-bottom: 30px;">
        <form autocomplete="off" method="POST" id="form-pesquisa-empresa" action="">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Empresa..." name="pesquisa" id="pesquisa">
                <a id="btn-pesquisa" class="btn-submit" href="#" onclick="this.href='empresas.php?cidade=<?php echo $pesq_cidade?>&empresa='+document.getElementById('pesquisa').value">Pesquisar</a>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="card-group">
            <?php include_once "cards.php"; ?>
        </div>
    </div>
</div>

    
    <footer>
        <div class="footer">
            <p class="footer-heart">Feito com <img class="emoji" alt="heart" height="20" width="20" src="img/love.webp"></g-emoji></i> por <a href="https://centerinformatica.com.br/">Center Informática</a></p>
        </div>
    </footer>

    <script>
        $(document).on("keypress", "input", function(e){
            if(e.which === 13){
                var paramSearch = $(this).val();
                window.location.href = "empresas.php?cidade=<?php echo $pesq_cidade?>&empresa="+paramSearch;
                //alert("Pesquisou por: " + paramSearch);
            }
        });
    </script>

</body>
</html>

php javascript html jquery

  • Important you [Dit] your question and explain objectively and punctually the difficulty found, accompanied by a [mcve] of the problem and attempt to solve. To better enjoy the site, understand and avoid closures and negativities worth reading the Stack Overflow Survival Guide in English.

1 answer

1


When triggering ENTER in the last field of a form the browser will trigger the form Submit. Therefore, a request is being generated through the POST method for the page itself.

To avoid the default behavior you can call the e.preventDefault() function; after the IF checking the key code actuated:

if(e.which === 13){
            // Adicionar a linha abaixo
            e.preventDefault();
            
            var paramSearch = $(this).val();
            window.location.href = "empresas.php?cidade=<?php echo $pesq_cidade?>&empresa="+paramSearch;
            //alert("Pesquisou por: " + paramSearch);
        }

Browser other questions tagged php javascript html jquery

You are not signed in. Login or sign up in order to post.