jquery ajax post

[torrone]

Ho un problemino.. cioè non capisco una cosa..
prima spiego con due parole dopodichè posto un pò di codice per capirci meglio..

Ho un piccolo form, dove con jquery intercetto i dati inviati al click del bottone questi li passa ad una pagina php che li elabora e reinvia una risposta alla stessa pagina...
fin qui nessun problema e il codice funziona e ha sempre funzionato...

ora vi posto il codice: il form ha un campo nickname e un bottone per inviare i dato e un ulteriore campo nascosto per la verifica dei dati nella pagina php

<form action="" name="recuperaPasswordAjax">
Nickname<input type="text" name="nickname" id="nickname" value="" />
<input type="button" id="recuperaPassword" value="Recupera" />
<input type="hidden" name="recuperaPasswordForm" id="recuperaPasswordForm" value="ok" />
</form>

javascript

$(document).ready(function() {
    $("#recuperaPassword").click(function() {
        var nickname = $("#nickname").val();
        var recuperaPasswordForm = $("#recuperaPasswordForm").val();
        $.ajax({
            type: "POST",
            url: "recupera-password-ajax.php",
            data: "nickname=" + nickname + "&recuperaPasswordForm=" + recuperaPasswordForm,
            dataType: "html",
            success: function(risposta)
            {
                if (parseInt(risposta) == 1) {
                $("#risposta").html("<div class='messaggio affermativo'>Password cambiata, controllare la propria email</div>");
                $("#nickname").val('');
                } else {
                $("#risposta").html("<div class='messaggio errore'>Si &egrave; verificato un errore</div>");
                }
            },
            error: function()
            {
                alert("Errore Ajax");
            }
        });
    });
});

se il mi metto all'interno del campo nickname e faccio INVIO con la tastiera e come se i dati venissero inviati via get (infatti nell'url del browser vengono fuori i dati) se clicco con il mause sul bottone funziona correttamente tutto..
MA se io aggiungo un ulteriore campo al form e riprovo a rimettermi all'interno di un qualsiasi campo e faccio INVIO sempre dalla tastiera i dati NON vengono più inviati via GET e quindi non compaiono nell'URL del browser ..

Come mai??

[cavicchiandrea]

Prova a:
A) inserire il cancelletto # nella action del fom
B) a cambiare le variabili con nomi diversi dai campi del form
Se continua a non funzionare correttamente metti il link alla pagina pubblica, forse c'è qualcosa nella pagina che infastidisce

[mxa]

Originariamente inviato da cavicchiandrea
A) inserire il cancelletto # nella action del fom

Nel tuo script hai fatto il bind dell'evento click sul button. Quando sei in una casella di testo e premi invio, il di default il browser fa il submit (generando un submit event) del form. Di default lo fa via GET essendo che non hai specificato l'attributo method.

Quello che devi fare e':
1) cambiare il button con un input type="submit"
2)

//dai un id o classe al form se ne hai piu' di uno nella pagina
$('form').on('submit', function(e){
  e.preventDefault();
  //$.ajax...
});

[torrone]

Originariamente inviato da mxa


Nel tuo script hai fatto il bind dell'evento click sul button. Quando sei in una casella di testo e premi invio, il di default il browser fa il submit (generando un submit event) del form. Di default lo fa via GET essendo che non hai specificato l'attributo method.

Quello che devi fare e':
1) cambiare il button con un input type="submit"
2)

//dai un id o classe al form se ne hai piu' di uno nella pagina
$('form').on('submit', function(e){
  e.preventDefault();
  //$.ajax...
});

E come mai se aggiungo un altro campo nel forum e provo a far invio non si presenta piu il problema ?
Infatti ho altri form identici con magari oltre al campo nickname ho il campo test e questi funzionano perfettamente ..
Specifico che funzionano nella stessa pagina cioè sostituendo questo form agli altri ...

[cavicchiandrea]

Originariamente inviato da mxa

L'ho letto in qualche thread qui sul forum di non lasciare la action vuota, e comunque era un prova

Nel tuo script hai fatto il bind dell'evento click sul button. Quando sei in una casella di testo e premi invio, il di default il browser fa il submit (generando un submit event) del form. Di default lo fa via GET essendo che non hai specificato l'attributo method.

Io sapevo l'opposto cioè associare un click ad su un tasto submit era ingnorato e prevalicava l'invio del form pertanto indicare un click ad u oggetto specifico (id) in un form è inutile perché il submit prevarica su tutto

Quello che devi fare e':
1) cambiare il button con un input type="submit"
2)

//dai un id o classe al form se ne hai piu' di uno nella pagina
$('form').on('submit', function(e){
  e.preventDefault();
  //$.ajax...
});

Ma cosi non blocca il tasto invio o sbaglio ancora

[mxa]

Guarda questo esempio:

http://jsbin.com/itizir/1/edit

Questo dovrebbe farti capire come funzionano le cose.

[torrone]

Originariamente inviato da mxa
Guarda questo esempio:

http://jsbin.com/itizir/1/edit

Questo dovrebbe farti capire come funzionano le cose.

Ok ma non ho ancora avuto risposta sul motivo per cui se io al codice precedentemente da me postato aggiungo un ulteriore campo come quello che posto ora il problema non si verifica più?

<form action="" name="recuperaPasswordAjax">
Nickname<input type="text" name="nickname" id="nickname" value="" />

Test<input type="text" name="test" id="test" value="" />
<input type="button" id="recuperaPassword" value="Recupera" />
<input type="hidden" name="recuperaPasswordForm" id="recuperaPasswordForm" value="ok" />
</form>

$(document).ready(function() {
    $("#recuperaPassword").click(function() {
        var nickname = $("#nickname").val();
        var test = $("#test").val();
        var recuperaPasswordForm = $("#recuperaPasswordForm").val();
        $.ajax({
            type: "POST",
            url: "recupera-password-ajax.php",
            data: "nickname=" + nickname + "&test=" + test + "&recuperaPasswordForm=" + recuperaPasswordForm,
            dataType: "html",
            success: function(risposta)
            {
                if (parseInt(risposta) == 1) {
                $("#risposta").html("<div class='messaggio affermativo'>Password cambiata, controllare la propria email</div>");
                $("#nickname").val('');
                $("#test").val('');
                } else {
                $("#risposta").html("<div class='messaggio errore'>Si è verificato un errore</div>");
                }
            },
            error: function()
            {
                alert("Errore Ajax");
            }
        });
    });
});

[torrone]

Nessuno sa dirmi perche ?

[torrone]

up

[Vindav]

è semplicemente una caratteristica del browser, nei form dove non è presente un submit button il form viene inviato, premendo invio, solo se è presente un unico elemento input. Se invece è presente il bottone di submit verrà inviato, sempre premendo invio, anche se sono presenti piu elementi input nel form.