Trigger Ubmit inside the iframe

Asked

Viewed 259 times

0

It is possible to trigger a Submit via iframe?

I’m opening the page php form. via iframe with modal. It looks like this:

inserir a descrição da imagem aqui

  • The green button is the Submit that comes from the form page.php.
  • The blue and gray button comes along with the modal (code below).

This example the form is small, but when the form is large, the green button is lost, and the way the modal presents is very intuitive.

Modal code:

<div id="modal-form" class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item iframe" src="formulario.php" allowfullscreen></iframe>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i>Cancelar</button>
        <button id="salvar" type="submit" class="btn btn-sm btn-primary"><i class="ace-icon fa fa-check"></i>Salvar</button>
      </div>

    </div>
  </div>
</div>
javascript jquery twitter-bootstrap

  • Puts target="_parent" in the <form>.

  • @Sam and how do I save the button in the modal to send the Submit command inside the iframe?

  • I didn’t test it but I think that’s it: $("iframe").contents().find("form").submit();

  • @Sam, I tested it, but it didn’t work.

  • @Sam, have another suggestion?

  • I believe you can create a trigger('my-event'); with your Jquery. Dai you can trigger your event from another context , as you are using Iframe I believe a Rigger can help.

  • @Ricardolucas I don’t know how I should ride that trigger, you could help me?

  • @Sam worked. I had not put it as a function. As you did in the code and changed here. Register here for me to mark as completed. Thank you very much.

  • If you found the correct answer if you can post help... Someone might have the doubt table and this will help that person too :)

Show 4 more comments

2 answers

2


You can access the elements inside an iframe using:

$("iframe").contents().find("seletor");

Where "seletor" can be an id, class, tag etc., i.e., a normal jQuery selector.

In case of submitting the form inside the iframe, just search for the tag form and use the method .submit():

$("iframe").contents().find("form").submit();

And to open the page specified in action from the iframe form in the main window, tag form the attribute target="_parent". Example:

<form method="post" action="pagina.php" target="_parent">

  • Sam, a question, how to do before running Submit check if the form is filled. I say this because Forms has the required, but Ubmit is ignoring and sending even without the completion.

  • in the field of Cpf I also have a validator at the end of the digit it checks if it exists it blocks the Submit.

  • But there is a "Submit" button in the form inside the iframe?

  • 2

    Instead of doing as in the reply, you could click on the button that will validate the required: $("iframe").contents().find("form button").click();

  • Fantastic, it worked.

1

To start within the context of your modal you will create a reference .

$('#modal-form')[0].contentWindow.$('body').trigger('text-event');

Dai you must shoot from a new context the event.

$('#algumBotao').on('text-event', function(e) {
  alert("Modal deve fechar");
});

Try it this way ...

Browser other questions tagged javascript jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.