Ancla HTML para enviar los datos de la publicación al hacer clic

Question

¿Es posible hacer que una etiqueta de anclaje se comporte como un envío (con ciertas características de publicación?) Razón por la que tengo una etiqueta de anclaje, porque no me gusta el botón de enviar y quería un CSS botón.

Aquí es lo que estoy haciendo en este momento (y no está funcionando)

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

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

puedo obtener una respuesta adecuada, pero no me envía a la página de datos POST solo redirige a la parte superior de la página (debido al anclaje). ¿Alguna idea de cómo hacer que me dirija al lugar correcto (página html) con los datos POST rellenos en esa página html? Como nota, no es un simple .submit(). En este momento probablemente vaya con un campo oculto y luego haga un .submit(), pero me pregunto si hay una manera más fácil de obtener la página, ya que el POST podría hacerse correctamente.

Gracias!

Answer 1

Todos stop reinventando botones. Ya existen, y también se les puede diseñar.

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

demo'd aquí: http://jsfiddle.net/MZbLW/

---

También debo señalar que todos en el mundo va a estar buscando el tradicional botón al final de la forma, y ​​haciendo que se vea completamente diferente puede no ser la mejor idea desde el punto de vista de la usabilidad.

Answer 2

En el controlador de clic para el enlace, devuelva falso para detener la acción predeterminada.

También usaría la función click(), no en vivo.

Answer 3

Su evento click debe devolver falso o evitar el valor predeterminado.

El uso de AJAX es Asincrónico por lo que no devolverá el valor, deberá encontrar el valor en la devolución de llamada completa.

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

Answer 4

Algo como esto probablemente se acerca:

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

    $.post({data2: values2}); 

    return false; 
}); 

La clave aquí es que la devolución de falsa impide que el comportamiento por defecto para el enlace. Si necesita hacer un procesamiento adicional basado en los resultados de la publicación, lo hará dentro de una función de devolución de llamada. No hay ninguna razón por la que no pueda emitir varias llamadas AJAX dentro de la función vinculada a sus anclajes, pero debe asegurarse de que el enlace no funcione también como un enlace.

Answer 5

Un pensamiento rápido ¿por qué no tratar de usar

< tipo botón = "submit" class = botón >
en lugar de
< tipo de entrada "pie de página" > Inscripción </= submit >

Esto le da la flexibilidad de diseñar su botón de la manera que desee y también tener texto. Además, no tienes que hacer todo el trabajo de crear un botón personalizado y publicarlo de nuevo.

Solo piénselo.