Quiero enviar una solicitud de una página a otra desde un formulario que tiene 2 botones:
<form method="post"> <button id="button_1" value="val_1" name="but1">button 1</button> <button id="button_2" value="val_2" name="but2">button 2</button> <input id="access_token" type="hidden" name="access_token" value="<?php echo $_SESSION['access_token']; ?>" /> </form> $(document).ready(function() { $("#button_1").click(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "/pages/test/", data: { id: $("#button_1").val(), access_token: $("#access_token").val() }, success: function(result) { alert('ok'); }, error: function(result) { alert('error'); } }); }); $("#button_2").click(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "/pages/test/", data: { id: $("#button_2").val(), access_token: $("#access_token").val() }, success: function(result) { alert('ok'); }, error: function(result) { alert('error'); } }); }); });¿Cómo puedo mejorar este código y tal vez fusionarlo en una sola función?
Dado que la única diferencia lógica entre los controladores es el valor del botón en el que se hizo clic, puede usar this palabra clave para referirse al elemento que provocó el evento y obtener el val() de eso. Prueba esto:
$("button").click(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "/pages/test/", data: { id: $(this).val(), // < note use of 'this' here access_token: $("#access_token").val() }, success: function(result) { alert('ok'); }, error: function(result) { alert('error'); } }); });Utilice el selector múltiple de jQuery si la única diferencia entre las dos funciones es el valor del botón que se activa.
$("#button_1, #button_2").on("click", function(e) { e.preventDefault(); $.ajax({type: "POST", url: "/pages/test/", data: { id: $(this).val(), access_token: $("#access_token").val() }, success:function(result) { alert('ok'); }, error:function(result) { alert('error'); } }); });function sendAjaxRequest(element,urlToSend) { var clickedButton = element; $.ajax({type: "POST", url: urlToSend, data: { id: clickedButton.val(), access_token: $("#access_token").val() }, success:function(result){ alert('ok'); }, error:function(result) { alert('error'); } }); } $(document).ready(function(){ $("#button_1").click(function(e){ e.preventDefault(); sendAjaxRequest($(this),'/pages/test/'); }); $("#button_2").click(function(e){ e.preventDefault(); sendAjaxRequest($(this),'/pages/test/'); }); });