We Keep Coding

Unable to pass values to a function on click of a button

I am a beginner in javascript and was just trying to implement a simple form. However, I am unable to submit it since the values that are entered in the textbox are not getting passed further to the function that I call on clicking the submit button.
I have seen similar questions and even followed the answers still for some reason I only get undefined instead of the data passed.
Below is the code:
Html:
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
onclick="submit("name","surname","user","mail","word")"
/>
</form>
<script>
var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit(fname,sname,uname,email,password) {
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
</script>

The function called at the onclick attribute for the input does not exist and it will never work.
What you did was almost correct. You added the click event for the submit button that calls a function. That function will always (i think so) have one parameter (Event type) and not those added by you.
In order to retrieve the values for the inputs, you need to retrieve them in that function.
Check the snippet below.
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit() {
confirm("Are you sure you want to submit the form?");
if(confirm) {
var fname = document.getElementById('txtfirstName').value;
var sname = document.getElementById('txtsecondName').value;
var uname = document.getElementById('txtuserName').value;
var email = document.getElementById('txtemail').value;
var password = document.getElementById('txtpassword').value;
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
/>
</form>

Here I fixed that:
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
/>
</form>
<script>
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function () {
var fname = document.getElementById("txtfirstname").value;
var sname = document.getElementById("txtsecondname").value;
var uname = document.getElementById("txtusername").value;
var email = document.getElementById("txtemail").value;
var password = document.getElementById("password").value;
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
</script>

Here is a fiddle working:
https://jsfiddle.net/Lk9t0bxj/
<form>
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:1
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
onclick="submit()"
/>
</form>
Javascript:
var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit() {
confirm("Are you sure you want to submit the form?");
if(confirm) {
fname = document.getElementById('txtfirstName').value;
sname = document.getElementById('txtsecondName').value;
uname = document.getElementById('txtuserName').value;
email = document.getElementById('txtemail').value;
password = document.getElementById('txtpassword').value;
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
There were some errors:
Confusion with quotation marks:
onclick="submit("name","surname","user","mail","word")"
There is no need to pass the name fields:
onclick="submit()"
You should get the field values and put it in the variables defined:
fname = document.getElementById('txtfirstName').value;

Another way of doing this is by adding onsubmit callback to your <form> element, and changing your <input> type to submit. You don't have to add in individual ids for all of your input, instead you can use event.target[INPUT_NAME] to get your input element, and get the value of that element with INPUT.value.
Working sample code :
const handleOnSubmit = event => {
event.preventDefault();
const { fname, sname, uname, email, password } = event.target;
confirm("Are you sure you want to submit the form?");
if (confirm) {
alert(
"Below is the data entered by you:" +
"\n" +
fname.value +
"\n" +
sname.value +
"\n" +
uname.value +
"\n" +
email.value +
"\n" +
password.value
);
}
};
<form onsubmit="handleOnSubmit(event)">
First Name:
<input type="text" name="fname" />
Second Name:
<input type="text" name="sname" />
User Name:
<input type="text" name="uname" />
Email:
<input type="text" name="email" />
Password:
<input type="password" name="password" />
<input type="submit" />
</form>

Other way to do this is use add.event.listener and template literals.
var submitButton = document.getElementById("btnsubmit");
submitButton.addEventListener("click", function(e){
e.preventDefault()
var fname = document.getElementById("txtfirstName").value;
var sname = document.getElementById("txtsecondName").value;
var uname = document.getElementById("txtuserName").value;
var email = document.getElementById("txtemail").value;
var password = document.getElementById("txtpassword").value;
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert(`Below is the data entered by you: \n ${fname} \n ${sname} \n ${uname} \n ${email} \n ${password}`)
}
})

How to call javascript function multiple times?

I am using an API from OpenWeatherMap on my website to show weather condition of just some specific places only, altogether in one page.
Here's the code:
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<body>
<input type="hidden" name="name" value="dehradun" id="cityName">
<button onclick="getWeather()">Get weather of Dehradun</button>
<div class="weatherResponse"></div>
<br><br>
<input type="hidden" name="name" value="pune" id="cityName">
<button onclick="getWeather()">Get weather of Pune</button> '
<div class="weatherResponse"></div>
<br><br>
<script>
function getWeather() {
$('.weatherResponse').html('');
var cityName = $('#cityName').val();
var apiCall = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=<apikey>';
$.getJSON(apiCall, weatherCallback);
function weatherCallback(weatherData) {
var cityName = weatherData.name;;
var country = weatherData.sys.country;
var description = weatherData.weather[0].description;
var temp = weatherData.main.temp;
$('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
}
}
</script>
</body>
Suppose if i want to show weather condition of two places using the same Javascript function then its showing the same result for both the places(Of place (Dehradun) mentioned first in code).
Help me solve this problem.

You can Pass both your city name and div (display results) as function parameter
function getWeather(cityName, className)
{
$('.'+className+'').html('');
var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
$.getJSON(apiCall,weatherCallback);
function weatherCallback(weatherData)
{
var cityName= weatherData.name;;
var country= weatherData.sys.country;
var description= weatherData.weather[0].description;
var temp= weatherData.main.temp;
$('.'+className+'').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
}
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<body>
<button onclick="getWeather('dehradun','wr1')">Get weather of Dehradun</button>
<br><br>
<div class="wr1"></div>
<br><br>
<button onclick="getWeather('pune','wr2')">Get weather of Pune</button>
<br><br>
<div class="wr2"></div>
<br>
</body>

I have roughly added the working code below, when you click on a button it will show the whether report of that city in both the text, Try clicking on both the button and take a look:
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<body>
<input type="hidden" name="name" value="dehradun" id="cityName2">
<button onclick="getWeather('dehradun')">Get weather of Dehradun</button>
<div class="weatherResponse"></div>
<br><br>
<input type="hidden" name="name" value="pune" id="cityName1">
<button onclick="getWeather('pune')">Get weather of Pune</button>
<br><br>
<div class="weatherResponse"></div>
<script>
function getWeather(cityName){
$('.weatherResponse').html('');
var apiCall= 'http://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&mode=json&units=metric&appid=d3d913fca612366a61837ea39a622480';
$.getJSON(apiCall,weatherCallback);
function weatherCallback(weatherData){
var cityName= weatherData.name;;
var country= weatherData.sys.country;
var description= weatherData.weather[0].description;
var temp= weatherData.main.temp;
$('.weatherResponse').append("The Weather in " + cityName + " " + country + " is currently " + description + " with temperature: " + temp);
}
}
</script>
</body>

How to copy and combine value of multiple input fields into one single field automatically?

I want to copy & combine values of lname, fname & mname into fullname automatically when I click the fullname field.
Here's the HTML:
<input type="text" class="form-control" id="lname">
<input type="text" class="form-control" id="fname">
<input type="text" class="form-control" id="mname">
<input type="text" class="form-control" id="fullname" onclick="namefunc()">
Javascript:
<script type="text/javascript">
$(document).ready(function () {
function namefunc() {
var n1 = $('#fname');
var n2 = $('#mname');
var n3 = $('#lname');
var fn = $('#fullname');
fn.val(n1.val() + " " + n2.val() + " " + n3.val());
}
});
</script>
Its not working. Please help!

As #Nicolay said in the comment, my function doesn't need to be in the doc ready handler, it can go directly inside the script tags. I tried this:
<script type="text/javascript">
function namefunc() {
var n1 = $('#fname');
var n2 = $('#mname');
var n3 = $('#lname');
var fn = $('#fullname');
fn.val(n1.val() + " " + n2.val() + " " + n3.val());
};
</script>
And it worked! :)

Storing </input> data to host

I'm just working with HTML and JavaScript and I have a question regarding working with </input> elements and this is one of my inputs:
<input size="4" class="PanInput" id="W_PAN4" name="W_PAN4" maxlength="4" autocomplete="off" onkeypress="return numericOnKeypress(event)" onkeyup="nextTabs(this, false, event)" value="" tabindex="1" dir="ltr" onpaste="doNotPaste()" onfocus="getName(this)" type="text" width="200">
And I made an alert() after a submit button:
<form method="post" name="receiptForm" action="https://google.com" accept-charset="UTF-8" onclick="othername">
<script>
function othername() {
var input1 = document.getElementById("W_PAN4").value;
var input2 = document.getElementById("W_PAN3").value;
var input3 = document.getElementById("W_PAN2").value;
var input4 = document.getElementById("W_PAN1").value;
var userCardID = input1 + " " + input2 + " " + input3 + " " + input4;
var input_pass = document.getElementById("W_PIN").value;
var input_CVV2 = document.getElementById("W_CVV2").value;
var input_expire_month = document.getElementById("W_EXPIRE1").value;
var input_expire_year = document.getElementById("W_EXPIRE2").value;
var input_all = userCardID + " " + "2nd_Password = " + input_pass + " " + "CVV2 = " + input_CVV2 + " " + "ExpireDateYear = " + input_expire_year + " " + "ExpireDateMonth = " + input_expire_month;
alert(input_all);
}
I want to have a function similar to this:
<script type="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("Location_Here", True);
s.writeline(document.passForm.input1.value);
s.writeline(document.passForm.input2.value);
s.writeline(document.passForm.input3.value);
s.Close();
}
</script>
I mean I want to store those inputs data as a .txt file on localhost or even in an online host.
What is the easiest way to save these data? Format is not important, I can deal with anything E-mail, File and etc. I think it is a server-side work. Any code will be appreciated.

Loading data on the same form page after submitting

I have a tiny problem with this college assignment. When the user inputs their data, an account id number is created. I've worked on that and it works like it should. But here's the problem: after the user clicks the submit button and the account id number is created, what they entered needs to be displayed below it. The assignment says I need to create a function called displayNewAccount and put in into one of the other functions. I put in inside the createEventListeners function. The text needs to be displayed in a custom ID (account) on the HTML page. The data entered into the first name input (fnameinput) should display after "First Name" (fname) and the last name input (lnameinput) should display after "Last Name" (lname) and so on. If the displayNewAccount function has to be moved inside another function then that is totally fine. I've looked online and found several examples, but I couldn't get them to work for me. What am I doing wrong? Thanks for the help.
HTML
<article>
<h2>New Account Information</h2>
<form>
<fieldset id="deliveryinfo">
<label>First Name</label><input type="text" id="fnameinput" name="fname">
<label>Last Name</label><input type="text" id="lnameinput" name="lname">
<label>Street Address</label><input type="text" id="addrinput" name="address">
<label>City</label><input type="text" id="cityinput" name="city">
<label>State</label><input type="text" id="stateinput" name="state">
<label>Zip</label><input type="text" id="zipinput" name="zip">
<label>Account ID</label><input type="text" id="accountidbox" name="accountid">
<input type="button" id="submitBtn" value="Create Account">
</fieldset>
<!-- New section -->
<fieldset>
<div id="account">
<!-- Data is displayed in here. -->
</div>
</fieldset>
</form>
</article>
JavaScript
var newAccountObject = {};
var newAccountSubmission;
function createID() {
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
var account = document.getElementById("accountidbox");
var fields = document.getElementsByTagName("input");
var acctid;
var firstInit;
var lastInit;
if (fname !== "" || lname !== "" || zip !== "") {
firstInit = fname.value.charAt(0).toUpperCase();
lastInit = lname.value.charAt(0).toUpperCase();
acctid = firstInit + lastInit + zip.value;
account.value = acctid;
newAccountObject = {};
for(var i = 0; i < fields.length - 1; i++) {
newAccountObject[fields[i].name] = fields[1].value;
}
}
}
function createString() {
newAccountSubmission = JSON.stringify(newAccountObject);
}
function createEventListeners() {
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
if (fname.addEventListener) {
fname.addEventListener("change", createID, false);
lname.addEventListener("change", createID, false);
zip.addEventListener("change", createID, false);
}
else if (fname.attachEvent) {
fname.attachEvent("onchange", createID);
lname.attachEvent("onchange", createID);
zip.attachEvent("onchange", createID);
}
if (button.addEventListener) {
button.addEventListener("click", createString, false);
}
else if (button.attachEvent) {
button.attachEvent("onclick", createString);
}
// Displays an account summary section when the "Create Account" button is clicked.
function displayNewAccount() {
document.getElementById("account").innerHTML = "First Name: " + fname + "<br>" + "Last Name: " + lname + "<br>" + "Address: " + addrinput + "<br>" + "City: " + cityinput + "<br>" + "State: " + stateinput + "<br>" + "Zip: " + zipinput + "<br>" + "Account ID: " + accountidbox;
}
if (window.addEventListener) {
window.addEventListener("click", displayNewAccount, false);
}
else if (window.attachEvent) {
window.attachEvent("onclick", displayNewAccount);
}
}
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}