jQuery append text to an existing with checkbox

Question

So I have a checkbox and textarea with the text

<input type="checkbox" value="" class="responsive" checked="checked"> Responsive?<br />
<textarea cols="40" rows="5" placeholder="<?php echo $entry_code; ?>" id="input-code" class="form-control afftextie"><div class="intrinsic-container"><iframe src="content.php" style="overflow: hidden;border:none;width:1000px;height:400px" scrolling="no""></iframe></div></textarea>

Now I'm trying to append and extra text/code when checkbox clicked and remove when unchecked.

var $input = $( '.afftextie' ).text();
$( ".responsive" ).change(function() {  
$( '.afftextie' ).appennd($input+'<style>.intrinsic-container{position:relative;overflow:hidden;min-height:400px;margin-bottom:10px}.intrinsic-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width:990px){.intrinsic-container{min-height:1151px}}@media (max-width:510px){.intrinsic-container{min-height:1570px}}</style>').text()}).change();

demo : https://jsfiddle.net/wr39vhjt/2/

appennd is not a function

Popnoodles
– Popnoodles

2015-08-11 14:05:25 +00:00
Commented Aug 11, 2015 at 14:05 — Popnoodles
– Popnoodles, Commented Aug 11, 2015 at 14:05
scrolling="no"" is invalid markup

Popnoodles
– Popnoodles

2015-08-11 14:06:50 +00:00
Commented Aug 11, 2015 at 14:06 — Popnoodles
– Popnoodles, Commented Aug 11, 2015 at 14:06

Popnoodles · Accepted Answer · 2015-08-11 14:50:34Z

1

I edit your fiddle. https://jsfiddle.net/ebilgin/wr39vhjt/3/

You must change your code a little bit. First you can reach textarea's inside with .val() not .append(). Then you need a checked condition.

var $input = $( '.afftextie' ).text();
$( ".responsive" ).change(function() {

    if ( $(this).prop("checked") ) {

        $( '.afftextie' ).append($input+'<style>.intrinsic-container{position:relative;overflow:hidden;min-height:400px;margin-bottom:10px}.intrinsic-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}@media (max-width:990px){.intrinsic-container{min-height:1151px}}@media (max-width:510px){.intrinsic-container{min-height:1570px}}</style><div class="intrinsic-container"><iframe src="content.php" style="overflow: hidden;border:none;width:1000px;height:400px" scrolling="no""></iframe></div>').text()

    } else {

        $( '.afftextie' ).html("");

    }
}).change();

edited Aug 11, 2015 at 14:50

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

answered Aug 11, 2015 at 14:07

ebilgin

1,25210 silver badges19 bronze badges

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

7 Comments

Popnoodles Over a year ago

Please also post the code in the answer. Then it can get +1s

Grasper Over a year ago

the iframe need to be in textarea and when clicked the style added

Popnoodles Over a year ago

@Grasper, ebilgin has given you enough information for you to fix the problem exactly as you require. You may not have given enough information.

ebilgin Over a year ago

You cannot add a iframe in textarea. Textarea is a form control you can insert a text, not HTML. Secondly, adding css to iframe is another question you must ask. Please edit your question.

ebilgin Over a year ago

jsfiddle.net/ebilgin/wr39vhjt/3 I'd edit the fiddle. I think its closer to your request.

|

Collectives™ on Stack Overflow

jQuery append text to an existing with checkbox

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related