Develop Reference

How to call Javascript function and pass elements with HTML button?

I am trying to implement a Javascript function within an HTML button. Below is the Javascript and HTML that I am using. I want the submit button to call the function with the file_name and file_data being passed into the function, but I am not exactly sure how to do this. I know there is an onClick I can use, but I don't know how to pass the information from the file input into the function.
<form method="POST">
<div align="center">
<input type="file" id="myfile" name="myfile">
</div>
<br />
<div align="center">
<button type="submit" class="btn btn-primary">Add File</button>
</div>
</form>
function uploadFile(file_name, file_data) {
fetch("/upload-file", {
method: "POST",
body: JSON.stringify({ file_name: file_name, file_data: file_data }),
}).then((_res) => {
window.location.href = "/";
});
}

Creating a handleSubmit function which gets called from the forms onSubmit='handleSubmit()'.
The form information is acquired via: Object.fromEntries((new FormData(event.target)).entries());. which is of the type object.
function handleSubmit() {
let formValues = Object.fromEntries((new FormData(event.target)).entries());
/* call any function you want! */
}
<form action="/action_page.php" onsubmit="handleSubmit()">
Enter name: <input type="text" name="fname"/>
<input type="submit" value="Submit"/>
</form>
-------- EDITED I. Following the recommendation by: isherwood, your result should look something like this:
function logSubmit(event) {
let fieldValue = form.fname.value; //gets field value
event.preventDefault();
}
const form = document.getElementById('form');
form.addEventListener('submit', logSubmit);
<form id="form">
<label>Test field: <input type="text" name="fname"></label>
<br/><br/>
<button type="submit">Submit form</button>
</form>

In HTML there is actually an Event-Listener called "onclick".
Try using it on your submit button like this:
<button onclick="uploadFile(file_name, file_data)">Add File</button>

How use concat in javascript

I want get value1, value2, value3... but i have trouble.
why this error?
can't access property "concat", texto1 is undefined
please help me!!
I have the html code:
<div id=items>
<input type="text" name="cadena1" id="idcadena1" value="valor" />
<input .....
</div>
<div>
<button name="button" type="button" id="concatenate">concatenar</button>
</div
Mi javascript code is the following:
$('#concatenate').click(function () {
var n = $('#items]').length;
var texto1 = $('input:first', '#items:first').value;
var texto2=texto1.concat(n);
});

In jQuery, it's .val() to get/set the value.
var texto1 = $('input:first', '#items:first').val();

Modifying an input value before submitting it with Javascript or HTML

