How to pass input value to string variable?

Question

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.

Secondly. your input id is embed-width but in the javascript your using #embedWidth — Jeemusu
– Jeemusu, Commented Jul 11, 2012 at 4:35

Chandu · Accepted Answer · 2012-07-11 04:40:23Z

1

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

edited Jul 11, 2012 at 4:40

answered Jul 11, 2012 at 4:22

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chandu Over a year ago

No wonder it wasn't working. You have assigned the id as 'embed-width' but in the jquery selector 'embedWidth' was being used. Updated the answer.

user1357684 Over a year ago

Thanks for the response. This would limit me to only the width and not the height though, right?

Chandu Over a year ago

Yes. If u need the change in height jus adapt the current version to check for change in height

Jeemusu · Accepted Answer · 2012-07-11 05:11:11Z

0

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/

edited Jul 11, 2012 at 5:11

answered Jul 11, 2012 at 4:37

Jeemusu

10.5k3 gold badges46 silver badges68 bronze badges

Collectives™ on Stack Overflow

How to pass input value to string variable?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related