CODEWITHSUNDEEP
javascripthtml
Mark
Mark

Reputation: 10964

How to run Javascript codes that are put in a textbox (in HTML5)

I have a textbox on my html page, I'd like to run the javascript code that people put it the textbox. How can I do that?

Upvotes: 5

Views: 14280

Answers (4)

Spidy
Spidy

Reputation: 40002

You can create a new script dynamically like found here

Here's a quick example you can copy and paste into an html file and see it work. You'll notice that once called, the page reloads and stalls out. This could be solved by using ajax and a seperate page the executes the code and returns a value or string or whatever it is your code should return.

<html>
<head>
</head>
<body>
<script>
function doIt() {
    var headID = document.getElementsByTagName("head")[0];
    var newScript = document.createElement("script");
    newScript.type = "text/javascript";
    newScript.innerHTML = document.getElementById("textarea").value;
    headID.appendChild(newScript);
}
</script>

<textarea name="textarea" id="textarea">
alert("Alert");
</textarea>
<input type="button" value="Do It" onclick="doIt();" />
</body>
<html>

Upvotes: 6

Lampe2020
Lampe2020

Reputation: 350

I think the easiest native JS way to do it is to use a textbox's value attribute and eval() its content, as it doesn't require to create any script elements (that would be sitting there until the page is reloaded) or big constructs:

function runIt() {
  eval(document.getElementById('code-input').value);
  console.log('Ran code from textbox!');
}
<textarea id="code-input" placeholder="Input any JS code here"></textarea>
<button onclick="runIt()">Run it!</button>

This example is a text box and with every click on the button "Run it!" the text that's inside of it is executed as JavaScript.

In fact this answer is just a complicated way to say: "Just eval() a textbox's value."

Upvotes: 0

dextervip
dextervip

Reputation: 5069

You could also create a JavaScript function to get the content using jQuery and execute the code you wanted but you must set an id to the textbox 

<script>

$("#run").click(function () {
    var element = $("input#textbox").val();
    //code to execute
}

</script>
<input type="textbox" value="Type something" id="textbox"></input>
<button id="run">Run Code</button>

Upvotes: 2

ayush
ayush

Reputation: 14568

You can use document.getElementsByName 

<input name="textbox" type="text" />

<input name="buttonExecute" onclick="execute(document.getElementsByName('textbox')[0].value)" type="button" value="Execute" />

something similar i found here

Upvotes: 5

Related Questions