Simple web form text field returns nothing - input

Question

I'm running into a really baffling problem where I have an extremely simple (read, newbie trying to understand) web form. The form looks like this:
<form id="myform">
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
</form>
Then I have some also very simple js that I just want to use to check what the value is that the user has before doing some other things and submitting.
function search()
{
var form = document.querySelector("form");
s = form.elements[0].value;
alert(form.elements[0].type);
alert(form.elements[0].value);
}
What I don't understand is why, whatever I do, the first alert shows type "text" like I want, and the second one returns nothing at all. It doesn't matter what's in the field, when I submit, it goes away before the javascript even catches it.
I also tried
document.forms["myform"].addEventListener("submit", function(event) {
event.preventDefault();
});
And it seemed to have no effect on the fact that the page always submits when I refresh, but it did stop my button from submitting.
;tldr I just want the text value from my text field so I can do some validation, but it's always empty.
edit
Let me know if I can "close" questions. The problem was how I bound the function to the button, which I hadn't even considered. Be careful with those "()"

Answer 1

You may have to change the keyword "search" to something else like:
<script type="text/javascript">
function doSearch() {
var t = document.getElementById('t');
alert(t.type);
alert(t.value);
}
</script>
Then this will work:
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
do search