Fetch input value from another php file

Question

I am uploading images to a server folder using the following code:

<iframe width="600" name="frmfoto" height="300" frameborder="0" src="teste2.php"></iframe>

        <script type="text/javascript">
            function txfoto() {
                    var valor = window.parent.frmfoto.document.getElementById('foto').value;
                    $('#foto').val(valor);
            }

        </script>

        <!-- FOTO 1 -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="fotofundo">* Foto 01</label>  
               <div class="col-md-5">
                   <input id="fotofundo" name="fotofundo" type="text" placeholder="" class="form-control input-md" onClick="txfoto()" />
               </div>
        </div>

In the file that makes the upload, here is my input:

<input id="foto" name="foto" type="text" class="form-control input-md" value="***************">

The photo goes to the server folder, prints in the above input, but I can’t pull it to my other form, when I try to activate the "onClick" event in the input.

What could be wrong?

Answer 1

There are two problems in the code:

One is here:

window.parent.frmfoto.document.getElementById('foto').value;

To take the value of an element in parent document, should wear window.parent.document:

window.parent.document.getElementById('foto').value;

The other is here:

$('#foto').val(valor);

In this the id #foto is non-existent. The correct thing would be to take the id #fotofundo using pure Javascript (this prevents you from loading jQuery into the frame just to do this):

document.getElementById('fotofundo').value = valor;

Answer 2

The window.parent it is not necessary, therefore window.parent will search on the page above, as the script is already running on the page above so it is irrelevant, just pick up the <iframe>.

Not to conflict with global variables (in the scope of window.) it would be more interesting to use jQuery itself, in the jQuery selector you can change the context, using .contentWindow, in this way:

 $("<seletor>", <janela>.contentWindow.document);

Note: <seletor> and <janela> are examples and not code

Another problem is that you on the page above this using fotofundo and not foto, then change this:

$('#foto').val(valor);

For this reason:

$('#fotofundo').val(valor);

The whole code should look like this:

<iframe width="600" name="frmfoto" height="300" frameborder="0" src="teste2.php"></iframe>

<script>
function txfoto() {
     //Pega o iframe
     var frmfoto = $("iframe[name=frmfoto]");

     //Pega o input dentro do iframe
     var input = $("#foto", frmfoto.get(0).contentWindow.document);

     //Passa o valor do input do iframe para o input na janala principal
     $('#fotofundo').val( input.val() );
}
</script>

<!-- FOTO 1 -->
<div class="form-group">
    <label class="col-md-2 control-label" for="fotofundo">* Foto 01</label>  
       <div class="col-md-5">
           <input id="fotofundo" name="fotofundo" type="text" placeholder="" class="form-control input-md" onClick="txfoto()" />
       </div>
</div>