How to recover the option on click and select the item that is in its value?

Asked

Viewed 154 times

1

<div class="escolher_temas">
    <form action="iframe.php" method="GET">
      <select name="escolhe_tema">
        <option value="http://z05.axitech.com.br">Tema 1</option>
        <option value="http://z06.axitech.com.br">Tema 2</option>
        <option value="http://z07.axitech.com.br">Tema 3</option>
        <option value="http://z08.axitech.com.br">Tema 4</option>
        <option value="http://z09.axitech.com.br">Tema 5</option>
        <option value="http://z10.axitech.com.br">Tema 5</option>
        <option value="http://z11.axitech.com.br">Tema 5</option>
        <option value="http://z12.axitech.com.br">Tema 5</option>
        <option value="http://z13.axitech.com.br">Tema 5</option>
        <option value="http://z14.axitech.com.br">Tema 5</option>
        <option value="http://z15.axitech.com.br">Tema 5</option>
        <option value="http://z16.axitech.com.br">Tema 5</option>
        <option value="http://z17.axitech.com.br">Tema 5</option>
        <option value="http://z18.axitech.com.br">Tema 5</option>
        <option value="http://z19.axitech.com.br">Tema 5</option>
        <option value="http://z20.axitech.com.br">Tema 5</option>
      </select>
    </form> 
</div>

<iframe style="height: 587px;" class="full-screen-preview__frame" src="<?php echo $temaselecionado; ?>" name="preview-frame" noresize="noresize" frameborder="0">
</iframe>

I would like to recover the value of the option in the click and play it in the $temaselecionado to load the selected tab. Note that the variable is source iframe. If you can do this without PHP, also serves.

Someone to help me?

php jquery ajax
  • 1

    When you say "click" which item should be clicked? or do you mean selected, type onchange select?

  • It is the select item that when being selected, clicked, I don’t know will load the value inside the iframe in src !!! I hope I answered the question I didn’t quite understand.

2 answers

2


You can do it like this:

document.querySelector('select[name="escolhe_tema"]').addEventListener('change', function(){
   var iframe = document.querySelector('iframe');
    iframe.src = this.value;
});

This code will detect the event change when an option changes and applies in iframe the select value.

He will assign to the src from select the url that is in value. However these links that you suggest seem do not allow them to be displayed inside an iframe. If that domain is from the same domain as the parent page you have to use relative paths, otherwise it won’t happen without loading the page in PHP and "copy" the content.

  • I noticed that the sources are not being loaded which are subdomains of my domain. How do I resolve this?

  • @Marcosvinicius in this case removes the domain from the url and uses only /oresto/do/caminho.html

1

With jQuery, you can do it like this:

$("select[name=escolhe_tema]").change(function() {
    var $iframe = $("iframe[name=preview-frame]");
    $iframe.attr("src", $(this).val());
});

Browser other questions tagged php jquery ajax

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