//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>€ <? echo $p_prezzo; ?></b>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="padding: 7px;">
Quantità: <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?
Add this to your form:
<input type="submit" />
That's what triggers the automatic submit on enter.
Because your form isn't submitting to any url. You can bind Enter key to trigger the AJAX request too. Just like the click event.
$('#codice_prodotto').on('keyup', function(e) {
if (e.which === 13) {
e.preventDefault();
$('#cerca_prodotto').trigger('click');
}
});
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();
}
});
});