Accessing the values of HTML forms in Javascript

Question

I am new to Javascript and I am having trouble figuring out why this code does not work the way I think it should.

Here is my Javascript code. All I'm trying to do (for now) is take the values from these text boxes and drop downs, and concatenate them.

<script>
function AdvancedSearch () {
var color = document.getElementByID("AdvSearchColor").value;
var ply = document.getElementByID("AdvSearchPly").value;
var cat = document.getElementByID("AdvSearchCategory").value;
var size = document.getElementByID("AdvSearchSize").value;
var description = document.getElementByID("AdvSearchDescription").value;
var fullsearch = ply + color + cat + description + size;
}
</script>    

<form id="advsearach" onsubmit="AdvancedSearch()">
Product Color: <input type="text" name="productcolor" id="AdvSearchProductColor"><br>
Product Ply Rating: <input type="text" name="productply" id="AdvSearchPlyRating"><br>
Product Category: <input type="text" name="productcategory" id="AdvSearchProductCategory"><br>
Product Size: <input type="text" name="productsize" id="AdvSearchProductSize"><br>
Product Description: <input type="text" name="productdescription" id="AdvSearchProductDescription"><br>
<input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form>

So I'm having trouble on the trivial of problems, just debugging this and getting it to work. Spent a few hours on it already.. Thanks for anyone who takes the time to look at this, it will probably save me a lot of time in the long run and that is a very nice thing to do.

Haha you think I'll get more views this way? I didn't notice that until you pointed it out. But it makes sense though right? Like when you click on Advanced Search on Google, that's what I meant. (But this is just a very simple implementation of an advanced search). Sorry for any confusion. — DNAInstant
– DNAInstant, Commented Jun 13, 2013 at 14:46
I knew what you meant, but it's amusing how it came out :p I do that kind of thing too sometimes. — Niet the Dark Absol
– Niet the Dark Absol, Commented Jun 13, 2013 at 15:08

lukaleli · Accepted Answer · 2013-06-13 14:51:25Z

2

you should use document.getElementById instead of document.getElementByID. There's a typo "Id" != "ID". And IDs of your form MUST match those in javascript form o.O

<form id="advsearach">
    Product Color: <input type="text" name="productcolor" id="AdvSearchColor"><br>
    Product Ply Rating: <input type="text" name="productply" id="AdvSearchPly"><br>
    Product Category: <input type="text" name="productcategory" id="AdvSearchCategory"><br>
    Product Size: <input type="text" name="productsize" id="AdvSearchSize"><br>
    Product Description: <input type="text" name="productdescription" id="AdvSearchDescription"><br>
    <input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form> 

<script>
function AdvancedSearch () {
    var color = document.getElementById("AdvSearchColor").value,
        ply = document.getElementById("AdvSearchPly").value,
        cat = document.getElementById("AdvSearchCategory").value,
        size = document.getElementById("AdvSearchSize").value,
        description = document.getElementById("AdvSearchDescription").value,
        fullsearch = ply + color + cat + description + size;
    console.log(fullsearch);
}
</script>

edited Jun 13, 2013 at 14:51

answered Jun 13, 2013 at 14:45

lukaleli

3,6653 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DNAInstant Over a year ago

Okay, that is probably indeed one of if not the main problem. I also learned that Javascript functions are case sensitive. Thank you.

lukaleli Over a year ago

I've updated my answer with working code. Open console to see the result. And mark answer as correct if it helped.

DNAInstant Over a year ago

Thank you for filling me in on some important things I must have glanced over when learning javascript. (I will mark answer as correct)

DNAInstant Over a year ago

Hey Lesny, now I want to add an additional line at the end of my javascript function, which redirects the user to a new URL. (The new URL will have the javascript variable as a variable in the URL string, which is subsequently parsed on the search results page.) Can you point me in the right direction on how to do this? Looking it up right now, although I already tried this before and ran into trouble, and I know it's very easy and probably just a syntax thing.

lukaleli Over a year ago

but FIRST tick the answer as correct - you only upvoted it;) if you just want to simply redirect using javascript use location.href = 'somewhere.com'

Collectives™ on Stack Overflow

Accessing the values of HTML forms in Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related