Getting Value Without Submiting

khalilov

Sep 3 2008, 06:01 PM

Iam using ajax and iam getting the hang of it.

CODE

var farm = document.getElementById('farm').value;
var lumbermill = document.getElementById('lumbermill').value;
var ironmine = document.getElementById('ironmine').value;
var stonemine = document.getElementById('stonemine').value;
var monument = document.getElementById('monument').value;
var queryString = "?farm=" + farm + "&lumbermill=" + lumbermill + "&ironmine=" + ironmine + "&stonemine=" + stonemine + "&monument=" + monument;

These don't seem to work, they stop my script from working. Is there anyway i can get the values from the input boxes having these ids without hitting submit?
I've seen it done on other sites

Comment/Reply (w/o sign-up)

toby

Sep 3 2008, 08:10 PM

Have you tried return: false; like for links?

Comment/Reply (w/o sign-up)

pyost

Sep 3 2008, 10:21 PM

It's just how I would do it - I don't see why it's not working. Have you tried commenting out parts of the code so as to see which line(s) is causing the problem?

Comment/Reply (w/o sign-up)

TavoxPeru

Sep 3 2008, 11:22 PM

QUOTE(khalilov @ Sep 3 2008, 01:01 PM)

Iam using ajax and iam getting the hang of it.

CODE

These don't seem to work, they stop my script from working. Is there anyway i can get the values from the input boxes having these ids without hitting submit?
I've seen it done on other sites

That is a common mistake we made -including myself- when we start using DOM, to retrieve the values from your input boxes you must use the getAttribute method, so replace your code with this:

CODE

var farm = document.getElementById('farm').getAttribute("value");
var lumbermill = document.getElementById('lumbermill').getAttribute("value");
var ironmine = document.getElementById('ironmine').getAttribute("value");
var stonemine = document.getElementById('stonemine').getAttribute("value");
var monument = document.getElementById('monument').getAttribute("value");
var queryString = "?farm=" + farm + "&lumbermill=" + lumbermill + "&ironmine=" + ironmine + "&stonemine=" + stonemine + "&monument=" + monument;
// alert("queryString = " + queryString);

I suppose that after declaring the queryString variable you are calling the ajax request right???

Best regards,

Comment/Reply (w/o sign-up)

turbopowerdmaxsteel

Sep 4 2008, 09:23 AM

I don't think you need to use the getAttribute() method. The problem must be something else. I believe you have wrongly typed the ID of one of the Input boxes. That would return a null value and when the parser tries to look for its value attribute, an error occurs.

Comment/Reply (w/o sign-up)

khalilov

Sep 4 2008, 10:18 AM

It turns out i was missing an ID like turbopowerdmaxs. said thx =)
also

CODE

That helped too , you saved me a question, thx TavoxPeru =)

Comment/Reply (w/o sign-up)

pyost

Sep 4 2008, 06:50 PM

QUOTE(TavoxPeru @ Sep 4 2008, 01:22 AM)

That is a common mistake we made -including myself- when we start using DOM, to retrieve the values from your input boxes you must use the getAttribute method, so replace your code with this:

CODE

I suppose that after declaring the queryString variable you are calling the ajax request right???

Best regards,

Wow, I didn't know this

But is it a mistake? If my memory serves me well, I learned how to use .value when I read a tutorial on AJAX at W3Schools - and all their texts are according to W3C standards.

Comment/Reply (w/o sign-up)

turbopowerdmaxsteel

Sep 5 2008, 10:08 AM

No its not a mistake. The getAttribute() method is required when dealing with XML data. But, when you retrieve an element using getElementById (or getElementsByTagName or through any of the other DOM functions), the returned value is an object. That is why, you can access the properties of the object just by their name.

Comment/Reply (w/o sign-up)

magiccode9

Sep 5 2008, 02:31 PM

But, as I learned from somewhere else.
ie 6 should not be supported the getAttribute() method on html / xhtml.
May be ie 7 do.

I have used it without the getAttribute() method both work correctly !

Am I right ?

Comment/Reply (w/o sign-up)

TavoxPeru

Sep 6 2008, 07:36 AM

khalilov no problem, you are welcome.

