We Keep Coding

Submit button and input validation?

I would like to change this code to work also when Enter is pressed to be more clear i got an submit form and an text field following with the submit button that has to be clicked to submit but that doesn't help me out as i need the form to recognize when enter is pressed, what would be the change to sort it out?
submitButton.onclick = function() {
index = 0;
results = [];
username = usernameInput.value;
if ( username.length > 0 ) {
window.location.href = '//' + window.location.host + window.location.pathname + '#' + username;
usernameInput.disabled = true;
submitButton.disabled = true;
getExistence();
}
Also i got an issue with input validation, what change should i made to allow the form recognize and accept special characters?
usernameInput.onchange = function() {
this.value = this.value.replace(/[^a-z0-9]+/ig, '').slice(0, 40);
var urlUsername = window.location.href.match(/\#([0-9a-z]{1,40})$/i)
I would ask from you to be more specific as i am new to javascript coding, and my knowledge it's not enough to sort it easily.

First solution is to read this.
https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
You get info why "button type="submit" is better way than adding that into JS.
I think, solution for your problem can be something like that:
<form>
<label for="age">Age:</label>
<input type="number" min="0" max="120" name="age" id="age">
<button id="child">Child</button>
<button id="adult">Adult</button>
</form>
<script>
(function() {
var age = document.getElementById('age');
age.addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
if (age.value > 20) {
document.getElementById('adult').click();
} else {
document.getElementById('child').click();
}
}
});
}());
</script>
In short, commenting your code:
submitButton.onclick = function() { ... your code
This work as you describe, onclick. You can have similar function with :
submitButton.onkeypress = function() { ... same code with checking keyCode as example above
Validation: the simplest way to create any Regex is by doing some real test. I'am personally prefer this site: https://regex101.com/
What "special" character you mean? Because nobody can help right now. More info in this particular example. You just don't need any RegEx for JS. Accept any char and do everything on backend.

Showing form input on submit

I have a form with one input field and when I press enter I would like to see this input written under the form. I would like to have as many inputs as possible, each new one to be displayed under the previous one.
I tried it like this but I failed.
<form>
<input type="text" name="" value="" id="form-input">
</form>
<ul>
<li id="form-list"></li>
</ul>
And then inside my <script> tag:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
formOutput.innerHTML = formInput.value;
formInput.onsubmit = function() {
formOutput.innerHTML = this.value;
}
When I press enter it refreshes the page, if I change onsubmit to oninput it displays what I'm writing but it is not saved.
Is it possible to display multiple inputs like this? Thanks

I'm not sure if I understood your question correctly but here is one way to listen for the 'enter' key press on an input element and create a dynamic list of input elements with the entered value.
var inputEl = document.getElementById("in");
var targetList = document.getElementById("list");
function createItem(text){
var listItem = document.createElement('li');
var input = document.createElement('input');
input.type = 'text';
input.value = text;
listItem.appendChild(input);
targetList.appendChild(listItem);
}
inputEl.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
createItem(inputEl.value);
inputEl.value = '';
e.preventDefault();
return false;
}
})
<form>
<input id="in" type="text" name="" value="">
</form>
<ul id="list">
</ul>

When I press enter it refreshes the page, if I change onsubmit to
oninput it displays what I'm writing but it is not saved.
You can use cookies to store and persist data on every refresh
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
or WebStorage/Application Storage
https://www.w3schools.com/html/html5_webstorage.asp
But I really advise that learn to use server-side scripting with a database so your data will have permanent persistence across browser sessions
https://www.w3schools.com/php/default.asp

You can make your code run with these changes in HTML and your Javascript:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
function AddElement() {
var NewValue = formInput.value;
var li = document.createElement('li');
var text = document.createTextNode(NewValue);
li.appendChild(text);
formOutput.appendChild(li);
return false;
}
<form onsubmit="return AddElement();">
<input type="text" name="" value="" id="form-input">
</form>
<ul id="form-list"></ul>

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);

HTML Form: How to remember text values of button click?

If you have a form, type some text into it, and press the Enter key, whenever revisiting that form you can double-click on the input box and see the past text submissions.
I have a site that when you press Enter OR click a button, it should take whatever is in the text box and use it for data processing.
This works totally fine when not surrounded by a form but when surrounded by a form an you press the Enter key, it does not act as an enter button push, I believe it's being overridden by the form.
My goal is to have the user be able to press the Enter key as well as click the button to submit the data, but to also remember the text values that were in the text box regardless of which way you submitted the data.
What I have:
<input type="text" id="username-field" class="form-control" placeholder="username">
<input class="btn btn-default" type="button" id="get-name" value="Get Name">
Javascript
$("#get-name").click(function() {
var name = $("#username-field").val();
// ... call other function with name ...
});
$("#get-name").keydown(function(e) {
if (e.which == 13) {
var name = $("#username-field").val();
// ... call other function with name ...
}
");
What I would like to use:
<form>
<input type="text" id="username-field" class="form-control" placeholder="username">
</form>
I tried doing e.preventDefault() when the Enter key is pressed, but this does not remember the text in the input field.
I also considered doing a small cache type thing but am unsure of how I'd go about this.
Any help would be much appreciated!
Thanks!

Doesn't use form at all. Just, why you added it, if you don't use it as intended?
You either mistyped provided code copy-paste, or have errors in yours script (the $("#get-name").val() mistake).
If you want to prevent form from submission, you should e.preventDefault()-it in submission handler, and return false from it:
$('#form-id').submit(function (e) {
e.preventDefault();
// do smth. else here
...
return false;
})
Saving/retriving data with localStorage for HTML5-supporting browsers:
$(function () {
$('form input[type=text]').doubleclick(function () {
var id = $(this).attr("id");
value = localStorage.getItem("form_xxx_" + id);
// do smth. with cached value, ie:
if (value != "")
$(this).val(value); // put in textfield
});
});
$('form').submit(function (e) {
$('form input[type=text]').each(function () {
var id = $(this).attr("id");
localStorage.setItem("form_xxx_" + id, $(this).val());
});
...
// all other work
});
Note: make sure you don't put some user's personal data in browser's local storage -_-

Why JS doesn't execute if it it's in between form tags?

<script type="text/javascript">
window.onload = init;
function init() { //wait for load and watch for click
var button = document.getElementById("searchbutton");
button.onclick = handleButtonClick;
}
function handleButtonClick(e) { //get user input and go to a new url
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
}
</script>
<form>
<input type="text" name="search" id="searchinput">
</form>
<input type="submit" value="Ara" id="searchbutton">
In this code block, it gets user input and go to a new url with user input.
if I move last line into form element it doesn't working.
But I'm using id to find elements.

you can specify the OnSubmit as explained in the below code fragment, and it will work.
<form method="GET" onsubmit="handleButtonClick(event)">
<input type="text" name="search" id="searchinput">
</form>
function handleButtonClick(e) {
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
return false;
}

I suspect that it is because your submit button is submitting the form.
Add e.preventDefault(); and return false; to your code.
function handleButtonClick(e) { //get user input and go to a new url
e.preventDefault();
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
return false;
}
This should stop the form from submitting cross browser.

Instead of
<input type="submit" value="Ara" id="searchbutton">
use this (MDN docu)
<button type="button" id="searchbutton">Ara</button>
Your button works as a form submit button, so instead of just executing your JavaScript, it also tries to submit the form, which points back to the script itself. By using <button type="button"> you define a mere button without any submitting functionality.
Besides: If you don't need the surrounding <form> element, why not drop it out of the code?