Update input with data from an iframe automatically

Asked

Viewed 398 times

0

I have the following code:

mudarfoto.php

<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" name="frmfoto" height="300" frameborder="0" src="fotos.php"></iframe>

        <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>

        <!-- 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>

        <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>

    </div>

php photos.

<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>


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);
}
}

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;
}

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

// echo "$folderPath$finalfile"

?>
<img src="<?php echo "$folderPath$finalfile"; ?>" alt="Sua foto" class="img-responsive" width="200px" />
<input id="foto" name="foto" type="hidden" class="form-control input-md" value="<?php echo "$folderPath$finalfile"; ?>">

The event onClick works perfectly. But, if possible, I would like to have the input automatically updated without the need for the click. It is possible?

javascript

  • Automatic how? There has to be an event, be it a user, server action or a timer that updates from time to time

  • I understand. I asked the question, by the possibility of using a "load" event in iframe, I do not know and I do not know if it works. I am very weak in javascript...

  • Yes it is possible, you can use the * load* event from iframe to change an input on the page Parent

  • Thank you. Some example or form of research, for me to apply in my code? As I said before, I am weak in javascript.

  • You’ll get better answers if you give people code they can use to reproduce the problem

  • Complete code entered, @Leocaracciolo

  • Please read https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

  • I will, thanks for the support, @Leocaracciolo

Show 3 more comments

1 answer

0


Changes made to the photos.php page:

1 - This line

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

I switched to 

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

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

2 - I inserted this code snippet after PHP

The script sets the value of the variable $folderPath$finalfile in the 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 page code photos.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" />

On the page mudarfoto.php

1 - Include at the beginning 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 onclick from your input

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

3 - remove script from onclick-associated function

    <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

meet()

.find()

  • Dear friend, I will deploy, read the entire explanation, and return with the results. Anyway, thank you for the time and dedication!

  • Just perfect. Solved my problem! Thank you for your time and dedication!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.