Develop Reference

put a value of localstorage into value input form

Hi i'm a beginner of javascript and html5. I want put a value of localStorage into value input form.
I have an HTML page:
<form class="row g-3" method="GET">
<div class="col-md-4">
<label for="s1" class="form-label">Nome</label>
<input type="email" class="form-control" id="s1" value=" " >
</div>
</form>
<script src="script.js">
var savedValue = window.localStorage.getItem("email") || "";
document.getElementById("s1").value = savedValue;
</script>
How can I put the value from localStorage into the input?

Your script tag names a src, even though it seems that the script you want to run is already there in the body. Because of the src, it is being ignored. Just remove the src attribute. Also, I would recommend adding a console.log for debugging.
<script>
var savedValue = window.localStorage.getItem("email") || "";
console.log('setting value for s1:', savedValue);
document.getElementById("s1").value = savedValue;
</script>

Google Sheets script UserForm - Send Data from Form to Spreadsheet- userform fields not handled correctly

I am new to google scripting. I have followed some tutorials online and created a user form which has 4 input:
company name, qty, agent and comment. The only goal here is to copy data from user form to spread sheet. I have written the following html and functions but data does not get populated after button add is clicked.
I know the addRowData function is working when correct input gets to it. So either I am not population rowData correctly or EventListener does not work correctly. Can anybody please help me find where the issue is?
function addNewRow(rowData) {
const currentDate=new Date();
const ss=SpreadsheetApp.getActiveSpreadsheet();
const ws=ss.getSheetByName("Results");
ws.appendRow([currentDate, rowData.companyName,rowData.qty,rowData.agentName,rowData.commentText]);
return true;
}
<div class="container">
<div>
<div class="form-group">
<label for="company-name">Company</label>
<input type="text" class="form-control" id="company-name">
</div>
<div class="form-group">
<label for="number-boxes">Number of Boxes</label>
<input type="Text" class="form-control" id="number-boxes">
</div>
<div class="form-group">
<label for="agent-name">Agent</label>
<input type="text" class="form-control" id="agent-name">
</div>
<div class="form-group">
<label for="comment-text">Comment</label>
<input type="Text" class="form-control" id="comment-text">
</div>
<button class="btn btn-primary" id="mainButton">Add</button>
</div>
</div>
<script>
function afterButtonClicked(){
var companyName = getElementById("company-name");
var qty = getElementById("number-boxes");
var agentName = getElementById("agent-name");
var commentText = getElementById("comment-text");
var rowData={companyName: companyName.value,qty: qty.value,agentName: agentName.value,commentText: commentText.value};
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}
function afterSubmit(e){
var qty = getElementById("number-boxes");
qty.value="";
}
document.getElementById("mainButton").addEventListener("click",afterButtonClicked());
</script>
</body>

I would like to propose the following modification.
Modification points:
At document.getElementById("mainButton").addEventListener("click",afterButtonClicked());, the function is run by () of afterButtonClicked() at the load of HTML. In this case, please remove ().
About getElementById("###"), in this case, please add document like document.getElementById("###").
When above points are reflected to your script, it becomes as follows. I think that your Google Apps Script works.
Modified script:
In this case, please modify your Javascript as follows.
<script>
function afterButtonClicked(){
var companyName = document.getElementById("company-name");
var qty = document.getElementById("number-boxes");
var agentName = document.getElementById("agent-name");
var commentText = document.getElementById("comment-text");
var rowData={companyName: companyName.value,qty: qty.value,agentName: agentName.value,commentText: commentText.value};
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}
function afterSubmit(e){
var qty = document.getElementById("number-boxes");
qty.value="";
}
document.getElementById("mainButton").addEventListener("click",afterButtonClicked);
</script>
References:
EventTarget.addEventListener()
Document.getElementById()

html button redirect to page specified in <input>

I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?

You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>

If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>

Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>

You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"

Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.

Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>

You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.

You need to find the element's value and then set it as HTML.
$("#text").html(test.value);

I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>

I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>

Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks

here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>

Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}

See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>

If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});

use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}