Getting Value Without Submiting

[khalilov 0]

Iam using ajax and iam getting the hang of it.

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

[toby 0]

Have you tried return: false; like for links?

[pyost 0]

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?

[TavoxPeru 0]

Iam using ajax and iam getting the hang of it.

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

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:

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,

[turbopowerdmaxsteel 0]

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.

[khalilov 0]

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

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);

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

[pyost 0]

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:

 

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,

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.

[turbopowerdmaxsteel 0]

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.

[magiccode91405241511 0]

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 ?

[TavoxPeru 0]

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,

[khalilov 0]

Does this mean users using firefox and IE <7 opening my sight will recieve errors? if so how can i make it work for everyone

[turbopowerdmaxsteel 0]

Just use the .value property. It will work on all browsers.

[TavoxPeru 0]

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:

 

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,

[Quatrux 4]

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

[TavoxPeru 0]

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,