CODEWITHSUNDEEP
jquery
user1357684
user1357684

Reputation: 75

How to pass input value to string variable?

I'm trying to allow users to specify the height and width of an iframe. I would like to allow them to enter a height and width which would populate those values in a string wich they could copy and paste. I'm not sure how to pass that value to the string.

<form id="embed-customize" action="/" style="display:block">
    <fieldset class="embed-size">
    <legend>Size:</legend>
    <div>
    <input id="embed-width" type="text" value="300">
    x
    <input id="embed-height" type="text" value="500">
    </div>
    </fieldset>

</form>
<textarea id="embed-url" rows="3" cols="100"></textarea>
<script>
jQuery(document).ready( function() {
var embedWidth = "";
var embedHeight = "";
var iframe = "";

jQuery('#embedWidth').blur(function(){
  embedWidth = jQuery(this).val();
})

var iframe = '<iframe width = ' + embedWidth + 'px height = ' + embedHeight +'px frameborder = "0" scrolling = "no" src = "http://www.example.com">"></iframe>';
jQuery('#embed-url').val(iframe);
})
</script>

This is what I have so far but it doesn't seem to work. I'm not sure what I'm doing wrong.

Upvotes: 0

Views: 536

Answers (2)

Jeemusu
Jeemusu

Reputation: 10533

Give this a shot
http://jsfiddle.net/9zsqQ/

Your input id was not consistent. In the HTML it is #embed-width but in the javascript your using #embedWidth.

Secondly your iframe code had spaces between the atribute name and the value, and some were not wrapped in double quotes. It should have been something like this:

var iframe = '<iframe width="' + embedWidth + 'px" frameborder="0" scrolling="no" src="http://www.example.com">"></iframe>';

Updated the jsfiddle so that it works for both inputs:
http://jsfiddle.net/9zsqQ/2/

Upvotes: 0

Chandu
Chandu

Reputation: 82913

Try this:

jQuery('#embed-width').blur(function(){
  embedWidth = jQuery(this).val();
  var iframe = '<iframe width = ' + embedWidth + 'px height = ' + embedHeight +'px frameborder = "0" scrolling = "no" src = "http://www.example.com">"></iframe>';
  jQuery('#embed-url').val(iframe);
 });
})

Upvotes: 1

Related Questions