Ancora HTML per inviare i dati del post al clic

Question

È possibile fare un tag di ancoraggio si comporta come un .submit (con determinate caratteristiche del post?) Motivo perché ho un tag di ancoraggio, perché non mi piace il pulsante di invio look e voluto un CSS pulsante.

Ecco quello che sto facendo in questo momento (e non sta funzionando)

file html

<div class="footer"><a href="#" id = "test_btn" class="button"><strong>Sign Up</strong></a></div> 

<div class="footer"><a href="#" id = "test2_btn" class="button"><strong>Sign Up</strong></a></div> 

file js

<script type="text/javascript"> 

$("#test_btn").live("click",function(){ 
    var post_data = {'account_type':"Free"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 

$("#test2_btn").live("click",function(){ 
    var post_data = {'account_type':"Premium"} 
    return $.post("www.someplacehere.com/user_sign_up/1/", post_data); 
}); 
</script> 

ottengo una risposta adeguata, ma non mi manda alla pagina dei dati POST, semplicemente reindirizza verso la parte superiore della pagina (a causa dell'ancora). Qualche idea su come farmi indirizzare al posto giusto (pagina html) con i dati POST pre-compilati su quella pagina html? Come noti, non è un semplice .submit(). In questo momento probabilmente andrà con un campo nascosto e quindi fare un .submit(), ma chiedendo se c'è un modo più semplice per ottenere la pagina dal momento che il POST potrebbe essere fatto correttamente.

Grazie!

Answer 1

Tutti stop re-inventa pulsanti. Esistono già e possono anche essere stilizzati.

button[type=submit] { 
    background-color: transparent; 
    border: none; 
    border-bottom: solid blue 1px; 
    color: blue; 
    font-weight: bold; 
    padding: 0px; 
    cursor: pointer; 
} 

demo'd qui: http://jsfiddle.net/MZbLW/

---

Vorrei anche sottolineare che tutti nel mondo sta per essere alla ricerca per il pulsante Al termine del modulo, e facendolo apparire completamente diverso potrebbe non essere la più grande idea dal punto di vista dell'usabilità.

Answer 2

Nel gestore di clic per il collegamento, restituire false per interrompere l'azione predefinita.

Inoltre, vorrei solo utilizzare la funzione click(), non dal vivo.

Answer 3

L'evento clic deve restituire false o impedire l'impostazione predefinita.

Utilizzo di AJAX è Asincrono in modo da non restituire il valore, sarà necessario trovare il valore nel callback completo.

http://api.jquery.com/jQuery.post/

Answer 4

Qualcosa di simile a questo probabilmente si avvicina:

$(a.submitLink).click(function() { 
    $.post({data: values}); 

    $.post({data2: values2}); 

    return false; 
}); 

La chiave qui è che il ritorno falso impedisce il comportamento predefinito per il collegamento. Se devi eseguire un'ulteriore elaborazione in base ai risultati del post, lo farai all'interno di una funzione di callback. Non c'è motivo per cui non è possibile emettere più chiamate AJAX all'interno della funzione associata alle ancore, ma è necessario assicurarsi che il link non funzioni anche come collegamento.

Answer 5

Un pensiero veloce perché non provare a utilizzare

< tipo di pulsante = "submit" class = pulsante >
invece di
< tipo di ingresso "footer" > Registrati </= presentare >

Questo ti dà la flessibilità di acconciare il tuo pulsante in qualsiasi modo desideri e di avere anche del testo. Inoltre non devi fare tutto il lavoro necessario per creare un pulsante personalizzato e pubblicarlo.

Basta pensarci.