En mi aplicación web tengo una docena de formularios, por supuesto cada uno con una id diferente. Luego, en mi archivo JavaScript, escribí un controlador personalizado para el evento de submit :
$('#form-name').submit(function(event) { event.preventDefault(); const formData = new FormData($('#form-name')[0]); const json = JSON.stringify(Object.fromEntries(formData)); ws.send(json); });Quiero evitar escribir el código anterior para cada formulario. Como primer paso, puedo envolverlo en otra función, algo como esto:
function custom_submit(form, event) { event.preventDefault(); const formData = new FormData($(form)[0]); const json = JSON.stringify(Object.fromEntries(formData)); ws.send(json); }y luego usa:
$('#form-name').submit(custom_submit('#form-name`, event));pero esta no es una sintaxis válida. En cualquier caso, todavía necesito "conectar" cada formulario a la función personalizada, escribiendo dos veces su nombre.
¿Hay alguna manera de hacer coincidir todos los formularios que tienen un prefijo específico y conectarlos a mi función de envío personalizada pasando tanto la id del formulario como la variable del event como se indicó anteriormente? Ejemplo de prefijo:
form-ws-*$('form').on('submit', function(event) { event.preventDefault(); const formData = new FormData(this); const json = JSON.stringify(Object.fromEntries(formData)); ws.send(json); });manejará todos los formularios en la página
La mejor solución será crear un complemento de jQuery y luego adjuntarlo a los formularios deseados (en esto puede dar cualquier selector de jQuery).
uso:
$("<SELECTOR>").submitify(); (function($) { $.fn.submitify = function() { var $this = $(this); $this.on('submit', function(event) { event.preventDefault(); const formData = new FormData(this); const json = JSON.stringify(Object.fromEntries(formData)); console.log(json); //ws.send(json); }); return this; }; }(jQuery)); $(document).ready(function() { $('[id^=form-ws-]').submitify(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="row"> <form id="form-ws-f1" class="col-md-4"> <input type="text" class="form-control" name="t1" id="t1" /> <input type="submit" value="submit" /> </form> <form id="form-ws-f2" class="col-md-4"> <input type="text" class="form-control" name="t2" id="t2" /> <input type="submit" value="submit" /> </form> <form id="form-ws-f3" class="frm col-md-4"> <input type="text" class="form-control" name="t3" id="t4" /> <input type="submit" value="submit" /> </form> </div> </div>JsFiddle aquí: https://jsfiddle.net/nitinjs/650guLhr/15/