Proper way to retrive HTML textbox data using JavaScript

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.

var textarea = $('body').find('textarea'); textarea.val(); ?? — r_31415, Oct 26 '12 at 18:35
I'm not sure what you're asking. If you're asking, "is there automatic DOM data binding," then the answer is no. If you're asking "how do I avoid having to constantly go to the DOM to get the data," then my answer would be to avoid using the DOM to hold your app state. Instead, think about constantly pushing values from JS to the DOM, as opposed to always pulling value from the DOM to JS. — Andrew, Oct 26 '12 at 18:39
One way or another unless you do what @Andrew said then you will have to couple it in some way. You can in fact make the html the more dependent part of the relationship if you work with anonymous/generic javascript functions. If you would like to see an implementation of this let me know. Otherwise not going to waste time laying out something you won't use. — Ryan, Oct 26 '12 at 18:47
I hope this doesn't miss the point, but can't you just pass the name of the field as a parameter to your function. — , Oct 26 '12 at 18:55
@RobertSmith unless the question is tagged `jQuery`, you should not assume OP knows what it is, wants to, or even can use it. — sachleen, Oct 26 '12 at 18:59
I think that the OP knows about Jquery. That goes without saying. Maybe he doesn't want to use and that's a valid point, but let's wait for him to decide that. Although now reading his reading clarification, I think I know what he means. — r_31415, Oct 26 '12 at 19:04
@RobertSmith not everyone wants to include jquery for the use of one or two functions. Just saying. — Ryan, Oct 26 '12 at 19:05
@RobertSmith It's only a problem in that you don't actually mention jQuery. jQuery does not go without saying. Someone new to JS would see the $ and wonder why that doesn't work for them. Your comment had no mention of jQuery at all. Not to mention $ is used by other libraries as well, and it is easily convoluted. — Matt, Oct 26 '12 at 19:24
@Matt Actually, most people new to Javascript start by learning Jquery, which is something others decry. Anyway, see my answer. — r_31415, Oct 26 '12 at 19:28

score 1 · Accepted Answer · answered Oct 26 '12 at 19:26

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/

score 0 · Answer 2 · answered Oct 26 '12 at 19:37

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.

score -2 · Answer 3 · answered Oct 26 '12 at 19:00

-2

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>

answered Oct 26 '12 at 19:00

Ankush Jain

5,654
4
32
57

No. This is not what he wants. The use of `mytextarea` id is the exact coupling he is trying to avoid with this question. – Ryan Oct 26 '12 at 19:09

Proper way to retrive HTML textbox data using JavaScript

3 Answers3