...

View Full Version : Using the selected value to define a variable!



TheAliveWinner
03-02-2012, 10:02 AM
Hi everyone!

I am building a simple web application in which the user inputs some html code in a <textarea> and the corresponding result (output of the code) is shown!

The problem I am facing is that suppose the user enters some code and wishes to wrap it inside specific tags (e.g. <script></script>) then she just selects the corresponding code and clicks a predefined button and the selected code gets wrapped inside those tags!

Now, what I am thinking right now is that when the user selects some code and clicks the button the selected text goes inside a variable (e.g. old_variable) and a new variable (new_variable = "<script>" + old_variable + "</script>") is returned!

But I was just wondering how to send the selected code in the variable i.e. old_variable using JavaScript?

Any help/hint/suggestion/advice would be highly valuable for me!

Thanks! :)

Philip M
03-02-2012, 11:09 AM
Are you saying that you allow people to enter scripts which are then passed to the server? That is dangerously insecure! :eek:

TheAliveWinner
03-02-2012, 04:33 PM
Are you saying that you allow people to enter scripts which are then passed to the server? That is dangerously insecure! :eek:

Sir, thanks for your response!

But this is not a real world application! :)

I know that in real world it is a dangerous thing to do! :eek:

Now may you please help me with this?

I am just getting more and more curious! :(

TheAliveWinner
03-02-2012, 04:49 PM
This is what I have right now:


<!doctype html>
<html>
<head>
<title>HTML Output</title>
<style>
textarea{
width: 600px;
height: 450px;
border-radius: 0 10px;
border-width: 5px;
border-style: double;
border-color: orange;
background-color: rgb(250,250,180);
color: black;
font-size: xx-large;
font-weight: bold;
}
button{
background-color: green;
border-radius: 10px;
color: white;
font-family: candara;
font-size: larger;
border-width: 3px;
padding: 4px;
}
button:hover{
color: yellow;
}
button:active{
color: white;
}
body{
background-color: rgb(250,250,210);
}
</style>
<script>
function formatText(){
var input = document.getElementById('input').value;
if(input!="\"Put text here!\"" && input!=""){
var my_window = window.open("","MyWindow");
my_window.document.write(input);
}
}
function clearText(){
var temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" ){
temp = "\"Put text here!\"";
document.getElementById('input').value = temp;
}
temp = "";
document.getElementById('output').value = temp;
}
function clearTextArea(){
temp = document.getElementById('input').value;
if(temp=="\"Put text here!\""){
temp = "";
document.getElementById('input').value = temp;
}
}
function selectAll(){
temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" && temp!=""){
document.getElementById('input').select();
}
}
function putHtmlTags(){
temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" && temp!=""){
document.getElementById('input').value = "<!doctype html>\n"+"<html>\n"+temp+"\n</html>";
}
}
function putScriptTags(){
temp = document.getElementById('input').value.select(); // This line is wrong! I don't know what to put here?
if(temp!="\"Put text here!\"" && temp!=""){
document.getElementById('input').value = "<script>\n"+temp+"\n<\/script>";
}
}
</script>
</head>


<body>
<h1 style="color:green;margin:0 0 5px 0;font-family:monospace;">Formatting as HTML Output!</h1>
<textarea id="input" onclick="clearTextArea()">"Put text here!"</textarea>
<br/>
<button onclick="selectAll()" style="background-color:darkgreen;width:100px;">Select all!</button>
<button onclick="putHtmlTags()">&lt;html&gt; tags</button>
<button onclick="putScriptTags()">&lt;script&gt; tags</button>
<button onclick="putStyleTags()">&lt;style&gt; tags</button>
<br/>
<div style="margin-bottom:3px;"></div>
<button onclick="formatText()" style="background-color:darkblue;">HTML Output!</button>
<button onclick="clearText()" style="background-color:red;">Clear all!</button>
</body>
</html>

Can somebody help?
:(

TheAliveWinner
03-02-2012, 07:35 PM
Got the solution! :)

<!doctype html>
<html>
<head>
<title>HTML Output</title>
<style>
textarea{
width: 600px;
height: 450px;
border-radius: 0 10px;
border-width: 5px;
border-style: double;
border-color: orange;
background-color: rgb(250,250,180);
color: black;
font-size: xx-large;
font-weight: bold;
}
button{
background-color: green;
border-radius: 10px;
color: white;
font-family: candara;
font-size: larger;
border-width: 3px;
padding: 4px;
}
button:hover{
color: yellow;
}
button:active{
color: white;
}
body{
background-color: rgb(250,250,210);
}
</style>
<script>
function formatText(){
var input = document.getElementById('input').value;
if(input!="\"Put text here!\"" && input!=""){
var my_window = window.open("","MyWindow");
my_window.document.write(input);
}
}
function clearText(){
var temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" ){
temp = "\"Put text here!\"";
document.getElementById('input').value = temp;
}
temp = "";
document.getElementById('output').value = temp;
}
function clearTextArea(){
temp = document.getElementById('input').value;
if(temp=="\"Put text here!\""){
temp = "";
document.getElementById('input').value = temp;
}
}
function selectAll(){
temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" && temp!=""){
document.getElementById('input').select();
}
}
function putHtmlTags(){
temp = document.getElementById('input').value;
if(temp!="\"Put text here!\"" && temp!=""){
document.getElementById('input').value = "<!doctype html>\n"+"<html>\n"+temp+"\n</html>";
}
}
function putScriptTags(){
/*---Ref: http://www.webmasterworld.com/forum91/5005.htm---*/
var myArea = document.getElementById('input');
if(typeof(myArea.selectionStart) != "undefined"){
var begin = myArea.value.substr(0, myArea.selectionStart);
var selection = myArea.value.substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);
var end = myArea.value.substr(myArea.selectionEnd);
/*---modified by author---*/
if(selection!="" && selection!="\"Put text here!\""){
myArea.value = begin + "<script>\n" + selection + "\n<\/script>" + end;
}
/*\---modified by author---\*/
}
/*\---Ref: http://www.webmasterworld.com/forum91/5005.htm---\*/
}
function putStyleTags(){
/*---Ref: http://www.webmasterworld.com/forum91/5005.htm---*/
var myArea = document.getElementById('input');
if(typeof(myArea.selectionStart) != "undefined"){
var begin = myArea.value.substr(0, myArea.selectionStart);
var selection = myArea.value.substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);
var end = myArea.value.substr(myArea.selectionEnd);
/*---modified by author---*/
if(selection!="" && selection!="\"Put text here!\""){
myArea.value = begin + "<style>\n" + selection + "\n<\/style>" + end;
}
/*\---modified by author---\*/
}
/*\---Ref: http://www.webmasterworld.com/forum91/5005.htm---\*/
}
</script>
</head>

<body>
<h1 style="color:green;margin:0 0 5px 0;font-family:monospace;">Formatting as HTML Output!</h1>
<textarea id="input" onclick="clearTextArea()">"Put text here!"</textarea>
<br/>
<button onclick="selectAll()" style="background-color:darkgreen;width:100px;">Select all!</button>
<button onclick="putHtmlTags()">&lt;html&gt; tags</button>
<button onclick="putScriptTags()">&lt;script&gt; tags</button>
<button onclick="putStyleTags()">&lt;style&gt; tags</button>
<br/>
<div style="margin-bottom:3px;"></div>
<button onclick="formatText()" style="background-color:darkblue;">HTML Output!</button>
<button onclick="clearText()" style="background-color:red;">Clear all!</button>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum