Update input with data coming from an iframe automatically

  

Changes made to the fotos.php page:

1 - This line

$finalfile = $fileNewName. "_thump.". jpg;

I moved to

$finalfile = $fileNewName. "_thump.". $ext;

and put it inside if(is_array($_FILES)) {

2 - I inserted this code snippet after PHP

The script places the value of the $folderPath$finalfile variable in value of the hidden input of id="inputHide"

<input type="text" id="inputHide" style="display: none;">
  <script>
    var folderPathFinalfile = "<?php echo "$folderPath$finalfile"; ?>";
    document.getElementById('inputHide').value=folderPathFinalfile;
</script>

Full code page fotos.php

<?php       
 if(isset($_POST["submit"])) {
    if(is_array($_FILES)) {

    $file = $_FILES['image']['tmp_name']; 
    $sourceProperties = getimagesize($file);
    $fileNewName = time();
    $folderPath = "upload/";
    $ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
    $imageType = $sourceProperties[2];

    switch ($imageType) {

        case IMAGETYPE_PNG:
            $imageResourceId = imagecreatefrompng($file); 
            $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
            imagepng($targetLayer,$folderPath. $fileNewName. "_thump.". $ext);
            break;

        case IMAGETYPE_GIF:
            $imageResourceId = imagecreatefromgif($file); 
            $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
            imagegif($targetLayer,$folderPath. $fileNewName. "_thump.". $ext);
            break;

        case IMAGETYPE_JPEG:
            $imageResourceId = imagecreatefromjpeg($file); 
            $targetLayer = imageResize($imageResourceId,$sourceProperties[0],$sourceProperties[1]);
            imagejpeg($targetLayer,$folderPath. $fileNewName. "_thump.". $ext);
            break;

        default:
            echo "Invalid Image type.";
            exit;
            break;
    }

    move_uploaded_file($file, $folderPath. $fileNewName. ".". $ext);

    $finalfile = $fileNewName. "_thump.". $ext;

}
}

function imageResize($imageResourceId,$width,$height) {

$targetWidth =800;
$targetHeight =600;

$targetLayer=imagecreatetruecolor($targetWidth,$targetHeight);
imagecopyresampled($targetLayer,$imageResourceId,0,0,0,0,$targetWidth,$targetHeight, $width,$height);

return $targetLayer;
}

// echo "$folderPath$finalfile"

?>

<input type="text" id="inputHide" style="display: none;">
  <script>
    var folderPathFinalfile = "<?php echo "$folderPath$finalfile"; ?>";
    document.getElementById('inputHide').value=folderPathFinalfile;
</script>




<div class="container">
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
        <input type="file" name="image" /> 
        <input type="submit" name="submit" value="Submit" />
    </form>
</div>


<img src="<?php echo "$folderPath$finalfile"; ?>" alt="Sua foto" class="img-responsive" width="200px" />

  

In the page mudarfoto.php

1 - Include at the top of the page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){$("#frmfoto").on("load", function () {
          var valInput = $("#frmfoto").contents().find("#inputHide");
            if (valInput!=null)
              $("#fotofundo").val(valInput.val());
        });
    });
</script>

2 - remove the onclick from your input

<input id="fotofundo" name="fotofundo" type="text" placeholder="" class="form-control input-md" />

3 - remove the script from the function associated with onclick

    <script type="text/javascript">
        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 janela principal
             $('#fotofundo').val( input.val() );
        }

    </script>

Full page code mudarfoto.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>$(document).ready(function(){$("#frmfoto").on("load", function () {
          var valInput = $("#frmfoto").contents().find("#inputHide");
            if (valInput!=null)
               $("#fotofundo").val(valInput.val());
        });
    });

</script>

<div class="box-body">

  <center><h4 style="padding:5%">Vamos trocar a imagem da seção projetos?</h4></center>

  <?php

  $hostdb = "***";
  $userdb = "***";
  $passdb = "***";
  $tabledb = "***";
  $conecta = mysql_connect($hostdb, $userdb, $passdb) or die (mysql_error());
  @mysql_select_db($tabledb, $conecta) or die ("Erro ao conectar com o banco de dados");
  mysql_set_charset('UTF8');

  $busca_query = mysql_query("SELECT * FROM projetos WHERE id = $id") or die (mysql_error());

  $row = mysql_fetch_array($busca_query);     

  ?>

    <form class="form-horizontal" id="alterarproduto" autocomplete="on" method="post" action="chgfotosprojetos-alterar-confirmar.php">
    <fieldset>

    <br><br>

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

    <!-- 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" />
           </div>
    </div>

    <br><br>

    <!-- LEGENDA DA FOTO -->
    <div class="form-group">
        <label class="col-md-2 control-label" for="legendafoto">* Legenda da Foto</label>  
           <div class="col-md-5">
           <input id="legendafoto" name="legendafoto" type="text" placeholder="" class="form-control input-md" value="<?php echo $row['legendafoto'] ?>">
           </div>
    </div>

    <br><br>

    <input type="hidden" value="<?php echo $id; ?>" name="id" />

    <!-- Button "MODIFICAR DADOS" -->
    <center><input type="submit" class="btn btn-primary" value="Modificar Dados" /></center>

    </form>

</div>

References

contents ()

.find ()