try this,
<form action='data.php' method='post'> <input type='text' name='username' id='username'> <iframe id="iframe_pass" src='password.php'> </iframe> <input id="submit" type='button' value="submit"> </form> <p id="password_from_frame"></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $("#submit").on('click', function(){ var pass_field = $("#iframe_pass").contents().find("#password"); var username = $("#username"); var data = {username : username.val(), password : pass_field.val()}; // make an ajax call to submit form $.ajax({ url : "data.php", type : "POST", data : data, success : function(data) { console.log(data); alert(data); }, error : function() { } }); }); // you can use keyup, keydown, focusout, keypress event $("#iframe_pass").contents().find("#password").on('keyup', function(){ $("#password_from_frame").html($(this).val()); }); </script>
and password.php
<input type='text' name='password' id='password'>
and on the data.php use the print_r to send back the value to the ajax request
print_r($_POST);