I have a form. If you fill in the form, the data must be placed in the constant USERS with (vanilla) javascript. Can somebody help me, please?
It is also intended that the CONST USERS will be shown in the div 'show', but doesn't have to.
My Code:
<!DOCTYPE html>
<head>
<title>Users</title>
</head>
<body>
<main>
<form>
<label for="ordername">Name:</label>
<input type="text" id="name" name="name"/>
<label for="age">Age:</label>
<input type="number" id="age" name="age"/>
<input type="submit" value="submit" class="submit"/>
</form>
<div class="show">
</div>
</main>
<script>
const USERS = [
{
name: Brit,
age: 45,
},
{
name: John,
age: 55,
}];
</script>
</body>
</html>
in your code const = USERS is also not a valid. read syntax before use.
You can push as below
const USERS = [];
var form_el = document.getElementById("myForm");
form_el.addEventListener("submit", function(evt) {
evt.preventDefault();
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var objsingle = {};
objsingle.name = name;
objsingle.age = age;
USERS.push(objsingle);
//console.log(USERS);
document.getElementById("show").innerHTML = JSON.stringify(USERS);
});
<!DOCTYPE html>
<head>
<title>Users</title>
</head>
<body>
<main>
<form id="myForm">
<label for="ordername">Name:</label>
<input type="text" id="name" name="name"/>
<label for="age">Age:</label>
<input type="number" id="age" name="age"/>
<input type="submit" value="submit" class="submit"/>
</form>
<div class="show" id="show">
</div>
</main>
</body>
</html>
In your code with the provided users example, you have name: Brit and name: John, They should be strings like, name: "Brit", and name: "John".
In your comment "Oh I forgot to say if I leave the website again that the data will remain on the webpage" do you mean using something like localstorage ?
The following snippet should do it:
<!DOCTYPE html>
<head>
<title>Users</title>
</head>
<body>
<main>
<form id="user-form">
<label for="ordername">Name:</label>
<input type="text" id="name" name="name"/>
<label for="age">Age:</label>
<input type="number" id="age" name="age"/>
<input type="submit" value="submit" class="submit"/>
</form>
<div class="show"></div>
</main>
<script>
const users = JSON.parse(localStorage.getItem("users") || "[]");
console.log(users);
const form = document.getElementById("user-form");
form.addEventListener("submit", function(e) {
e.preventDefault();
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const user = { name, age };
users.push(user);
localStorage.setItem("users", JSON.stringify(users));
console.log(users);
});
</script>
</body>
</html>
Related
I am trying to insert a new product through a form with javascript into database in grapqhl server and also that product should be displayed in zonaB with javascript ,but i am getting the error 400 bad request. Could someone tell me where is the mistake
here is html code
'''
<form id="formular" action="#" method="POST">
<label>Numar produs:</label>
<input type="text" id="nr">
<label>Denumire produs:</label>
<input type="text" id="nume" ><br>
<label>Categorie produs: </label>
<input type="text" id="categorie"> <br>
<label>Descriere: </label>
<input type="text" id="descriere"><br>
<label>Imagine:</label>
<input type="text" id="imagine"><br>
<label> Pret:</label>
<input type="text" id="pret"><br>
<label> Disponibil:</label>
<input type="text" id="stoc"><br>
<button onmouseover="insereaza1()"> Insereaza</button>
</form>
<script>
var $id = $('#nr').val()
var $name = $('#nume').val()
var $id_categorie = $('#categorie').val()
var $descriere = $('#descriere').val()
var $imagine = $('#imagine').val()
var $pret = $('#pret').val()
var $stoc = $('#stoc').val()
function insereaza1() {
creareProdus={"query":"mutation{createProduct($id:ID!, $name:String, $id_categorie:ID,
$descriere:String, $imagine:String, $pret:Float, $stoc:Boolean){createProduct(id:$id,
name:$name, category_id:$id_categorie, description:$descriere, picture:$imagine,
price:$pret, available:$stoc){product{id }}}}"}
setari={url:"http://localhost:3000",
type:"POST",
data:creareProdus,
contentType:"application/json",
success:vizualizareProdus}
$.ajax(setari)
}
function vizualizareProdus(){
var x = document.getElementById("formular").method
document.getElementById("zonaB").innerHTML = x
}
</script>
</body>
</html>
'''
I'm trying to create a ‘customer’ object that will store all of this data and then display the information as a ‘Customer Order’ similar with listing all the new information.
I can't figure out what's the problem. (Pretty sure the whole code itself is messed up)
When I run it, it also shows 'ReferenceError: clicked is not defined' message.
I don't understand the concept of storing data and displaying new information as a 'Customer Order'.
This is my javascript.
/*index.js*/
var objectarray = [];
function addToArray() {
var customerobject = {
name: "",
address: "",
postalcode: "",
phone: "",
email: ""
}
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
document.getElementById("buttonandchecks").addEventListener("click", clicked);
function clicked() {
addToArray();
}
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
function buttonandchecks()
{
//javascripts to get an output based on customer information
}
> ------------------------Below is my html------------------------
<!DOCTYPE html>
<html>
<head>
<link href="this.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="this.js">
</script>
</head>
<body>
<br>
<form name="information">
<table>
<tr><td>; First and Last Name :;</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td>; Address :;</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|#|#|$|%|&)+"></td></tr>
<tr><td>; Phone Number :;</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
<form name=order>
//javascript to get an customer information
<br>
<br>
<center><input type=button value="Price your Order" id="clickMe" onClick="clicked();"></center>
</form>
</body>
</html>
I fixed your code, but there is a lot more to this question. This isn't really a proper way to store the data. You should be posting the information from the form to a service.
<html>
<body>
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
</body>
<script>
var objectarray = [];
var button = document.getElementById("clickMe");
function addToArray() {
var customerobject = {};
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
button.addEventListener("click", addToArray);
</script>
</html>
This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
I want to have a form that asks the user their name, then welcomes them to the website with that name without redirecting to a different page or reloading. So basically replace a form with "Welcome NAME" after submit is clicked.
My code:
<div id="welcomeText">
<form onsubmit="changeText()" method="post">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
function changeText() {
var name = document.getElementById(welcomeForm).fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
You need to give a name to the form before trying to access it, something like this:
//create the name attribute for the form
<form onsubmit="changeText()" method="post" name="myForm">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<script>
function changeText() {
//access myForm using document object
var name = document.name.fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
<div id="welcomeText">
<form onsubmit="changeText()" method="post" id="welcomeForm">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
function changeText() {
var name = document.getElementById("welcomeForm").fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="welcomeText">
Name: <input type="text" name="fname" id="name">
<input id="submit" type="submit" onclick="changeText()" onsubmit="changeText()">
</div>
<script>
function changeText() {
var name = document.getElementById("name").value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
document.getElementById("name").style.display = "none";
document.getElementById("submit").style.display = "none";
}
</script>
</body>
</html>
Try this it will display "welcome user" and also make button and input disappear. In this case you don't even need a form. You can access the name directly from the input without ever submitting the form.
Here we are:
<div id="welcomeText">
<form id="myform" method="post">
Name: <input type="text" name="fname">
<input type="submit">
</form>
</div>
<script>
var form = document.getElementById("myform");
form.addEventListener('submit', function (e) {
e.preventDefault(); // This will prevent submitting the form
var name = form.fname.value;
var welcome = "Welcome, " + name;
document.getElementById("welcomeText").innerHTML = welcome;
});
</script>
I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>