Proper way to retrive HTML textbox data using JavaScript

StackOverflow https://stackoverflow.com/questions/13092450

  •  14-07-2021
  •  | 
  •  

Question

Assuming I have a simple HTML page like the following:

<html>
  <head>...</head>

  <body>
    <input type="text" id="mytextarea" />
    <input type="button" id="button1" onClick="..." />
    <input type="button" id="button2" onClick="..." />
  </body>
</html>

What is the best way to access the text in the text-field with id="mytextarea" in a JavaScript function, without creating code heavily coupled to the HTML page, given the knowledge that button1 and button2 cause different manipulations on the text?

Just as an example, assume I am expecting a binary number in the text field, and button1 will convert it to an integer decimal number, but button two will convert it to a fractional decimal number. How can I handle this without tightly coupling the JavaScript code to the HTML page? Is there some way to send the data in mytextarea down to the JavaScript code, without having to use a document.getElementById('mytextarea') in the JavaScript functions themselves?

Perhaps I should clarify,

I am not looking for an alternative to using getElementById, I am looking for a way to write JavaScript code that can use a text-field in an HTML page without being coupled to it. In other words, I would like to know how to write JavaScript functions and HTML pages in such a way that (1) the JavaScript functions can perform work on data in the HTML page and (2) the JavaScript function can be be moved to another HTML page and used there, without changing said function.

Was it helpful?

Solution

I think this is what you want:

First you create an object called Textarea that lets you pass a textarea element as an argument:

function Textarea(textarea) {
    this.container = textarea;
    this.value = textarea.value
};

Then you can add methods shared by every instance of the Textarea object:

Textarea.prototype.ChangeValue = function(){
    console.log( 'Please add your ' + this.value );
};

In this way, you can pass mytextarea and modify it as you want. This allows to reuse properties and methods in your object in other textareas or other projects where you need it.

t = new Textarea(document.getElementById('mytextarea'));
t.ChangeValue();

Demo: http://jsfiddle.net/SQ2EC/

OTHER TIPS

Since you need some way to inform the functions about the elements to be operated on, there are two simple options. You can pass a reference to an element as a parameter when calling a function, as in

onclick="manipulate(document.getElementById('mytextarea'))"

Or you could pass just the id attribute value:

onclick="manipulate('mytextarea')"

in which case the function would need to use document.getElementById(), but on its parameter, not a wired-in string.

The first approach is more flexible in the sense that it lets you construct a reference in some other way too, e.g. document.getElementsByTagName('textarea')[0].

You could combine the approaches, by writing the function so that it can handle both kinds of parameters. It could e.g. first check whether its argument is of string type and use document.getElementById() on it if it is, otherwise expect it to be a reference to an element. And you should probably have some sanity checks in the function, testing that what you get or construct is really a reference to a textarea element.

I dint get what exactly you want to do but here you can get value of textbox on it's change event 

<script>
         $(document).ready(function () {
             $('input[id$=mytextarea]').change(function () {
                 alert($(this).val());
                 .............
                 now you have got the value so convert it to decimal and do other stuff
             });
         });
    </script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top