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 disable autofocus in WooCommerce forms?

I have added [woocommerce_order_tracking] shortcode into my website home page and since then every time I refresh or first visit in it, the whole page scrolls down to the first input of the form generated with [woocommerce_order_tracking].
I have researched online about and found it caused by the "autofocus" attribute. WordPress add it automatically, and I don't know how to disable it or make the page load on top.
I tried to plant some JS and Jquery codes inside the head tag and even at the body.. with no much success.
can anyone help me solve this issue? I like the form and how it look like, I only don't want that the page will scroll to it automatically...
website address: http://blackbmb.com/store
<input class="input-text" type="text" name="orderid" id="orderid" placeholder="Found in your order confirmation email." required="" autofocus="">
Thank you!
Yahav

I had to add this to my functions.php, to stop the same thing happening to the firstname field. Just amend with whatever fields apply to you:
//Disable autofocus and thus autoscroll
function disable_autofocus_firstname($fields) {
$fields['billing']['billing_first_name']['autofocus'] = false;
return $fields;
}
add_filter('woocommerce_checkout_fields','disable_autofocus_firstname');
Let me know if it works :)

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

set focus() on textbox on form onload

I am trying to set focus on a textbox in a form that's a part of jQuery tree. Here is my code
$(document).ready(function() {
$("#search").focus();
});
HTML:
<div>
<form action="search" method="post" name="frmSearch>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="submit" name="button" value="Search" />
</form>
</div>
When I click on Search tab in the tree, it won't set focus on the textbox. Can someone let me know what's wrong in the code?

You're focusing the textbox on page load, however as soon as you click anywhere else on the page (such as a tab), the focus will be removed from the textbox and given to whatever you just clicked.
Instead of focusing on page load, attach a click listener to your tab so that when it is clicked the search textbox gets focus. Since I haven't seen all your markup, I'm using #mySearchTab as a placeholder for the ID of your search tab:
$(document).ready(function() {
$("#mySearchTab").on('click', function() {
$('#search').focus();
});
});
Also, don't forget to close your functions with a ).
I'm not sure what your tree looks like but here's a working demo using jQuery tabs.

try following:
$(function(){
$("input:first:text").focus();
});
working fiddle here: http://jsfiddle.net/8CTqN/2/
tested on chrome

I made some modification in your js codes
http://jsfiddle.net/8CTqN/5
$(document).ready(function(){
$(function(){
$("#search2").focus();
});
});

How to select the content inside a textbox when loading the page?

I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!

3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.

You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.

you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.