HTML and Javascript: Form won't submit. - javascript

So I have a very basic assignment to finish and it it is to help us learn some very basic javascript. We have to make a form and when you click a button it preforms a javascript function. I can not figure out why it won't complete the function. Can someone troubleshoot my code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
</head>
<body>
<form>
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<button onclick="myFunction()">Send</button>
</form>
<script>
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + Widgets)
}
</script>
</body>
</html>

You should put quote around Widget like so:
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " " + "Widgets");
Also you may want to put ';' at the end too.
Quick tip for you, you can catch this error easily by open a Dev-Console
In Google Chrome Press [Ctrl+Shift+J] you will see the error show up.
Hope this helps.

Trial again with this code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
<script type="text/javascript">
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets")
}
</script>
</head>
<body>
<form action="" name="from">
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<input type="button" onclick="myFunction()" value="Trial" />
</form>
</body>
</html>

Have you tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Order Page</title>
</head>
<body>
<form>
<label>First Name:</label><input type="text" id="fname" size="30" /><br><br>
<label>Last Name:</label><input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:</label><input type="text" id="num" size="4" /><br><br>
<input type="button" onclick="myFunction()" value="Send" />
</form>
<script>
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks," + " " + fname + " " + lname + "for ordering" + num + " Widgets");
document.document.getElementsByTagName("form")[0].submit();
}
</script>
</body>
</html>

You defined Widgets as variable but it is suppose to be a string.
function myFunction() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, "+fname + " " + lname + " for ordering " + num + " Widgets ")
}
Also you didnt mentioned the button type, so have added it.
<form>
<label>First Name:<input type="text" id="fname" size="30" /><br><br>
<label>Last Name:<input type="text" id="lname" size="30" /><br><br>
<label>Number of Widgets:<input type="text" id="num" size="4" /><br><br>
<button onclick="myFunction()" type ="button">Send</button>
</form>
Please check this JSFIDDLE for demo.
Hope this is useful

var btn = document.getElementById("btn");
btn.onclick = function() {
var fname;
var lname;
var num;
lname = document.getElementById("lname").value;
fname = document.getElementById("fname").value;
num = document.getElementById("num").value;
alert("Thanks, " + fname + " " + lname + "for ordering" + num + " " + "Widgets")
};
<form onsubmit="return false;">
<label>First Name:<input type="text" id="fname" size="30" />
<br/><br/>
<label>Last Name:<input type="text" id="lname" size="30" />
<br/><br/>
<label>Number of Widgets:<input type="text" id="num" size="4" />
<br/><br/>
<button id="btn">Send</button>
</form>

Related

Why JavaScript Not Execute?

my javascript won't work I tried everything
here is the example
function prep2() {
if (f1.c1.value, f1.a1.value, f1.t1.value != "") {
var character = f1.c1.value;
var age = f1.a1.value;
var thing = f1.t1.value;
document.getElementByid("lolo").innerHTML = "hi my name is " + character + ", i am " + age + " years old. and i love " + thing;
}
}
<head>
<title>test</title>
</head>
<body>
<h1>Story Maker</h1>
<form name="f1">
Character <input type="text" name="c1"><br><br> Age&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="number" name="a1"><br><br> Favourite <input type="text" name="t1"><br><br>
<input type="button" onclick="prep2()" value="sumbit">
<h1>Story:</h1><br>
<p id="lolo"></p>
</form>
</body>
_________________________________________________________________________________________________________________________________________________________________________________________________________________________--
Looks like your code had document.getElementByid instead of document.getElementById.
The below code seems to be working:
function prep2() {
if (f1.c1.value, f1.a1.value, f1.t1.value != "") {
var character = f1.c1.value;
var age = f1.a1.value;
var thing = f1.t1.value;
document.getElementById("lolo").innerHTML = "hi my name is " + character + ", i am " + age + " years old. and i love " + thing;
}
}
<head>
<title>test</title>
</head>
<body>
<h1>Story Maker</h1>
<form name="f1">
Character <input type="text" name="c1"><br><br> Age&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="number" name="a1"><br><br> Favourite <input type="text" name="t1"><br><br>
<input type="button" onclick="prep2()" value="Submit">
<h1>Story:</h1><br>
<p id="lolo"></p>
</form>
</body>

html form to javascript and back to html

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.

To Fetch input text field value and adhere it to Subject of mail

I have this code in which i want to capture "subject" from input field and append it to "Subject" of "form" tag.
I am not getting how to use document.getElementById here.
Please help.
<!DOCTYPE html>
<html>
<body>
<form name="form1" method="post" action="mailto:somebody#gmail.com?Subject=Internal Issues enctype="text/plain">
<label for="Subject">Subject</label>
<input type="text" id="Subject" name="Subject">
</html>
</body>
Here don't use method or type with form attribute and your input test must contains name="subject"
Try with,
document.getElementById('sender').addEventListener("click", sendEmail);
function GetBody() {
var body = "Assignee : " + document.getElementById('Assignee').value + '\n' + "Requester: " + document.getElementById('Requester').value + '\n';
return body;
};
function sendEmail() {
var email = 'someone#gmail.com';
var body = GetBody();
var subject = document.getElementById('subject').value;
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(body);
window.location.href = mailto_link;
}
<form>
<div style="white-space:nowrap">
<label for="Requester" style="padding-right:50px;">Requester*</label>
<input type="text" id="Requester" name="Requester:" placeholder="Your Vuclip Mail Id..">
</div>
<div style="white-space:nowrap">
<label for="Assignee" style="padding-right:57px;">Assignee*</label>
<input type="text" id="Assignee" name="Assignee" placeholder="Whom you want to assign">
</div>
<div style="white-space:nowrap">
<label for="subject" style="padding-right:57px;">Subject*</label>
<input id="subject" name="subject " type="text" value="I have a suggestion" style="width: 870px; font-size: 18px;" />
</div>
</form>
<button id="sender">Send email</button>

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