<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.
Related
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.
This question already has answers here:
Display HTML form values in same page after submit using Ajax [closed]
(7 answers)
Closed 5 years ago.
I am trying to display what is typed and submitted in my form, on the same page. I got the first entry "name" to display, but can't get the rest to show up. I am using JQuery validator. I feel like it's something simple I am missing here. Thanks!
Script:
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display =
$("#name").val();
$("#theage").val();
$("#theemail").val();
$("#result").html(display);
});
});
Html:
<div>
<form id="signup">
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" title="Required" class="required">
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" title="Required" class="required digits">
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">
<input type='submit' value='Submit' name="submit" id='submitme'>
</form>
<p> Your name: </p>
<p> Age: </p>
<p> Email: </p>
<p id="result"></p>
</div>
You need to concatenate the form values. Right now, you're only adding the name to your display var.
var display =
$("#name").val(); // statement ends here because of semicolon
$("#theage").val();
$("#theemail").val();
needs to change to
var display =
$("#name").val() + " " +
$("#theage").val() + " " +
$("#theemail").val();
The error is not throwing in console, you were missing plugins.
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display =
$("#name").val();
$("#theage").val();
$("#theemail").val();
$("#result").html(display);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<div>
<form id="signup">
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" title="Required" class="required">
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" title="Required" class="required digits">
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">
<input type='submit' value='Submit' name="submit" id='submitme'>
</form>
<p> Your name: </p>
<p> Age: </p>
<p> Email: </p>
<p id="result"></p>
</div>
To display the values entered on the form you could use the following:
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display = "<p>Your name: " + $("#name").val() + "</p><p>Your age: " + $("#theage").val() + "</p><p>Your email: " + $("#theemail").val() + "</p>";
$("#result").html(display);
});
});
I believe your problem is because you are only adding $("#name").val() to the display variable, You need to concatenate them.
var display = $("#name").val() + " " +
$("#theage").val() + " " +
$("#theemail").val();
Here's an example:
var result =
"Hello "; // semi colon ends the assignment
"world"; // this is doing nothing
$('#result1').html(result);
var result2 =
"Hello " +
"world";
$('#result2').html(result2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1:
<div id="result1"></div>
<br> 2:
<div id="result2"></div>
A user is filling in a form:
fname : Firstname
mname : middlename
lname : lastname
fullname : Complete naam
Before the user is entering field4 I would like to give already the values fname & mname & lname as a start in fullname. I found out that this should be done as below.
I already made this but something is wrong... I have almost no Javascript experience...
<!DOCTYPE html>
<html>
<body>
First name: <input type="text" id="fname"><br>
Middle name: <input type="text" id="mname"><br>
Last name: <input type="text" id="lname"><br>
Fullname: <input type="text" id="fullname" onfocus="myFunction()"><br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementsByTagName("fname").value + document.getElementsByTagName("mname").value + document.getElementsByTagName("lname").value;
}
</script>
</body>
</html>
You are using the getElementsByTagName method, but the value you are passing to it is the id of an element, not the tag name (which would be "input").
Use getElementById to get an element by its id.
Either you could access using getElementById like this:
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
document.getElementById("fullname").style.background = "yellow";
document.getElementById("fullname").value = document.getElementById("fname").value + document.getElementById("mname").value + document.getElementById("lname").value;
}
</script>
OR
Stick to use getElementsByTagName.
First name:
<input type="text" id="fname">
<br>Middle name:
<input type="text" id="mname">
<br>Last name:
<input type="text" id="lname">
<br>Fullname:
<input type="text" id="fullname" onfocus="myFunction()">
<br>
<script>
function myFunction() {
var inputArr = document.getElementsByTagName("input");
document.getElementById("fullname").style.background = "yellow";
inputArr[3].value = inputArr[0].value + inputArr[1].value + inputArr[2].value;
}
</script>
Sounds good!
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.
Mainly the error would be in the function but i can't find it.
I'm a newbie in this section so kindly be patient.
<html>
<head><title>print names</title>
<script language="javascript">
function name()
{
var first, middle, last;
first = document.f1.fname.value;
middle = document.f1.mname.value;
last = document.f1.lname.value;
div1.insertAdjacentHTML("AfterEnd", "<h1 style='textalign:center'>My name is " + first + middle + last + "</h1>");
}
</head>
<body bgcolor="9edcba">
<h1>here we display the name</h1>
<form name="f1">
Enter the first name: <input type=text name="fname" size=15>
<br>
Enter the middle name: <input type=text name="mname" size=15>
<br>
Enter the last name: <input type=text name="lname" size=15>
<br>
<div id="div1">
<input type=button value="click here" onclick="name()">
</div>
</form>
</body>
</html>
<html>
<head>
<title>print names</title>
<script type="text/javascript">
function myname()
//Changed the function to myname as name is reserved
{
var first,middle,last;
first=document.f1.fname.value;
middle=document.f1.mname.value;
last=document.f1.lname.value;
div1.insertAdjacentHTML("afterend","<h1 align='center'>My name is " + first+ " " + middle + " " +last + "</h1>");
//Fixed the above code, added correct quotes + spaces + added a closing </h1> tag
}
</script>
</head>
<body bgcolor="9edcba">
<h1>here we display the name</h1>
<form name="f1">
Enter the first name: <input type=text name="fname" size=15>
<br>
Enter the middle name: <input type=text name="mname" size=15>
<br>
Enter the last name: <input type=text name="lname" size=15>
<br>
<div id="div1">
<input type=button value="click here" onclick="myname()">
</div>
</form>
</body>
</html>
Change the function name as name() is reserved.
Edited the quotes + ADDED closing </h1>
Added closing form tags.
change your div1.insert line with the following line
div1.insertAdjacentHTML("AfterEnd","My name is"+first+middle+last);
and change the name of the function to "name1". as "name" can not be used as a function name.
probably too late but you could also do something like this.
Changed your form elements classes to ID's since they are safer when getting some kind of input and returning it.
changed name() to myFunction() since name can't be used as it is reserved.
<script>
function myFunction() {
var fname = document.getElementById("fname");
var mname = document.getElementById("mname");
var lname = document.getElementById("lname");
var currentVal = fname.value + " " + mname.value + " " + lname.value;
div1.insertAdjacentHTML("afterend", "<h1 align='center'>My name is " + currentVal + "</h1>");
}
</script>
</head>
<body bgcolor="9edcba">
<h1>here we display the name</h1>
<form name="f1">
Enter the first name:
<input type=text id="fname" size=15>
<br> Enter the middle name:
<input type=text id="mname" size=15>
<br> Enter the last name:
<input type=text id="lname" size=15>
<br>
<div id="div1">
<input type=button value="click here" onclick="myFunction()">
</div>
</form>
whenever you are getting a javascript issue try to add alert and check whether the function is called.
check below code this is will resolve your issue. even though you accept the answer.
<html>
<head><title>print names</title>
<script language="javascript">
function call()
{
var first, middle, last;
first = document.f1.fname.value;
middle = document.f1.mname.value;
last = document.f1.lname.value;
div1.insertAdjacentHTML("AfterEnd", "<h1 style='textalign:center'>My name is " + first + middle + last + "</h1>");
}
</script>
</head>
<body bgcolor="9edcba">
<h1>here we display the name</h1>
<form name="f1">
Enter the first name: <input type=text name="fname" size=15>
<br>
Enter the middle name: <input type=text name="mname" size=15>
<br>
Enter the last name: <input type=text name="lname" size=15>
<br>
<div id="div1">
<input type=button value="click here" onclick="call()">
</div>
</form>
</body>
</html>