Javascript variable values used for URL generation not evaluating as expected

Question

I'm trying to pass a string from a "text" field to an MVC action. The form variable is called query. The Javascript code is:

<input type="text" class="form-control input-lg" placeholder="search..." 
name="SearchBar" onkeypress="searchfunction()" />
<script>
function searchfunction()
{
    if (event.keyCode == 13) {
        var url = '"' + document.getElementById("#SearchBar").value + '"';
        window.location = "@Url.Action("~/Home/Search")?query=" + url;

    }
}
</script>

The URL generated from this should be domain/Home/Search?query=[contents of textfield] but for some reason it's generating a URL like domain/search.html?SearchBar=[contents of SearchBar] and I get 0x800a138f - JavaScript runtime error: Unable to get property 'value' of undefined or null reference. I am sure those two are related, but .value is what EVERY example I can find recommends using.

Note: I tried using the getElementById both with # and without, same for the name property of the input.

Should I just be passing the string in the onkeypress event? Am I missing something simple? Is this a bug in MVC 3?

The "id" attribute in input tag is missing, see my answer below — Roberto
– Roberto, Commented Mar 17, 2014 at 19:13

Roberto · Accepted Answer · 2014-03-17 19:11:44Z

3

Add the "id" attribute:

<input type="text" class="form-control input-lg" placeholder="search..." 
  name="SearchBar" id="SearchBar" onkeypress="searchfunction()" />

And remove the "#" character from getElementById() method param

answered Mar 17, 2014 at 19:11

Roberto

9,2004 gold badges46 silver badges57 bronze badges

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

Comments

Works On Mine · Accepted Answer · 2014-03-17 19:11:34Z

1

try this,

document.getElementById("SearchBar").value

the previous notation comes from jquery.you cannot use them interchangeably.If you prefer the jquery way that would be

$("#Searchbar").val();

and add an id = "Searchbar" to the textfield.

answered Mar 17, 2014 at 19:11

Works On Mine

1,1311 gold badge8 silver badges20 bronze badges

1 Comment

Originalmouse Over a year ago

that got rid of the error, but what in my string assembly process is telling it that there should be ".html" anywhere in that string? there aren't even HTML files on this server. whole thing is running with MVC routes.

Ash · Accepted Answer · 2014-03-17 19:18:50Z

1

You Define getElementsById() So If you select name from any html element you have to ..Use :

getElementsByName() ,Its return Array not a particular element as you want to select.

In your Case ( because you use # inside get function, i assume you have to get ID )

# = ID selector used In JQuery not in pure javascript.

apply ID of your Element :

<input type="text" class="form-control input-lg" placeholder="search..." 
name="SearchBar" id='SearchBar' onkeypress="searchfunction()" />
<script>
 function searchfunction()
 {
  if (event.keyCode == 13) {
    var url = '"' + document.getElementById("SearchBar").value + '"';
    window.location = "@Url.Action("~/Home/Search")?query=" + url;

  }
}
</script>

edited Mar 17, 2014 at 19:18

answered Mar 17, 2014 at 19:12

Ash

1,42015 silver badges32 bronze badges

3 Comments

Jacob Over a year ago

...except it's not getElementById("#SearchBar"); should be getElementById("SearchBar").

Originalmouse Over a year ago

@AshishMishra +1, would have marked this one had I refreshed and seen the comments.

Ash Over a year ago

its Ohk .. :) @Originalmouse

Collectives™ on Stack Overflow

Javascript variable values used for URL generation not evaluating as expected

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related