在iframe中分配变量

Question

After looking for a few days this answer comes close but still wont fix my problem jQuery: How to assign a variable inside of .html

I'm trying to get the vaule of the textbox into the scr part of a frame. I understand that from the above link that javascript must pull out the variable or it treats it as text but after trying for a few days cant get it to work. The response lands in a div on the page

<script>
$(document).ready(function() {
  $("#q").bind(
      "webkitspeechchange", 
      function(evt) {
        $('.response').html(
          "<iframe width='625' height='250' border='0' src='/index.php?q=' + INPUT_HERE + ' /><br> voice search vaule:"+ $(this).val())
        .fadeIn();   
}); 
});
</script>

Answer 1

This works for me:

<script>
$(document).ready(function(){
    $('#q').on( 'webkitspeechchange', function(e) {
        $('#response').html('<iframe width="625" height="250" border="1" src="/index.php?q=' + $(this).val() + '" /><br> Voice search value: ' + $(this).val()).fadeIn();
    });
});
</script>

<input type="text" name="q" id="q" x-webkit-speech="x-webkit-speech">
<div id="response"></div>

And here is the JS Fiddle

If you want to remove the surrounding div you can call $('#response').replaceWith(... instead of $('#response').html(... , but be aware that successive searches won't work anymore because #response has been removed from the DOM.