Preventing from redirect after clicking on link in iframe

Question

I've got the following code:

<iframe>
...
  <form id="formId" action="someurl">
  </form>
  <a href="#" onclick="$('#formId').submit(); return false;">click</a>
...
</iframe>

I want to submit the form by clicking on link BUT to stay on the same page (not to redirect). I've tried $(document).on('click', 'a', false); with no luck.

You can use AJAX for this action. Here you have similar topic: http://stackoverflow.com/questions/18169933/submit-form-without-reloading-page. — Nelliusz Frącek, Jun 08 '15 at 08:08

score 2 · Answer 1 · answered Jun 08 '15 at 08:07

2

$('a').click(function(event){
    event.preventDefault();
    $('#formId').submit();

  }

answered Jun 08 '15 at 08:07

Vaibs_Cool

6,126
5
28
61

score 1 · Answer 2 · answered Jun 08 '15 at 08:10

You could try to set the iframe to and sandboxed one. Then you can use prorerty's like:

sandbox="..."

allow-forms allows form submission
allow-popups allows popups
allow-pointer-lock allows pointer lock
allow-same-origin allows the document to maintain its origin
allow-scripts allows JavaScript execution, and also allows features to trigger automatically
allow-top-navigation allows the document to break out of the frame by navigating the top-level window

Link: http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com"</iframe>

Daniel Dušek · Answer 3 · 2015-06-08T08:18:44.750

Submit form with ajax to stay on current page.

var $form = $("#formId");

// register handler for submit first
$form.submit(function (event) {
    $.ajax({
        type: $form.attr("method"),
        url: $form.attr("action"),
        data: $form.serialize()
    })
    .done(function (data) {   

    })
    .fail(function (r, s, e) {

    });

    event.preventDefault();
});

// and then submit the form
$form.submit();

More about jQuery submit()

score 0 · Accepted Answer · answered Jun 09 '15 at 13:54

All the answers seem correct, but actually that's not what helped out me in the end. In my particular sitation, I wanted to download a file when user clicks on the link inside iframe. After clicking on the link, form has been submitted and the ajax request has been sent to my method in controller. It turned out, that if I implement a method correctly to send some data to user, iframe won't redirect. Initially I'd been testing this redirection behaviour on empty method in controller which caused the problem - which suprises me a little.

Preventing from redirect after clicking on link in iframe

4 Answers4