Reputation: 824

ajax form on press enter

//UPDATE

$('#codice_prodotto').on('keyup', function(e) {
     if (e.which === 13) {
         e.preventDefault();
         $('#cerca_prodotto').trigger('click');
     }
});

this work in real time, but if I press Enter the script redirect me in domain/?codice_prodotto=val

Any solutions?

//END UPDATE

I have problems with ajax request, this is the index page:

<script>
 $(document).ready(function() {
$("#cerca_prodotto").click(function(){
    var dati = $("#form-cerca-prod").serialize();
    $.ajax({
        type: "POST",
        url: "product/show_prod.php",
        data: dati,
        dataType: "html",
        success: function(msg){ $("#risultato").html(msg); },
        error: function(){ alert("Ricerca fallita, riprovare..."); }
    });
});
});
</script>
<form id="form-cerca-prod">
   <input name="codice_prodotto" type="text" placeholder="Codice Prodotto" id="codice_prodotto">
   <br><br>
   <input type="button" id="cerca_prodotto" value="Cerca">
</form>

<div id="risultato">
</div>

And this product/show_prod.php

    <?php
include "../config/config.inc.php";
$cod=urldecode($_POST['codice_prodotto']);
$q=mysql_query("SELECT * FROM prodotto WHERE id='$cod'");
if(mysql_num_rows($q)<1)
    echo "Nessun prodotto trovato!";
else{
    $p_id=mysql_result($q,0,"id");
    $p_descr=mysql_result($q,0,"descrizione");
    $p_prezzo=mysql_result($q,0,"prezzo");
    $p_prezzo=number_format($p_prezzo,2,',','.');
    ?>
    <br><br>
    <div style="border: 1px solid #e9e9e9; padding: 6px; border-radius: 5px;">
        <table border="0" align="center" style="color: #fff;">
            <tr>
                <td align="right">
                    Codice :
                </td>
                <td align="left">
                    <b><? echo $p_id; ?></b>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Nome :
                </td>
                <td align="left">
                    <code><? echo $p_descr; ?></b>
                </td>
            </tr>
            <tr>
                <td align="right">
                    Prezzo :
                </td>
                <td align="left">
                    <b>&euro; <? echo $p_prezzo; ?></b>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2" style="padding: 7px;">
                    Quantit&agrave;: <input type="number" min="6" value="6" name="quantita" style="width: 40px;"><br><button type="submit" id="agg_prodotto"><img src="img/cart.png"> Aggiungi al carrello</button>
                </td>
            </tr>
        </table>
    </div>
    <?
}
?>

if I click on the button, the script works! if I enter a code and press Enter for the keyboard the script not work!

How I can solve this?

Upvotes: 0

Answers (4)

adeneo

Reputation: 318182

$('#codice_prodotto').on('keyup', function(e) {
     if (e.which === 13) {
         e.preventDefault();
         $('#cerca_prodotto').trigger('click');
     }
});

Upvotes: 1

Spencer D

Reputation: 3486

I believe changing your script to this should work:

 $(document).ready(function() {
$("#cerca_prodotto").click(function(){
    var dati = $("#form-cerca-prod").serialize();
    $.ajax({
        type: "POST",
        url: "product/show_prod.php",
        data: dati,
        dataType: "html",
        success: function(msg){ $("#risultato").html(msg); },
        error: function(){ alert("Ricerca fallita, riprovare..."); }
    });
});
$("#codice_prodotto").keyup(function(event){
    if(event.keyCode == 13){
        $("#cerca_prodotto").click();
    }
});
});

Upvotes: 0