So essentially, I have an input and I want to modify the value before the user submits it. All I want to do is add a string to the end of this inputs value. I thought it would be something like:
<form action="myURL" onsubmit="myFunction" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
myFunction()
{
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
</script>
However, when the form is submitted the appended string is not sent and only the original string makes it. Does anyone know why this is happening?

You can submit the form using JavaScript:
Please Note: The function name should be preceded by the function keyword.
document.getElementById('myForm').onsubmit = myFunction;
function myFunction(){
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
<form id="myForm" action="myURL" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>

You can do the changes in onclick event of the submit button instead of onsubmit.
<form action="myURL" id="myForm" method="POST">
<input id="myID" value="someValue" />
<button type="submit" onclick="myFunction(event)">Press Me!</button>
</form>
<script>
myFunction(event)
{
event.preventDefault();
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
document.getElementById("myForm").submit();
}
</script>

You need to invoke the function in the submit event handler with brackets i.e. onsubmit="functionToCall()" instead of onsubmit="functionToCall".
You need the function keyword in front of the name of the function: you would write function functionName(){} instead of just functionName(){}.
You should set the variable x to equal the input element, not the input element's value so you will not need to query the DOM again.
<form action="myURL" onsubmit="myFunction()" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
function myFunction()
{
event.preventDefault();//for demonstrative purposes
var x = document.getElementById("myID");
x.value += "myString";
}
</script>

trigger alert on button click with javascript

I have two textfields with different IDs as shown
<textarea id="textfield">Hello World</textarea>
This will be updated with the content of the first textarea
<input id="messageID">
This is my script
<script type=text/javascript>
function() {
var value = document.getElementById("textfield").value;
document.getElementById('#messageID').val(value);
alert(value);
}
</script>
This is the onclick button and nothing happens when I click it
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>
Kindly assist!

Three things I'm seeing wrong:
.val(value); is a jQuery' method, not javascript... you should change it to .value = value;
to call onclick="myfunction()" you should name it: var myfunction = function(){
The document.getElementById() method doesn't need sharp # before the name.
Hope it helps.

Try something like this:
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById('messageID').value=value;
alert(value);
}
<input type="button" value="Alert" onclick="myfunction()" type="button" class="btn btn-danger" id="button"/>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">

The most important catch is whenever you declare function on button click you should define that function inside javascript.
<script type=text/javascript>
function myfunction() {
var value = document.getElementById("textfield").value;
document.getElementById("messageID").value = value;
alert(value);
}
</script>
<textarea id="textfield">Hello World</textarea>
<input id="messageID">
<button onclick="myfunction()" type="button" class="btn btn-danger" id="button">Alert</button>

Here you go a working fiddle
https://jsfiddle.net/blazeeboy/fNPvf/
Its inner Html you are trying to get
<textarea id="textfield">Hello World</textarea>
<input id="messageID"/>
<button type="button" class="btn btn-danger" id="button" onclick="myfunction()">Alert</button>
function myfunction(){
alert(1);
var v = document.getElementById("textfield").innerHTML ;
document.getElementById('messageID').innerHTML = v;
alert(v);
}

HTML form submits values and stores all of them in a new array(javascript)

I am trying to make a form with one text input and a submit button. What I want the script to do is take the text after I click submit and store it as a value. After that, if I type something else (without refreshing the page) and click submit store the input as another value. This process can be done one hunded times so I will have 100 different values. What I also want to do with this values is put them in a new array.So:
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];.
The code I have managed to write untill now is this but it won't actually help you:
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {
}
function myFunction2() {
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
I am asking this question after trying a lot of things which didn't worked and I know that the script will work only if I use HTML local storage but I don't have the knowledge to do it even if I did a lot of research on this topic. I dont want to only store the values but I want to get them inside a new Array. I am making the question a bit more general as always in order to help as many as possible. Could you please help me? Thanks in advance.

You had several issues, the main is that you have to provide the "id" attribute for the input text named "fname".
Next you have to store the AllValues array in context visible by two declared functions (in this case, the global context).
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
var fname = document.getElementById("fname").value;
AllValues.push(fname);
}
function myFunction2() {
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
Try also the immediate function to avoid storing variables in global context. The code that I paste is not very clean of course, but working :)

For a very basic way of doing this, try the following:
HTML:
<form id="form1">Type the words here:
<input type="text" name="fname">
<br>
<input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>
JS:
var values = new Array();
$(".submit").on("click", function () {
values.push($('input[name="fname"]').val());
});
$(".show-button").on("click", function () {
$("#demo").html(values.join("<br>"));
});
Fiddle here: http://jsfiddle.net/5z4g04js/2/

My answer:
<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');
btnSubmit.onclick = function() {
var words = document.getElementById('words').value;
arrWords = words.split(' ');
console.log(arrWords);
}
btnPrint.onclick = function() {
for(var i = 0; i < arrWords.length; i++) {
demo.innerHTML += arrWords[i]+"<br>";
}
}
</script>
</body>
</html>

You could use jquery to do that:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
alert(temp_val);
all_values.push(temp_val);
}
function myFunction2() {
alert(all_values);
}
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
working demo
p.s. edited jquery answer with more changes. working demo

Using this getAllValues(name) function, you can return the values of any element with the name of 'name'.
function getAllValues(name) {
var nameMatches=document.getElementsByName(name);
var AllValues=[];
for (var i=0; i<nameMatches.length; i++) {
AllValues.push(nameMatches[i].name);
AllValues.push(nameMatches[i].value);
}
return AllValues;
}
To call this you would use getAllValues('fname').