html form to javascript and back to html - javascript

Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>

Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};

This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.

Related

How do I make a calc with logs information under?

I have build calc and I wanted to add a logs for calculator but my script is not working. Someone see
where is mistake? I am learning for a few days and decided to make a project but after many hours of looking at code, browsing everything in internet I decided to ask you. I know there are probably many easier projects for a beginner, but I don't want to abandon a project before finishing.
Here is js script.
funtion changeContent() {
var x = document.getElementById('textarea');
var liczba11 = document.getElementById('liczba1');
var liczbaa2 = document.getElementById('liczba2');
x.value = x.value + liczba11.value + liczbaa2.value + '\r\n';
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" readonly="readonly" /></p>
<button
onclick="this.form.elements['wynik'].value = parseFloat(this.form.elements['liczba1'].value) + parseFloat(this.form.elements['liczba2'].value); return false"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>
<button onclick="changeContent()">Click to change</button>
It's really difficult to implement, calculation in programming language. There's so mutch anything to handle, priority, divizion by zero. With the power of programming language there's eval function in javascript it can be easy to do.
const btn = document.querySelector('button')
const str = document.querySelector('#liczba1')
const result = document.querySelector('#r')
btn.addEventListener('click', function(e){
e.preventDefault()
if ( /^[0-9\*\/\-\+\(\)]+$/.test(str.value))
{
result.innerText = eval(str.value) // Be awaire of using eval function
console.log(eval(str.value))
} else
result.innerText = 'Error, type missmatch'
})
<fieldset>
<legend>String of calculation</legend>
<p>Example: 3+4 OR 4*3 OR some complicate 7895*265+(423-(4/65+3))</p>
<p><input type="text" name="liczba1" id="liczba1"/></p>
<p>Result <strong id="r"></strong> </p>
<button>
Result
</button>
</fieldset>
IMPORTANT
Check intentionnally using eval function.
Instead of using the onclick handler to hold the code, you can run a function from it.
You also misspelled function.
I added the logging code to the runCalc function so that it all happens at the same time, no extra button needed.
function runCalc(){
liczba11 = document.getElementById('liczba1');
liczbaa2 = document.getElementById('liczba2');
wynik = document.getElementById('wynik');
logs = document.getElementById('textarea');
wynik.value = parseFloat(liczba11.value) + parseFloat(liczbaa2.value);
logs.value += parseFloat(liczba11.value) + " + " + parseFloat(liczbaa2.value) + " = " + wynik.value + "\r\n";
}
<form action="">
<fieldset>
<legend>Sumowanie dwóch liczb - wprowadź dane</legend>
<p>Liczba1 <input type="text" name="liczba1" id="liczba1" /></p>
<p>Liczba2 <input type="text" name="liczba2" id="liczba2" /></p>
<p>Wynik : <input type="text" name="wynik" id="wynik" readonly="readonly" /></p>
<button type="button"
onclick="runCalc()"
>
Oblicz
</button>
</fieldset>
</form>
<form action="">
<div>
<textarea
name="uwagi"
id="textarea"
cols="30"
rows="3"
value="text"
disabled="disabled"
></textarea>
</div>
</form>

How to display multiple inputs on the same page in a container

I'm trying to display details inputted into the form in the div on the same page, when the submit button is clicked, it doesn't display.
<script type="text/javascript">
function checkinput(){
var a,b,c,d;
a = document.getElementById("fname").value;
b = document.getElementById("lname").value;
c = document.getElementById("address").value;
d = document.getElementById("email").value;
document.getElementById('output').innerHTML = a + b + c + d ;
}
</script>
<form id = "myform" onsubmit ="return false" >
<p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
<p>Last name : <input type="text" name="lastname" id="lname" value=""></p>
<p>Address : <input type="text" name="Address" id = "address" value=""></p>
<p>Email : <input type="email" name="Email" id = "email" value=""></p>
<button onclick = "check()">submit</button>
</form>
<div id="output" style="width: 200px; height: 200px;border: 1px solid black">
</div>
I expect details inputted in the form to display in the div element below.
Just rename the method you try to call when button is clicked.
<button onclick="checkinput()">submit</button>
To put every part on its own line, add the "" between them
document.getElementById('output').innerHTML =
a + "<br/>" + b + "<br/>" + c + "<br/>" + d;
UPD
you can set the default type of the button to the "button" as it was recommended above and in this case, you don't need to handle the "onsubmit" event for the form
<form id="myform">
<p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
<p>Last name : <input type="text" name="lastname" id="lname" value=""></p>
<p>Address : <input type="text" name="Address" id="address" value=""></p>
<p>Email : <input type="email" name="Email" id="email" value=""></p>
<button type="button" onclick="checkinput()">submit</button>
</form>
After that, you can use different js functions depending on your purposes
// Strait forward - just get names from the array and use the values
// in any way you like
function checkinput1() {
let html = "";
for(let name of ["fname", "lname", "address", "email"]) {
html += document.getElementById(name).value + "<br/>";
}
document.getElementById('output').innerHTML = html;
}
// If you need just to concatenate values
function checkinput2() {
document.getElementById('output').innerHTML = `${document.getElementById('fname').value}
<br/>${document.getElementById('lname').value}
<br/>${document.getElementById('address').value}
<br/>${document.getElementById('email').value}`;
}
// When you want to get all values from the form inputs and don't
// care about their real names. You can also skip the empty values, so
// no empty lines will be added to the result
function checkinput3(){
let values = [];
for(let elem of document.querySelectorAll('#myform input')){
if(elem.value) values.push(elem.value);
}
document.querySelector('#output').innerHTML = values.join('<br/>');
}

Submit form not connected to multiple fields

I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>
i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>

I have a form with the submit button linked to javascript function but nothing is happening when I click the submit button

I'm trying to make a form which when I click the submit button will send the information from the form fields to a javascript function and then show the results to the user. I've made something like this before that's very similar and works fine, but for some reason this isn't doing anything when I click submit. I must have missed something. Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" >
<title>Javascript Form</title>
</head>
<body>
<form id="formID" name="myform" action="" method="get">
Customer Name:
<input type="text" name="names" value="">
<br/>
Street Address:
<input type="text" name="street" value="">
<br/>
City:
<input type="text" name="city" value="">
<br/>
State:
<input type="text" name="state" value="">
<br/>
Zip Code:
<input type="text" name="zip" value="">
<br/>
Beginning Odometer Reading:
<input type="text" name="beginO" value="">
<br/>
Ending Odometer Reading:
<input type="text" name="edinO" value="">
<br/>
Number of Days Car was Used:
<input type="text" name="days" value="">
<br/>
<input type="button" name="button" value="Submit" onClick="car(this.form)">
</form>
<script type="text/javascript">
function car(form) {
var names = form.names.value;
var street = form.street.value;
var city = form.city.value;
var state = form.state.value;
var zip = form.zip.value;
var beginO = form.beginO.value;
var endO = form.endO.value;
var days = form.days.value;
var miles = endO - beginO;
var charge = days * 15 + miles * 0.12;
alert("Miles driven: " + miles + ". Charge: " + charge + ". Name: " + names + ". Address : " + street + " , " + city + " " + state + " " + zip + ". ");
}
</script>
</body>
</html>
It's because you have a JavaScript error at this line:
var endO = form.endO.value;
You have a typo in your form element name:
<input type="text" name="edinO" value="">
form.endO is undefined, so getting value throws an error.

How to get div element values in Javascript?

<html>
<head>
<script type="text/javascript">
function caluculate(x)
{
var temp=x+1;
var cn = document.getElementsByName(temp)[0].childNodes;
alert( "attribute name :"+cn[0].name + "attributevalue :" + cn[0].nodeValue );
}
</script>
</head>
<body>
<div id="fn1">
Enter your name: <input type="text" name="name" id="fn" onkeyup="caluculate(this.id)">
Enter your age: <input type="text" name="age" id="fa" onkeyup="caluculate(this.id)">
NAME + AGE :<input type="text" name="nameage" id="fname" value="">
</div>
</body> </html>
How to get div element values in Javascript?
I want to get the each values of input tag.
Please help me.
Try something like this.
HTML
<div id="fn1">
Enter your name: <input type="text" name="name" id="fn" onkeyup="caluculate()">
Enter your age: <input type="text" name="age" id="fa" onkeyup="caluculate()">
NAME + AGE :<input type="text" name="nameage" id="fname" value="">
</div>
JavaScript
function caluculate() {
var cn = document.getElementById("fn1").getElementsByTagName("input");
cn[2].value = "name: " + cn[0].value + ", age: " + cn[1].value;
}
Please try the following JavaScript function:-
function caluculate(x)
{
var ele = document.getElementById(x);
alert("attribute name: " + ele.name + ", attribute value: " + ele.value);
}
Since this JS function is always being called with the argument being the input element's ID, so there is no need to get / maintain the div element anywhere.
Hope it helps.

Categories

Resources