Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    Bokaro Steel City, India
    Posts
    21
    Thanks
    14
    Thanked 1 Time in 1 Post

    Exclamation Using the selected value to define a variable!

    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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,015
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Are you saying that you allow people to enter scripts which are then passed to the server? That is dangerously insecure!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    Bokaro Steel City, India
    Posts
    21
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question

    Quote Originally Posted by Philip M View Post
    Are you saying that you allow people to enter scripts which are then passed to the server? That is dangerously insecure!
    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!

    Now may you please help me with this?


    I am just getting more and more curious!

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    Bokaro Steel City, India
    Posts
    21
    Thanks
    14
    Thanked 1 Time in 1 Post
    This is what I have right now:
    Code:
    <!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?
    Last edited by TheAliveWinner; 03-02-2012 at 03:55 PM.

  • #5
    New Coder
    Join Date
    Feb 2012
    Location
    Bokaro Steel City, India
    Posts
    21
    Thanks
    14
    Thanked 1 Time in 1 Post
    Got the solution!
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •