HOME       >>       Programming

Getting Value Without Submiting


khalilov

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

Have you tried return: false; like for links?


pyost

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

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

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

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

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

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

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

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

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

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


TavoxPeru

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

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

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,


turbopowerdmaxsteel

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.



VIEW DESKTOP VERSION REGISTERGET FREE HOSTING

Xisto.com offers Free Web Hosting to its Members for their participation in this Community. We moderate all content posted here but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2001-2019 by Xisto Corporation. All Rights Reserved.