Now, i just upload a simple page to test how this work and i can say that the getAttribute() has some issues. The getAttribute("value") and .value Test Page includes a simple form with two text boxes and a submit button, also i set up a default value for the first input box while the second input box is empty.

Here are the results:

Firefox 3

both empty
first input box value using getAttribute = value
first input box value using value =
second input box value using getAttribute =
second input box value using value =

First with value Second empty
first input box value using getAttribute = value
first input box value using value = value
second input box value using getAttribute =
second input box value using value =

First empty Second with value
first input box value using getAttribute = value
first input box value using value =
second input box value using getAttribute =
second input box value using value = value

First with default value Second with value
first input box value using getAttribute = value
first input box value using value = value
second input box value using getAttribute =
second input box value using value = value

First with other value Second with value
first input box value using getAttribute = value
first input box value using value = value1
second input box value using getAttribute =
second input box value using value = value

IE6

both empty
first input box value using getAttribute =
first input box value using value =
second input box value using getAttribute =
second input box value using value =

First with value Second empty
first input box value using getAttribute = value
first input box value using value = value
second input box value using getAttribute =
second input box value using value =

First empty Second with value
first input box value using getAttribute =
first input box value using value =
second input box value using getAttribute = value
second input box value using value = value

First with default value Second with value
first input box value using getAttribute = value
first input box value using value = value
second input box value using getAttribute = value
second input box value using value = value

First with other value Second with value
first input box value using getAttribute = value1
first input box value using value = value1
second input box value using getAttribute = value
second input box value using value = value

As you can see with Firefox the getAttribute() always returns the default value of the input box even if you change it to another value, while with Internet Explorer it doesn't happens and in my opinion the getAttribute() works as you can expect.

BTW, I hope that someone can post the results of this test using another browsers like Internet Explorer 7, Safari or Opera, because i don't use any of them.

Best regards,

Comment/Reply (w/o sign-up)

Latest Entries

turbopowerdmaxsteel

Sep 10 2008, 11:35 AM

And I thought, I was the only one to use the clumsy alert debugging! Before moving to Firebug, I did some debugging using Visual Studio and Internet Explorer. Although much better, its not good enough to match the integrated debugger offered by firebug. Also, the popups with the message: "Would you like to debug this page?" were quite annoying.

There are libraries available for using AJAX which deal with all the browser compatibility issues. Someday, in the not so distant future, they will be useless too - as browsers are getting closer and closer to becoming standardized.

Comment/Reply (w/o sign-up)

TavoxPeru

Sep 10 2008, 10:12 AM

Another thing to take care when working with ajax is related to the encoding of your documents, the recommendation is to use and save your documents with the UTF-8 encoding always.

As Quatrux, i did not use any javascript debuger i use the simple alert debuging until Firebug arrives.

Best regards,

Comment/Reply (w/o sign-up)

Quatrux

Sep 9 2008, 05:33 AM

Using javascript and DOM is sometimes messy, I remember when I started using it, I always had problems with it, especially with the .value, .text and .innerHTML because on different elements I needed to use different functions, but with time trying I got the idea and now it's quite easy to understand how things work, but the thing, that you need to create it cross browser working, is also usually a headache if you're working with ajax, usually simple javascript with DOM has everything you need, I'm not saying that ajax is something different, it's just a request, but when you code, you can see something isn't working right on another browser and you need to change, as I don't work to much, I never really used a debugger for javascript, I mean a normal one, just the default one in Opera and other browsers by seeing the errors, but especially working with javascript loops which do something, I debugged it manually by using alert boxes to see what the hell is going on with the values there and with time I got things working

Comment/Reply (w/o sign-up)

TavoxPeru

Sep 9 2008, 04:26 AM

I agree with turbopowerdmaxsteel, because as you can see in the results i posted the .value always returns the correct input box's values.

Another way to achieve the same result and get the values of the HTML input boxes is by simply use plain javascript, for example, in the following code:

CODE

var t1 = document.f.t1.value;
alert('The value of the First Input Box is equal to ' + t1 + '.');

The variable t1 will hold the value of an input text box named t1 of a form named f, and after that the alert window will show it's value to the user.

Visit my Get Value Test page to view it in action.

Best regards,