Question

//更新

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

这项工作是实时的，但如果我按 Enter ，脚本会在域中重定向我/？codice_prodotto = val

任何解决方案？

// END UPDATE

我遇到了ajax请求问题，这是索引页面：

<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>

此产品/ 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>
    <?
}
?>

如果我点击按钮，脚本就可以了！如果我输入一个代码并按 Enter 键盘，则脚本不起作用！

我如何解决这个问题？

Answer 1

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

Answer 2

将此添加到您的表单：

<input type="submit" />

这就是在输入时触发自动提交的内容。

Answer 3

因为您的表单未提交任何网址。您也可以绑定Enter键来触发AJAX请求。就像点击事件一样。

Answer 4

我认为将脚本更改为此应该有效：

 $(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();
    }
});
});

按下输入的ajax表格

4 个答案: