How to get the POST data from a form inside of an iframe

I have a form inside of an iframe in my CodeIgniter application:

<div class="settings"><h2>Einstellungen</h2>
  <div class="main-content">
    <iframe src="" name="main-content">
      <form id="new-role-form" method="post" action="<?php echo base_url('index.php/home/settings') ?>">
        <input class="role-input" type="text" placeholder="Rolle" name="role"><input class="role-input" type="password" placeholder="Passwort" name="password"><button class="button role-submit" type="submit"><span class="glyphicon glyphicon-plus"></span></button>
      </form>
    </iframe>
  </div>
</div>

When submitting this form the following code should be executed (the submit is working I tested it; I can get the inputs of the form here):

$(document).on('submit', '#new-role-form', function(event) {
            var form = $(this);
            var name = $('input[name="role"]', form).val();
            var password = $('input[name="password"]', form).val();
            $.ajax({
                url: '<?php echo base_url('index.php/ajax/insertRole'); ?>',
                type: 'POST',
                data: {name: name, password: password},
                success: function() {
                    alert("success");
                }
            });
            event.preventDefault();
        });

And this is the insertRole function of my ajax controller:

public function insertRole() {
        $this->Database->insert($this->input->post('name'), $this->input->post('password'));
    }

This is where I get the error: ...index.php/ajax/insertRole 500 (Internal Server Error)

How can I retrieve the POST data from a form inside an iframe?

Answer

If you have problems catching the ‘submit’ event you could use this:

<script type="text/javascript">
    $('#frame').load(function() {
        $(this).contents().find('form').submit(function() {
            //do your stuff here
        });
    });
</script>

In order to ‘wait’ for the iframe being loaded and then catch the submit event. You also could create a function in the main file:

function valueFromIframe(val) {
   alert(val)
}

And call from the iframe:

<script type="text/javascript">
 parent.valueFromIframe("Hello world");
</script>

Hope it helps

The name of the question: “How to get the POST data from a form inside of an iframe” and your final question: “How can I retrieve the POST data from a form inside an iframe?” makes me think that you aren’t able to get the $_POST from your iframe… If you have a 500 Server error try to echo the $_POST inside the insertRole() (in order to prove that the info is really there) and check that $this->Database is defined. Usually I try to variate betweeno single and double quotes to avoid problems (I mean in: "<?php echo base_url('index.php/ajax/insertRole'); ?>" ) – JP. Aulet

After some testing it seems like my only error was an invalid SQL query but thanks for the help