How can I get the current textarea value?

Problem: so I warned the value of textarea by:

 var source = document.getElementById('source').value; alert(source); 

But the value of textarea warned, as it was at page load time. And I want to warn the current value of textarea . I also tried

 $("form").submit(function(){ 

But it also did not help me. So how can I do this?

This is my code.

 <html> <head> <title>Perl WEB</title> <script type="text/javascript" src="http://code.guru99.com/Perl1/codemirror.js"></script> <link rel="stylesheet" href="http://code.guru99.com/Perl1/codemirror.css" type="text/css" media="screen" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.guru99.com/perl/perl.js"></script> <style> .CodeMirror { border: 1px solid #eee; } .CodeMirror-scroll { height: auto; overflow-y: hidden; overflow-x: auto; } </style> <script> $(document).ready(function(){ $("form").submit(function(){ alert("Submitted"); }); }); </script> <script type="text/javascript"> function execute() { p5pkg.CORE.print = function(List__) { var i; for (i = 0; i < List__.length; i++) { document.getElementById('print-result').value += p5str(List__[i]) } return true; }; p5pkg.CORE.warn = function(List__) { var i; List__.push("\n"); for (i = 0; i < List__.length; i++) { document.getElementById('log-result').value += p5str(List__[i]); } return true; }; p5pkg["main"]["v_^O"] = "browser"; p5pkg["main"]["Hash_INC"]["Perlito5/strict.pm"] = "Perlito5/strict.pm"; p5pkg["main"]["Hash_INC"]["Perlito5/warnings.pm"] = "Perlito5/warnings.pm"; var source = document.getElementById('source').value; alert(source); var pos = 0; var ast; var match; document.getElementById('log-result').value = ""; // document.getElementById('js-result').value = ""; document.getElementById('print-result').value = ""; try { // compile document.getElementById('log-result').value += "Compiling.\n"; var start = new Date().getTime(); var js_source = p5pkg["Perlito5"].compile_p5_to_js([source]); var end = new Date().getTime(); var time = end - start; document.getElementById('log-result').value += "Compilation time: " + time + "ms\n"; // document.getElementById('js-result').value += js_source + ";\n"; // run start = new Date().getTime(); eval(js_source); end = new Date().getTime(); time = end - start; document.getElementById('log-result').value += "Running time: " + time + "ms\n"; p5pkg.CORE.print(["\nDone.\n"]); } catch(err) { document.getElementById('log-result').value += "Error:\n"; document.getElementById('log-result').value += err + "\n"; document.getElementById('log-result').value += "Compilation aborted.\n"; } } </script> </head> <body> <form> <textarea id="source" cols="70" rows="10"> say 'h'; </textarea> <div class="hint">This code is editable. Click Run to execute.</div> <input type="button" value="Run" onclick="execute()"/></br> Output:</br> <textarea id="print-result" disabled="true" rows="10" cols="70"></textarea></br> Log:</br> <textarea id="log-result" disabled="true" cols="70"></textarea> <script> var editor = CodeMirror.fromTextArea(document.getElementById("source"), { lineNumbers: true, indentUnit: 4, indentWithTabs: true, enterMode: "keep", tabMode: "shift" }); </script> </form> </body> </html> 

So how can I get the current textarea value? Please help me guys.

+4
source share
5 answers

I am not familiar with CodeMirror, but what you see exactly on the screen is no longer your original #source . Instead, there are several elements created by CodeMirror, and the original textarea is hidden.

When I look at the documentation, I found this:

 var source = editor.doc.getValue(); alert(source); 

Or, since you built the editor object using the fromTextArea() method, you can update the textarea value before reading it:

 editor.save(); var source = document.getElementById('source').value; alert(source); 

Also pay attention to what Adam said about submitting the form. And your HTML has invalid tags </br> , the correct form is <br /> .

Visit the CodeMirror User Guide for more information.

+1
source

When you download jQuery, you can do the following:

 var content = $('#source').val(); alert(content); 

Of course, if you do this when loading the page, the text area will be empty (or even not processed). You can extract its contents in the submit form, as you seem to suggest.

This code will create a button that will alert the contents of your text field when pressed:

 <button onclick="alert($('#source').val())">Click me</button> 
0
source

Try the following inside submit ()

 var textAreaVal = $("#print-result").val(); alert(textAreaVal); 
0
source

if you want the value to be warned when the mouse leaves the text box, you can try adding onblur = "myFunction ()" to the input something like: (in fact, if you want it to leave the mouse, you can add onmouseout = "tuRipsYop ()")

 <textarea id="source" cols="70" rows="10" onblur="myFunction()"> say 'h'; </textarea> <script type="text/javascript"> function myFunction() { var source = document.getElementById('source').value; alert(source); } </script> 
0
source

Your form is not submitted when the button is clicked because it is not a submit button.

This will not present the form and will not warn its contents.

 <input type="button" value="Run" onclick="execute()"/></br> 

Add something like this to the form:

 <input type="submit" value="Submit"> 
0
source

Source: https://habr.com/ru/post/1490245/


All Articles