We Keep Coding

Using pure javascript to prefill a textbox with a url hash

I have a textbox on a web page. I would like to get the value of a URLs hash e.g. 12345 and place it as the value of the textbox upon loading the page (if there is a value), otherwise, I would like the textbox to remain blank.
I have tried using this code:
var hash = window.location.hash.substr(1);
function onoff(){
// pre-fill chat id textbox
if(hash){
var hash_value = window.location.hash.replace('#','');
document.getElementById("chat").value = hash_value;
} else {
document.getElementById("chat").value = '';
}
}
And in the html code(I am having trouble in calling the function).
<input type="text" id="chat" maxlength="5" required="">
If I were to change the value of the hash, would it be possible to have this fill the text box on load?

Sure thing! Just pass your function into window.onload:
var hash = window.location.hash.substr(1);
window.onload = function onoff(){
// pre-fill chat id textbox
if(hash){
var hash_value = window.location.hash.replace('#','');
document.getElementById("chat").value = hash_value;
} else {
document.getElementById("chat").value = '';
}
}
<input type="text" id="chat" maxlength="5" required="">
Hope this helps! :)

Execute your function on DOMContentLoaded. Note that this function can be limited to this:
function onoff(){
document.getElementById("chat").value = window.location.hash.substr(1);
}
document.addEventListener("DOMContentLoaded", onoff);
To also capture pure changes to the hash (in which case the page is not reloaded), also capture the corresponding hashchange event:
window.addEventListener("hashchange", onoff);

making all form elements with class "form-control" editable

I'm trying to use javascript to make all elements in a given form with the readonly attribute editable on a click of a button.
so for i've only managed to get one input element to change as I was using the getElementById but as it is ID this is unique in HTML eyes.
How do I change this so I it targets all input elements with readonly?
see my code:
HTML:
Edit
<input class="form-control" type="text" id="editable" name="" value="someValue" readonly>
<input class="form-control" type="text" id="editable" name="" value="someValue2" readonly>
JAVASCRIPT:
document.getElementById('edit').onclick = function() {
document.getElementById('editable').readOnly = false;
};

Seeing as how you're open to a jQuery solution you could use:
$('#edit').click(function (e) {
e.preventDefault();
$('.form-control').removeAttr('readonly')
})
jsFiddle example
Note that since IDs must be unique I removed them and used the class to select the elements. The preventDefault is used to stop the link from being followed.

Try this
$("#edit").click(function() {
$("input.form-control").removeAttr("readonly");
});
If you use jQuery

Here is a plain javascript solution:
document.getElementById('edit').onclick = function(event) {
event.preventDefault();
var edits = [];
edits = document.getElementsByClassName('editable');
for(var i = 0; i<edits.length; i++){
edits[i].readOnly = false;
}
};
Notice
You had id='editable', I change it into class, cause you know ID is UNIQUE.
Here is a FIDDLE

Copy a script value to Input tag

I have a page counter that I want to put into a form input value.
Here is the script:
<script id="counter">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write(localStorage.pagecount);
</script>
And this is where I want it to go:
<input id="RR_No" type="text" size="10" name="RR_No" required>
But I don't know how to copy the value.
I'm really new to javascript so if you can reply with really simple answers that would really help.
Thanks,
Chris

document.getElementById('RR_No').value = localStorage.pagecount;
document.getElementById is used to find the DOM element with id="RR_No". The .value property is used to set or retrieve the value of an input element.

Replace document.write line with:
document.getElementById('RR_No').value = localStorage.pagecount;
<input id="RR_No" type="text" size="10" name="RR_No" required>

Instead of document.write write:
document.getElementById('RR_No').value = localStorage.pagecount
Checkout This DEMO: http://jsbin.com/komofe/1/

Show placeholder instead of the default value in html form

A text field in html form have a default value,
but I would like to show the placeholder instead of the default value.
any ideas?

From what you said here it sounds like you actually want to listen for the focus and blur events and just clear the contents of the <input> with some kind of cache to restore it if nothing gets typed.
<input id="foo" type="text" value="" data-value="" />
Then in script
var foo = document.getElementById('foo');
foo.addEventListener('focus', function () {
this.setAttribute('data-value', this.value);
this.value = '';
});
foo.addEventListener('blur', function () {
if (this.value === '')
this.value = this.getAttribute('data-value');
});
DEMO

Provided you are only concerned with browsers that support HTML5, the following is an option:
<input type="text" name="myText" placeholder="My Placeholder">

<input type="text" name="foo" placeholder="Foo Name"/>
<input type="hidden" name="foo" value="foo"/>

On one hand, it is doable; on the other hand, I'm not sure why you should.
$('input[type="text"]').each(function (i, o) {
var inputBox = $(o),
swapInValue = function () {
inputBox.val(inputBox.data('val'));
},
swapOutValue = function () {
inputBox.data('val', inputBox.val()).val('');
};
inputBox.blur(swapOutValue).focus(swapInValue);
});

Restore textfield's default value when user clicks the reset button JavaScript

I'm trying to get the textfields to return to their default value when the user clicks the Reset button.
All it does now when the user clicks the Reset button is replacing the user's text with ''.
How can I do it by using pure JavaScript (no jQuery)?
HTML:
<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>
JAVASCRIPT:
app.onactivated = function (args) {
var aButton = document.getElementById("aButton");
aButton.addEventListener("click", buttonClickHandler, false);
var rButton = document.getElementById("rButton");
rButton.addEventListener("click", buttonResetHandler, false);
};
...
function buttonResetHandler(evetInfo) {
document.getElementById("first").innerText = '';
document.getElementById("second").innerText = '';
}

innerText is an invalid property that is implemented in IE browsers and is used for setting/getting text content of non-form elements, if the values should be set as default, you can use defaultValue property:
var a = document.getElementById("first"),
b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;
If you want to reset all the form elements, you can use .reset() method of DOM HTMLFormElement object:
document.forms["myForm"].reset();

location.reload(); // reloads the page
history.go(0); // deletes the history
But if you need to preserve some values inside of the page then reassign the values in the function again. To reassign, write the variable (declare in let to change later) again in the function and change the textContent again.

Replace,
document.getElementById("first").innerText
With,
document.getElementById("first").value
Example:
<input id="txtBox" type="text" value="lama">
<input type="button" value="reset lama" onclick='document.getElementById("txtBox").value="lama2";'>

create an init function that sets the default values for each input, then you can call that:
function initializeInputs() {
document.getElementById("first").value = '';
document.getElementById("second").value= '';
}
function buttonResetHandler(e) {
initializeInputs();
}