How to get the selected value from the selection window from inside the iframe and display it outside?

I have this selection box in HTML, and the page on which it loads is loaded onto another page (like on my website) via an iframe. I want to get the selected value from the select box (inside the iframe) and display it outside. Here is some code that I put together, but I don’t know if I am doing this correctly:

<script> $('#iframe').contents().find('#cds').change(function() { var selectVal = $(this).val(); url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on'; $("twitter").attr("id", url); }); </script> 

Any tips?

To clarify

  • My <select> element is in an iframe
  • I want to display the selected value outside the iframe
  • The iframe source is in the same domain as the page on which it is loaded.
+4
source share
1 answer

I'm not sure what your HTML looks like, but

 $("twitter").attr("id", url); 

should be:

 $(".twitter").attr("id", url); 

Update: try this code ... you need to determine if iframe ( demo ) is loaded

 $(function () { // define this here because we're changing the ID var $twitter = $('#twitter'); // bind to select inside iframe $('#iframe').on('load', function () { $(this).contents().find('#cds').change(function () { var selectVal = $(this).val(); url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on'; $twitter.attr("id", url).text(url); }).change(); // trigger change to get initial value }); }); 

In addition, since we are changing the identifier of the tweeter, we need to save this jQuery object.

+2
source

All Articles