Salve a tutti,

Ho la seguente funzione Javascript
Codice PHP:
$(document).ready(function() {   
$('#pref').click(function(){      
var id = $('#id').val();     
var user = $('#user').val();           


$.ajax({       
type: 'POST',      
 url: 'aggiungiPreferito.php',       
data: 'id=' + id + '&user=' + user,      
 dataType: 'html',       
success: function(msg)       
{         
$('#visPref').html(msg);      
 },       
error: function()       
{         alert('Chiamata fallita...');      
 }     
});     
});    
}); 
Che viene richiamata quando viene premuto il bottone seguente:
Codice PHP:
<input type='hidden' id='id' value='.$_GET['vis'].'/>          
<input type='hidden' id='user' value='.$_SESSION['username'].'/> 
        
<input type='button' id='pref' value='Aggiungi preferito.'/> 
Il problema è il seguente:

Se il bottone lo faccio come ho scritto sopra, va tutto bene (il file .php viene richiamato senza problemi)

Ma se lo faccio in altri modi, quali
Codice PHP:
<input type='image' id='pref' src='preferito.jpg' />
oppure
<button type='submit' id='pref'>[img]preferito.jpg[/img] Aggiungi preferito</button> 
La chiamata fallisce, e viene visualizzato il messaggio di errore "Chiamata fallita..."

Non capisco il perché, qualche idea ?