5

Tengo un formulario en HTML, donde únicamente tengo que activar una función en otro archivo.

Ejemplo:

<form action="formula.html">
  <input type="submit">Enviar</submit>
</form>

Abajo del formulario tengo más contenido de la página.

Necesito que al presionar sobre submit, se ejecute lo que hay en formula.html, pero sin salir de la página principal.

¿Es posible? ¿Cómo se haría?

1
  • 1
    Si es posible, para ello debes crear una div no visible (u oculta) y colocar el target del form a que se dirija hacia el id de la división.
    – fwBasic
    Commented el 12 abr. 2017 a las 22:15

3 respuestas 3

4

Si es posible, para ello debes crear un iframe no visible (u oculto) y colocar el target del form a que se dirija hacia el id del iframe.

<form action="formula.html" target="request">
 <input type="submit" value="Enviar">
</form>
<iframe id="request"></iframe>
<div id="response"></div>

Código de ejemplo para: formulario.html

 var html=window.opener.getElementById("response").innerHTML,
  html="el envió del formulario finalizo con exito!"

Espero esto ayude a aclara un poco el posible código que como respuesta podria hacer el servidor ante la solicitud al pulsar el boton "Enviar"

Es importante aclarar que esta solución existe desde que se invento la web (hace mas de 20 años), sin embargo actualmente se utilizan técnicas modernas tales como AJAX.

4
  • cómo exactamente estás ejecutando la función del otro archivo? Commented el 13 abr. 2017 a las 3:58
  • @RobertoSepúlvedaBravo dentro del iframe se cargara la pagina como repuesta del formulario enviado, dependerá de dicha pagina el código que coloque @Pepemujica (desplegar, imprimir, formular), la acción a realizar, voy a modificar la respuesta para intentar aclarar un poco la posible acción a realizar.
    – fwBasic
    Commented el 13 abr. 2017 a las 13:00
  • Hola @fwBasic !, estoy intentando, pero no resulta. La página realmente no tiene funciones, únicamente recibe parámetros de la url (ocalhost/control?action=NOTIFICACION&notificacion=PERFIL_AC‌​TIVO&payload=%22Otro‌​_Perfil%22 ) para realizar ciertas acciones, en este caso, cambiar de perfil. Pero no logro que haga nada
    – user19356
    Commented el 14 abr. 2017 a las 14:36
  • @Pepemujica te recomiendo que recrees en tu servidor el ejemplo que te deje aqui, por lo que veo estas trabajando en localhost.
    – fwBasic
    Commented el 17 abr. 2017 a las 2:01
3

Puedes usar ajax para hacer la petición sin tener que refrescar la página.

Aqui te anexo un ejemplo, espero que te sirva

   <form id="id_form" action="formula.html">
         <input type="submit">Enviar</submit>
   </form>


$("#id_form").on("submit", function(e){
   //Code: Action (like ajax...)
   e.preventDefault();

   $.ajax({
            url         : 'formula.html',
            type        : 'POST',
            data        : {val:inputs}, //Aquí tienes que enviar la información que necesita formula.html si no tiene nada puedes dejarlo así {}
            cache       : false,
            async       : false,
            dataType    : 'json',
            contentType : "application/json",
            success: function(response)
            {
               alert('datos guardados')
            },
            error : function(response)
            {
                alert('error al guardar los datos')
            }
   //return false;
 })
3
  • Hola! Gracias por la respuesta. No me está funcionando, mi url es: (localhost/control?action=NOTIFICACION&notificacion=PERFIL_AC‌​TIVO&payload=%22Otro‌​_Perfil%22) Lo que necesito es que se ejecute la url, pero que la página se mantenga donde está, es decir (localhost/control.hmtl)
    – user19356
    Commented el 14 abr. 2017 a las 23:16
  • 1
    ¿Quizás no funcione porque Jorge pone id_form y @Pepemujica no tiene?. Prueba a cambiar esto: $("#id_form") por esto: $("form") y quizás te funcione o agrégale un id a tu form.
    – mrroot5
    Commented el 10 may. 2017 a las 10:19
  • Si, tienes que poner un id a tu form o poner directamente el seleccionador form, la idea del iframe se me hace bastante mala ya que cargas una página completa dentro de una etiqueta eso puede hacer que tu página sea lenta. Commented el 10 may. 2017 a las 14:43
1

Asumiendo que necesitas llamar una función de javascript presente en otro archivo, puedes hacerlo con jquery de la siguiente forma:

archivo1.html: Desde este archivo vamos a invocar la función que está en arhcivo2.js

En el head incluye lo siguiente:

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!--Archivo en donde está la función que vamos a invocar-->
<script type="text/javascript" src="archivo2.js"></script>

<script>
    $(document).on("click","#invocar", Invocar);
    function Invocar(){
        Invocando();          //aquí estamos activando la función del otro archivo
    }
</script>

En el body solo necesitas lo siguiente:

<form>
    <input type="submit" id="invocar"></submit>
</form>

.

archivo2.js: Aquí está la función de js que invocaremos (ojo que es un archivo .js, no .html)

function Invocando(){
    alert("Quién osa invocarme?");
}

Espero haberte ayudado, para cualquier duda solo deja un comentario.

4
  • Estimado @Roberto lo que se quiere mas que ejecutar una acción en otro archivo es: enviar un formulario al servidor pero como todos sabemos esta acción desplegara una pagina como respuesta al envió del formulario y es principalmente eso lo que no se quiere, en el ejemplo que coloque explico con detalles como hacerlo.
    – fwBasic
    Commented el 13 abr. 2017 a las 13:22
  • @fwBasic hola!! en realidad lo que necesito es enviar parametros por url. Esto activa ciertas funciones, pero necesito que no se vaya de la pagina donde se encuentra
    – user19356
    Commented el 13 abr. 2017 a las 16:52
  • @fwBasic Es básicamente un control remoto, que hace ciertas tareas. El menú principal se accede así: localhost/control.html. Ahí muestra ciertas opciones básicas, pero ingresando a localhost/control?action=NOTIFICACION&notificacion=PERFIL_ACTIVO&payload=%22Otro_Perfil%22 ingresa a otro perfil, donde se muestran otras cosas, pero la pantalla del control queda en blanco, por lo que necesito enviar esa url, pero permanecer en la página principal para tener el resto de las opciones disponibles
    – user19356
    Commented el 13 abr. 2017 a las 17:43
  • Pepe, Puedes enviar esos parámetros por la función que puse en mi respuesta. - Al invocar: Invocando("Gimán? ","León-O? ","Gokú?") - Al recibir la invocación: function Invocando(param1, param2, param3) Respecto a lo que dice @fwBasic, tal vez tiene razón y no he entendido en absoluto lo que buscas, si aún no encuentras la respuesta, siéntete libre de modificar tu pregunta. Commented el 13 abr. 2017 a las 23:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.