We Keep Coding

[Javascript]Fill a textbox without ID and a name that changes on page reload using a bookmark

So I am trying to make a bookmark in chrome that would input a Javascript code that would fill up a textbox on my router home page. The goal is saving me the hassle of either remembering that silly password or having to open my textfile containing the said password.
I know, I know, ... I am lazy. (but not for learning some Javascript in the process)
The thing is the textbox doesn't have an ID and its name changes on reload so I cannot know its name in advance.
I have looked at a few pages on here that kind of guide me in the right direction but I can not make it work for the life of me as I have little to no experience in Javascript.
Here is what the html of the textbox looks like :
<input type="PASSWORD" style="WIDTH: 150px" name="password_random10digitnumber" value="" size="20" maxlength="64">
Here is what I ended up with as a link on my bookmark (the only thing I tried that doesn't give me an error).
javascript:document.getElementsByTagName("input")[0].value='myrouterpwd'
Currently, when I press my bookmark, it refreshes the page and shows a blank page with "myrouterpwd" on it.
(There is two other input html blocks on the page which are :
<input type="HIDDEN" name="md5_pass" value="">
<input type="HIDDEN" name="auth_key" value="numbersIamnotsureIshouldshowtheworld">
)
Thank you to anybody taking the time to answer!

I haven't worked much with bookmarks and am assuming that because it's a bookmark, you are navigating away from the page that you actually want to work with. So, I'm not sure that triggering this that way is a viable solution. Of course, you could just take advantage of the browser's ability to store passwords for you. ;)
But, to the main point of your question... Assuming that it's the only password field on the page, the use of element.querySelector() will find it:
// Get a reference to the right element based on its type attribute value
let passwordBox = document.querySelector("input[type='password']");
passwordBox.value = "MySecretPassword"; // Populate the field
console.log(passwordBox.value); // Confirmation
[type='password'] { background:yellow; } /* Just so you know which box is the password box */
<input type="hidden" name="doesntMatter">
<input name="someTextBox">
<input type="password" name="doesntMatter2">
<input name="someOtherTextbox">

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks

In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Accidental JavaScript redirct?

I have a form that adds an item to a list when I press enter or hit a submit button. I'm not sure what I've changed, but suddenly pressing enter seems to redirect the URL, while clicking the button acts normally.
The HTML portion looks like this:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
</form>
The jQuery is:
$('#check').click(function () {
addIngredient('new-ingredient');
});
$('.new-ingredient').keypress(function (e) {
if (e.keyCode == 13) {
addIngredient('new-ingredient');
}
});
So it's running the same function either way. In both cases, it successfully adds the ingredient to the list, but in the 2nd case, the page is redirected from "recipe.html" to "recipe.html?new-ingredient=".
And here's the part that really confuses me: when I add an extra input to the form, this problem doesn't occur when I press enter in either box:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<input type="text"></input>
</form>
Also, if I add in an actual button (not my clickable image), it redirects like pressing enter, even though I have no code to do anything if the button is pressed. In this case, the extra input field has no effect.
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<button id="button">Add Ingredient</button>
</form>
I have absolutely no idea why this is happening. Even if I get rid of the jQuery to perform an action when I hit enter, this still happens. I'm new to JavaScript, so sorry if this is something obvious, but I'd really appreciate some help.
I can also provide more of my code if it's relevant, but I didn't want to clog things up with a ton of code.

Hitting enter (or clicking the button if its there) is submitting the form (this makes it appear to "redirect the URL"). You need to prevent that from happening with e.preventDefault(). So in the click listener:
$('#button').click(function(e){
e.preventDefault();
addIngredient('new-ingredient');
});
Put that in each of the listeners, or get rid of your form tags so there isn't anything to submit (as was mentioned in the comments).

I don't entirely blame you for being confused. The browser default behavior is to perform the "submit" action, whatever it is, when someone presses enter while a field in the form is highlighted. As elclanrs said, you can override the submit action; in fact, I'm pretty sure in JQuery it's just this:
$('#add-ingr').submit(function(e) {
if ('event is not coming from button')...{
e.preventDefault();
}
});
I'm afraid I couldn't explain why adding a blank input changed the effect, though. Through my laziness, I have also left you the work of determining the best way of allowing actual submissions, though (if the form gets submitted to the server, you won't want to block submit every time)

Search form: Make it reload the page when pressing enter, and have it highlighted upon page load

Here's the code for the form as it stands:
<form onsubmit="return false;" role="search" method="get" id="searchform" action="window.location.reload()" autocomplete="off">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" class="searchbar" >
</div>
</form>
Since I'm actually using a 'live search' plugin from wordpress (searches without navigating to another page), and it has a bug where deleting and re-entering the same text does not search again, I was wondering how I would get the page to reload if the user just pressed enter in the search box?
My second question is how to get the search bar to be highlighted or selected by default upon the page being loaded, just like Google? I've tried this:
<body onload"
$(function() {
$("input[name='s']").focus();
});​
">
But it doesn't seem to do anything. Any help on either of these problems would really be appreciated!

You're not escaping the double quotes in the onload function. You can fix that by escaping the quotes with backslashes, but a better way to fix this is to put this code in a <script> tag (instead of inline):
<script>
$(function() {
$("input[name='s']").focus();
});​
</script>
When using the $() function like this, it acts as a shortcut for $(document).ready(), so there's no need to attach it to the body's onload event.
Just to clarify, the other way to fix it would be to use escaped single quotes, like so:
<body onload"
$(function() {
$('input[name=\'s\']').focus();
});​">
But I highly recommend you put this in a <script> tag. It's better not to use inline JavaScript, and with jQuery there is no need to.

Javascript Form Input Retrieval

Why is it that in a form that contains a Text Box and a Submit Button, I can Alert what has been typed in the text box by the user, but can't print it on the page? What am I doing wrong?
Here's the code
<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="submit" value="Join" onClick="serb(this.form)" />
<script type="text/javascript">
function serb(form){
var x = document.Serb.Name.value;
alert(x); \\this alerts
document.write(x); \\this should print on page
}
</script>
For some reason, the alert works fine and displays exactly what the user typed in the username box after pressing 'Join'. However, it won't print the information on the page. Why is that?

It does work. The value in the textbox is printed on the page.
BUT:
\\ do not mean anything in Javascript. Comments begin with //. This is most likely the reason why you are not seeing the value being written
document.write replaces whatever is in the HTML page with its argument. (If it is called after the document is loaded). So unless you are trying to learn Javascript this is not a very good idea.
Actually it is not a very good idea to use it even when learning Javascript, unless you are trying to learn how document.write works.
There are flexible (and better) ways to manipulate the content of a page, starting from the humble getElementById to complex DOM manipulation

It is not a good idea to use document.write() after the page has been loaded/parsed. At that point, it will overwrite the page HTML with new content. document.write() is generally used while the page is being loaded to insert content at a particular point into the page as it's being loaded.
If you want to put the value into some item on the page, then you need to use appropriate DOM methods for that, putting the value into an input field, setting the innerHTML on a div, etc...
You can read about document.write here: https://developer.mozilla.org/en/document.write.
Here's an example of fetching the value from the field and putting it in another object on the page without using document.write(): http://jsfiddle.net/jfriend00/dU8Sr/.
HTML:
<form name="Serb" action="" method="get">
<input name="Name" type="text" size="15" maxlength="20" />
<input name="Join" type="button" value="Join" onClick="serb(this.form)" />
</form>
<br>
<br>Output: <span id="output"></span>
Javascript:
function serb(form) {
var x = document.Serb.Name.value;
document.getElementById("output").innerHTML = x;
}