Get and Send value of input field inside an Iframe

Get value of input field inside an iframe and Send value to input field inside an iframe from of the another input...

Demo

HTML

<p>
    <iframe name='inpIframe' id="inpIframeId" src="examples/iframe/iframe_page.html" width="100%" height="150"></iframe>
</p>
<!-- This iframe has local path so, please attached here your server path. -->

<p>
    <input type='button' name='get-valOf-iframe' value='Get value of Iframe'>
</p>
<br>
<p>
    <input type="text" id="inputBox" value="Input outside an iframe">
</p>
<p>
    <input type='button' name='send-valTo-iframe' value='Send value to Iframe'>
</p>

CSS

<style>
        iframe[name=inpIframe] { 
                border:solid 1px gray; 
        } 
</style>

Jquery

$(function(){
    $('input:button[name=get-valOf-iframe]').click(function() {
        var getIframeVal = $('iframe[name=inpIframe]').contents().find('#iframeInputBox').val();
        document.getElementById('inputBox').value = getIframeVal;
    });
    $('input:button[name=send-valTo-iframe]').click(function() {
        var getInpVal = $('#inputBox').val();
        $('iframe[name=inpIframe]').contents().find('#iframeInputBox').val(getInpVal);
    });
})