How to print the user input? Everytime I click on the submit button, it just redirects me to a blank page. Here's the code:
<html>
<head>
<title>NameTest</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name:<script>document.write(document.getElementById('fname').value+" "+document.getElementById('mname').value+""+document.getElementById('lname').value);</script>
<input type="submit" value="Submit">
</form>
</body>
It's not entirely clear what you want, but try this:
Jsfiddle Demo
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name: <span id="result"></span>
<br>
<input type="button" value="Submit" onClick="pr()">
</form>
<script>
function pr() {
document.getElementById("result").innerHTML = document.getElementById('fname').value + " " + document.getElementById('mname').value + " " + document.getElementById('lname').value;
}
</script>
You should not use submit, if you want to stay on the current page. Client side printing can be easily achieved by using a button with a click listener.
window.writeValues = function(form) {
var fname = form.fname.value;
var mname = form.mname.value;
var lname = form.lname.value;
document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id="mname"><br/>
Name: <span id="fullname"></span><br />
<input type="button" value="Submit" onClick="writeValues(form)">
</form>
<html>
<head>
<title>NameTest</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="PayslipServlet" method="get">
<div ng-app="">
Last name: <input type="text" name="lname" ng-model="lname" id="lname"><br/>
First name: <input type="text" name="fname" ng-model="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" ng-model="mname" id ="mname"><br/>
full Name: {{lname}} {{fname}} {{mname}}<br/>
<input type="submit" value="Submit">
</div>
</form>
</body>
print easily with angularjs instead of javascript
First of all, you should't be using a form if you just want to print your user input, as per my understanding of your question I can suggest some code like these, BTW there some really good Javascript libraries that do what you want to do it without any troubles, like knockout.
Here it goes, Click on run Code Snippet, it works here
var el = document.getElementById("showName");
el.addEventListener("click", formatName, false);
function formatName () {
var name = document.getElementById('fname').value;
var mname = document.getElementById('mname').value;
var lastname = document.getElementById('lname').value;
document.getElementById('fullName').innerHTML = name + " " + mname + " " + lastname;
}
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id ="mname"><br/>
Name: <span id="fullName"></span>
<input id="showName" type="button" value="Submit" />
</form>
window.writeValues = function(form) {
var fname = form.fname.value;
var mname = form.mname.value;
var lname = form.lname.value;
document.getElementById('fullname').innerHTML = fname + ' ' + mname + ' ' + lname;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<form action="PayslipServlet" method="get">
Last name: <input type="text" name="lname" id="lname"><br/>
First name: <input type="text" name="fname" id="fname"><br/>
Middle name: <input type="text" name="mname" id="mname"><br/>
Name: <span id="fullname"></span><br />
<input type="button" value="Submit" onClick="writeValues(form)">
</form>
Related
Hey guys i put an alert box in to see if the code worked but when I ran it the code did not work. I tried debugging it and I think the issue is on document.getelementbyid (ofbat) but not sure exactly what is wrong there.
Also once the code works how do i add inner html to it so the answer comes out on the same screen? I emphasized the part where i thought the code was not working.
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
*var atBat = parseFloat(document.getElementById)('ofbat').value);*
var ofSingles = parseFloat(document.getElementById)('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById)('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById)('oftriples').value);
var ofHome = parseFloat(document.getElementById)('ofhome').value);
var totalBases = ofSingles *1 + ofDoubles * 2 + ofTriples * 3 + ofHome *4;
var slugPercent =totalBases/ atBat;
alert batterName + slugPercent;
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
You have syntax errors:
document.getElementById)('ofbat'): ) after Id. Same with all next lines.
alert is also a function so it should be called as alert(argument)
I think I found all syntax errors, if not let me know:
<html !doctype>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Lab7 Baseball Form</title>
<script type="text/javascript">
function calculation() {
var batterName = parseFloat(document.getElementById('battername').value);
var atBat = parseFloat(document.getElementById('ofbat').value);
var ofSingles = parseFloat(document.getElementById('ofsingles').value);
var ofDoubles = parseFloat(document.getElementById('ofdoubles').value);
var ofTriples = parseFloat(document.getElementById('oftriples').value);
var ofHome = parseFloat(document.getElementById('ofhome').value);
var totalBases = ofSingles * 1 + ofDoubles * 2 + ofTriples * 3 + ofHome * 4;
var slugPercent = totalBases / atBat;
alert(batterName + slugPercent);
}
</script>
</head>
<body>
<h1>Slugging Percentage Calculator</h1>
<form>
<p>Batter's Name:</p>
<input type="text" id="battername" /><br />
<p>Enter number of At Bats:</p>
<input type="text" id="ofbat" /><br />
<p>Enter number of Singles:</p>
<input type="text" id="ofsingles" /><br />
<p>Enter number of Doubles:</p>
<input type="text" id="ofdoubles" /><br />
<p>Enter number of Triples:</p>
<input type="text" id="oftriples" /><br />
<p>Enter number of Home Runs:</p>
<input type="text" id="ofhome" /><br />
<input type="button" value="Whats his slugging percentage?" onclick="calculation()">
</form>
</body>
</html>
UPD: edited code some number of times because found one more syntax error. If you haven't seen this line, please check the code again.
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
For school I need to make a currency converter.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
function myFunction() {
var bedrag = document.getElementById("bedrag");
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
My problem is when I do a number like 8, it says "null", I'm learning JavaScript, so can anyone help me?
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Change to this line and try again:
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
You can use console.log(bedrag) to see if the value is captured properly.
Replace the name attribute on the input with id as in
<input type="text" name="bedrag" placeholder="Vul bedrag in" />
Should become
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
I am not sure but from the question and code it seems you are only trying to display the value entered. In that case try the code below:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
<script>
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) {
//log the value to console and verify the value
console.log("<br>test" + bedrag);
}
else {
console.log("<br>test" + bedrag);
}
}
</script>
</body>
</html>
use this line in the script,
var bedrag = document.getElementById("bedrag").value;
instead of,
var bedrag = document.getElementById("bedrag");
and add id="bedrag" in input, because you are accessing an element by id
function myFunction() {
var bedrag = document.getElementById("bedrag").value;
var x = document.getElementById("list").selectedIndex;
if (x == 0) { return (document.write("<br>test" + bedrag)); }
else { return (document.write("<br>test" + bedrag)); }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>Lab 10</title>
<script src="lab10script.js"></script>
</head>
<body>
<form name="form">
<input type="text" name="bedrag" id="bedrag" placeholder="Vul bedrag in" />
<select id="list">
<option>dollar/euro</option>
<option>euro/dollar</option>
<option>ruble/euro</option>
<option>euro/ruble</option>
</select>
<button type="button" onclick="myFunction()">Exchange</button>
</form>
</body>
</html>
I think I'm close to getting this right but I can't figure out how to change the colour of my submit button when the user hovers over it, I'm very new too javascript so any help would be greatly appreciated
here is my code:
<html>
<head>
<title>JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function getName(){
var name;
name = window.prompt("Enter your name", "");
greeting = "User Information for " + name;
var txt= document.getElementById('txtWelcome');
txt.innerHTML=greeting;
}
function over() {
document.getElementById("Submit").style.background = 'Blue';
}
function out() {
document.getElementById("Submit").style.background = 'Yellow';
}
</script>
</head>
<body onload="getName()">
<form class="basic_form">
<h1 id="txtWelcome"></h1>
<p>Please input your login details</p>
<fieldset>
<label class="form_labels">Username:</label>
<input class="form_fields" type="text" name="username"><br>
<label class="form_labels">E-Mail:</label>
<input class="form_fields" type="email" name="email"><br>
<label class="form_labels">Password:</label>
<input class="form_fields" type="password" name="password">
<input class="form_buttons" type="Submit" value="Submit"><br>
</fieldset>
</form>
</body>
Here's the javascript solution:
var submitButton = document.getElementById('submit');
submitButton.addEventListener('mouseover', function() {
this.style.backgroundColor='blue';
});
submitButton.addEventListener('mouseout', function() {
this.style.backgroundColor='yellow';
});
https://jsfiddle.net/hsxdkkp6/
But why not just use css?
input[type=submit]:hover {
background-color: red;
}
https://jsfiddle.net/jkkj8dvt/
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var form = document.forms.myform,
qty = form.qty,
cost = form.cost,
output = form.textbox;
window.calculate = function () {
var q = parseInt(qty.value, 10) || 0,
c = parseFloat(cost.value) || 0;
output.value = (q * c).toFixed(2);
};
</script>
</head>
<body>
<form action="caltest.php" method="post" name="myform" onkeyup="calculate()">
<label>Num of PAX :</label>
<input type="text" name="qty" />
<input type="hidden" name="cost" value="700" />
<br/>
<lable>Total Price: </lable>
<input type="text" name="textbox" />
</form>
</body>
</html>
I am doing a simple calculation.Not getting any output.
When var form = document.forms.myform is executed, there is no <form name="myform" ...yet.
The simplest (though maybe not the most sophisticated) solution is to move the <script> block from <head> to after the form code.
Try this one is working
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="caltest.php" method="post" name="myform" onkeyup="calculate()" >
<label>Num of PAX :</label>
<input type="text" name="qty" />
<input type="hidden" name="cost" value="700" />
<br/>
<lable>Total Price: </lable>
<input type="text" name="textbox" />
</form>
<script>
var form = document.forms.myform,
qty = form.qty,
cost = form.cost,
output = form.textbox;
window.calculate = function () {
var q = parseInt(qty.value, 10) || 0,
c = parseFloat(cost.value) || 0;
output.value = (q * c).toFixed(2);
};
</script>
</body>
</html>