The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> insert to textarea from select menu
owens4
post Jan 28 2021, 11:42 AM
Post #1





Group: Members
Posts: 2
Joined: 28-January 21
Member No.: 27,755



This code works with input button but not in my select menu. It's returning drop.options[selectedIndex].value and not the actual value.
Input button: <input type="button" value="<script>" onclick="insert(window.putit,'<script>\n\n</script>\n')" ></button>

The select menu:

<form id="drop">
<select onchange="insert(window.putit,('drop.options[selectedIndex].value'))">
<option>Select HTML</option>
<option value="insert(window.putit,'<script>\n\n</script>\n')">&lt;script></option>
<option value="insert(window.putit,'<iframe>\n\n</iframe>')">&lt;iframe></option>
<option value="insert(window.putit,'<textarea>\n\n</textarea>')">&lt;textarea></option>
</select></form>

THX
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2021, 12:36 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I'm not familiar with insert(), but I think you want the value of select, not option, as that will be the value of the chosen option. Try this.value.

Since I'm too lazy to read up on insert()... you can at least see that you get what you want.


CODE
<form id="drop">
<select onchange="alert(this.value)">
<option>Select HTML</option>
<option value="insert(window.putit,'<script>\n\n</script>\n')">&lt;script></option>
<option value="insert(window.putit,'<iframe>\n\n</iframe>')">&lt;iframe></option>
<option value="insert(window.putit,'<textarea>\n\n</textarea>')">&lt;textarea></option>
</select></form>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 28 2021, 03:16 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(owens4 @ Jan 28 2021, 05:42 PM) *

Input button: <input type="button" value="<script>" onclick="insert(window.putit,'<script>\n\n</script>\n')" ></button>

The INPUT element has no end tag, so </button> shouldn't be there.

Is value="<script>" valid HTML? pandy? unsure.gif

Is insert() a function? I don't think it's a predefined method.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 28 2021, 06:06 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Jan 28 2021, 09:16 PM) *

Is value="<script>" valid HTML? pandy? unsure.gif

I don't know. But I *think* so. unsure.gif
It's CDATA. It says entities can be used, not that they must be used for certain characters.
https://htmlhelp.com/reference/html40/values.html#cdata


QUOTE
Is insert() a function? I don't think it's a predefined method.


Seems to be a method. I found just one page about it, that uses another syntax than the OP (no comma). Then I gave up. cool.gif
https://www.tutorialspoint.com/prototype/pr...ment_insert.htm
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 29 2021, 09:04 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Jan 29 2021, 12:06 AM) *

Seems to be a method. I found just one page about it, that uses another syntax than the OP (no comma). Then I gave up. cool.gif
https://www.tutorialspoint.com/prototype/pr...ment_insert.htm

Oh, that's part of the Prototype Javascript framework/library: https://www.tutorialspoint.com/prototype/pr...pe_overview.htm so it can't be used outside that.

There is a real javascript method called insertBefore() that can be used without libraries, though it's a DOM method so it can't insert strings unless you turn them into text- or element nodes first.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 29 2021, 01:04 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Oh, I didn't read to close. Whatever it is, the OP had it working, so I guess he has what it takes. He just asked for help to get the value from the select control.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
owens4
post Feb 1 2021, 11:40 AM
Post #7





Group: Members
Posts: 2
Joined: 28-January 21
Member No.: 27,755



I figured it out, I was overthinking it.
The code below inserted html tags to a textarea.
The setframe() updated an iframe to render the html.
Thanks...

<script>
function insert(el,ins) { //add code @ cursor//
window.putit={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}

function setframe() { //textarea 2 iframe//
var enterHTML = enter.value;
var iframe = document.getElementById('output');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(enterHTML);
iframe.contentWindow.document.close();
}
</script>

<select class="button1" id="tags" name="tags" onchange="insert(window.putit,this.value),setframe()">
<option value="">INSERT HTML</option>
<option value='<script>&#10&#10</script>&#10'>&lt;SCRIPT></option>
<option value='<style>&#10&#10</style>&#10'>&lt;STYLE></option>
<option value='<textarea></textarea>&#10'>&lt;TEXTAREA></option>
<option value='<div id="">My Div</div>&#10'>&lt;DIV></option>
<option value='<iframe src="" style="width:200px; height:200px; resize:both;"></iframe>&#10'>&lt;IFRAME></option>
<option value='<button>my button</button>&#10'>&lt;BUTTON></option>
<option value='<select id="">&#10<option>Select</option>&#10<option value="">1</option>&#10<option value="">2</option>&#10<option value="">3</option>&#10</select>&#10'>&lt;SELECT></option>
<option value='<font size="7" color="red">Hello World</font>&#10'>&lt;FONT></option>
<option value='<img src="https://thumbs.gfycat.com/DampAnyBubblefish-size_restricted.gif" border="0">&#10'>&lt;IMAGE></option>
<option value='<audio controls autoplay loop>&#10<source src="https://pl3dxz-a.akamaihd.net/downloads/ringtones/files/mp3/pink-panther-6836.mp3" type="audio/mpeg">&#10</audio>&#10'>&lt;AUDIO></option>
<option value='<a href="http://duckduckgo.com" target="_blank">Duck Duck Go</a>&#10'>&lt;LINK></option>
<option value='<pre>&#10&#10</pre>'>&lt;PRE></option> <!-- <option value=''></option> -->
</select>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 10:55 PM