function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
document.getElementById("user_input1").value;
document.getElementById("user_input12").value;
document.getElementById("user_input123").value;
document.getElementById("user_input1234").value;
}
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
<input type="text" name="message" id="user_input1">
<input type="text" name="message" id="user_input12">
<input type="text" name="message" id="user_input123">
<input type="text" name="message" id="user_input1234">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><textarea id='display'></textarea></p>
I wanted this code to show all the inputs but it only shows the first one. What can i do to fix that.
You need to use + instead of ;
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value +
document.getElementById("user_input1").value +
document.getElementById("user_input12").value +
document.getElementById("user_input123").value +
document.getElementById("user_input1234").value;
}
Related
I am trying to match two fields with the result in my javascript before the form gets submitted but not working.
I don't want the form to get submitted if the results don't match.
Please what is the solution? Thanks.
Code Below;
function Check(){
var done=0;
var check=document.check.phone.value;
var check=document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert ("Result Match!");
done=1;
return fasle;
}
if (done==0) {
alert("Result Don't Match!");
}
}
<form action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br/><br/>
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br/><br/>
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login"><span>Log In </span></button>
</form>
You have several mistakes in your code, I have cleaned it up a bit for you.
function Check() {
var done = 0;
var phone = document.check.phone.value;
var pcode = document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert("Result Match!");
done = 1;
} else {
alert("Result Don't Match!");
}
}
<form name="check" action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br /><br />
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br /><br />
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login">
<span>LogIn</span></button>
</form>
What I am trying to do is add in an "add item button" to this HTML page that will take the template and generate it above the submit button.
However, I am getting an error on line newFields.id = ''; AFTER I create an additional object. So it runs once then breaks. The error is: Uncaught TypeError: Cannot set property 'id' of null at moreProducts (Survey.html:26) at HTMLInputElement.onclick (Survey.html:113) This is the first time I am using JavaScript and hope it is a simple mistake.
Here is my Code Survey.HTML
<!-- NOTE: Please add the following <META> element to your page <HEAD>. -->
<!-- If necessary, please modify the charset parameter to specify the -->
<!-- character set of your HTML page. -->
<!-- ---------------------------------------------------------------------- -->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.WebToLead?encoding=UTF-8" method="POST">
<script language="javascript">
var counter = 0;
function moreProducts()
{
counter++;
var template = document.getElementsByTagName("template")[0];
newFields = template.content.querySelector("div");
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for( var i=0; i<newField.length; i++)
{
var theName = newField[i].name
if(theName)
{
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('submit');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<input type="hidden" name="debug" value=1>
<!-- ---------------------------------------------------------------------- -->
<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<label for="phone">Phone</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
<label for="company">Company</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
<label for="url">Website</label><input id="url" maxlength="80" name="url" size="20" type="text" /><br>
<label for="street">Street</label><textarea name="street"></textarea><br>
<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" /><br>
<label for="state">State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text" /><br>
<label for="zip">Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" /><br>
Project Name:<input id="00N3a00000COzOT" maxlength="50" name="00N3a00000COzOT" size="20" type="text" /><br>
<template>
<div>
<input type="button" value="Remove Item" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
Product Description:<textarea id="00N3a00000COzOY" name="00N3a00000COzOY" rows="15" type="text" wrap="soft"></textarea><br>
Product Name:<input id="00N3a00000CP0vo" maxlength="25" name="00N3a00000CP0vo" size="20" type="text" /><br>
Product Weight:<input id="00N3a00000COzOd" name="00N3a00000COzOd" size="20" type="text" /><br>
Product Width:<input id="00N3a00000COzOi" name="00N3a00000COzOi" size="20" type="text" /><br>
Product Length:<input id="00N3a00000COzOn" name="00N3a00000COzOn" size="20" type="text" /><br>
Product Height:<input id="00N3a00000COzOs" name="00N3a00000COzOs" size="20" type="text" /><br>
</div>
</template>
<div id= "First Product">
<input type="button" value="Remove Item" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
Product Description:<textarea id="00N3a00000COzOY" name="00N3a00000COzOY" rows="15" type="text" wrap="soft"></textarea><br>
Product Name:<input id="00N3a00000CP0vo" maxlength="25" name="00N3a00000CP0vo" size="20" type="text" /><br>
Product Weight:<input id="00N3a00000COzOd" name="00N3a00000COzOd" size="20" type="text" /><br>
Product Width:<input id="00N3a00000COzOi" name="00N3a00000COzOi" size="20" type="text" /><br>
Product Length:<input id="00N3a00000COzOn" name="00N3a00000COzOn" size="20" type="text" /><br>
Product Height:<input id="00N3a00000COzOs" name="00N3a00000COzOs" size="20" type="text" /><br>
</div>
<input id="submit" type="submit" name="submit">
<input type="button" id="moreFields" value="Add Another Item" onclick="moreProducts()"/>
</form>
Reason: you are directly working on DOM instead of creating clone of it in template. so it get the original DOM, insert it into another div and next time it won't find the DOM.
Solution:
Change JS as below,
function moreProducts()
{
counter++;
var template = document.getElementsByTagName("template")[0].cloneNode(true); // THIS change will create clone of DOM instead of working on it directly
newFields = template.content.querySelector("div");
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for( var i=0; i<newField.length; i++)
{
var theName = newField[i].name
if(theName)
{
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('submit');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
I need some help with my HTML, I'm attempting to pass my form data to a script called send.js, However nothing happens. I have a feeling my error lies input type however im not very good at html
<form method="post" name="myform">
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="5" cols="50"> </textarea> <br>
<label for="your_name">Your Name:</label>
<input type="text" name="your_name" id="your_name" /> <br>
<label for="customer_number">Customers Number:</label>
<input type="text" name="customer_number" id="customer_number" /> <br>
<input type="submit" value = "Send Message" onsubmit="f1">
</form>
<script> src="send.js"</script>
The send.js scripot is as follows
function f1()
{
var msg = document.getElementById("msg").value;
var your_name = document.getElementById("your_name").value;
var customer_number = document.getElementById("customer_number").value;
alert("value 1 = " + msg "value 2 = " + your_name "value 3 = " + customer_number );
}
Any input would be greatly apperciated
<form id="myForm" method="post" name="myform">
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="5" cols="50"> </textarea> <br>
<label for="your_name">Your Name:</label>
<input type="text" name="your_name" id="your_name" /> <br>
<label for="customer_number">Customers Number:</label>
<input type="text" name="customer_number" id="customer_number" /> <br>
<input type="submit" value = "Send Message" onsubmit="f1">
</form>
<script src="send.js"></script>
send.js
document.getElementById('myForm').onsubmit = f1();
OR
<form method="post" name="myform" onsumbit="f1()">
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
I'm the beginner of JS. I try to get input from the HTML form. And print words out from function. I have read JS in W3. However, it keeps going wrong. Could somebody give me a hand.
HTML - about the form
<form method="get">
<h2>Please leave your contact information for us</h2>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>
<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>
<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea>
<br>
<br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" onclick="welcome()">Give Us Help</button>
</form>
My JS code
var first = document.getElementById("FirstName");
var last = document.getElementById("LastName");
function welcome(){
var welcomeF = "Welcome" + first +" "+ last;
return welcomeF;
}
console.log(welcome());
Use first.value to get the value of the element & use onSubmit attribute in instead of using onclick.
Have a look at this code, I did some changes in your code.
Javacript :
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var welcomeF = "Welcome " + first +" "+ last;
console.log(welcomeF);
window.alert(welcomeF);
return false; //To prevent it from going into next page.
}
Html :
<form onSubmit = "return welcome();">
<h2>Please leave your contact information for us</h2>
<label for="FirstName">First Name:</label>
<input type="text" id="FirstName" name="firstName" placeholder="Your First Name"><br>
<label for="LastName">Last Name:</label>
<input type="text" id="LastName" name="LastName" placeholder="Your last Name"><br>
<label for="email">E-mail:</label>
<input type="e-mail" id="email" name="eMail"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="passWord"><br>
<label for="suGession">sub gesstion:</label><br>
<textarea name="suggestion" id="suGession" cols="30" rows="10"></textarea><br><br>
<p>What do you usually cook?</p>
<input type="text">
<button type="submit" >Give Us Help</button>
You need to change:
var welcomeF = "Welcome" + first +" "+ last;
to:
var welcomeF = "Welcome" + first.value +" "+ last.value;
first and last are just references to the dom nodes, not the value in them