how to push comment using javascript? - javascript

I have some code as below, a form validation for comment box on my web, I already linked it to validation javascript where the code notify them when they're input a wrong email structure or type the comment box over 140 char, and didn't insert the name it was like regex, and i would like to make another javascript internal to push the comment so after the user write the comment it will shown on the page, as shown bellow. But I got a little problem, where it couldn't show up my comment. Please if you read this question, tell me where did I do it wrong. Thank you so much
<script>
var comment = [];
var name= document.getElementById("nama");
var email= document.getElementById("email");
var message= document.getElementById("komen");
var messageBox = document.getElementById("display");
function insert(){
comment.push("Nama :" + name.value);
comment.push("Email : " + email.value);
comment.push("Message : " + message.value);
clearAndShow();
}
function clearAndShow (){
name.value = "";
email.value = "";
message.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += " " + comment.join("<br/> ") + "<br/>";
}</script>
<section>
<form name="RegForm" action="" onsubmit="return validation()" method="post">
Nama Anda :</br><input type=text name="Name" id="nama" size="35" placeholder="Nama"><br /><br>
Email :</br><input type=text name="EMail" id="email" size="35" placeholder="E-mail"><br /><br>
Komentar :</br><textarea rows="12" name="Comment" id="komen" cols="100" wrap="virtual" placeholder="Pesan"></textarea><br/><br>
<input type="submit" onclick="insert()" value="send" />
<input type="reset" value="Reset" name="Reset">
</form><br />

Your missing your #display. Add that should be fine:
let comment = [];
let name = document.getElementById("nama");
let email = document.getElementById("email");
let message = document.getElementById("komen");
let messageBox = document.getElementById("display");
insert = () => {
// You can push these all at once
comment.push(
`Nama :${name.value}`,
`Email : ${email.value}`,
`Message : ${message.value}`);
clearAndShow();
}
clearAndShow = () => {
name.value = "";
email.value = "";
message.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += " " + comment.join("<br/>") + "<br/>";
}
// remove this
document.querySelector('form[name=RegForm]').onsubmit = e => {
e.preventDefault();
}
<section>
<form name="RegForm" action="" method="post">
Nama Anda :</br>
<input type=text name="Name" id="nama" size="35" placeholder="Nama">
<br /><br> Email :</br>
<input type=text name="EMail" id="email" size="35" placeholder="E-mail">
<br /><br> Komentar :</br>
<textarea rows="12" name="Comment" id="komen" cols="100" wrap="virtual" placeholder="Pesan"></textarea><br/><br>
<input type="submit" onclick="insert()" value="send" />
<input type="reset" value="Reset" name="Reset">
</form>
</section>
<div id='display'></div>

Related

Why innerHTML return null

I need div to show an user's message, where is : [name] : [text of message], and when I click the button to send it, message should be shown in
appropriate div. But when I write a message and click the button, than I see in div: null : null. Why it happens?
I have alredy tried to change name of variable and name of div's id that contains name and text.
HTML:
<form class="login" onsubmit="return false">
<input type="text" id="name" placeholder="name"><br>
<textarea type="text" id="message" placeholder="message">
</textarea><br>
<input type="submit" id="btn" value="Send">
</form>
JavaScript:
var chat = document.getElementById('chat'); //chat
var name = document.getElementById('name'); //username
var message = document.getElementById('message'); //message
var btn = document.getElementById('btn');
btn.onclick = function(){
chat.innerHTML = name + " : " + message;
}
You have not put .value to get value of input . Try like below :
btn.onclick = function(){
var chat = document.getElementById('chat'); //chat
var name = document.getElementById('name').value; //username
var message = document.getElementById('message').value; //message
var btn = document.getElementById('btn');
chat.innerHTML = name + " : " + message;
}
<form class="login" onsubmit="return false">
<input type="text" id="name" placeholder="name"><br>
<textarea type="text" id="message" placeholder="message">
</textarea><br>
<input type="submit" id="btn" value="Send">
</form>
<div id="chat">
</div>

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/>');
}

How to check whether an email address contains an # sign and a '.'. in html and javascript

I'm performing some validation checks on some inputs from the user. I was wondering how do I check that the email entered by the user contains an # symbol and a '.' as well as characters before and after the # symbol. Thanks in advance for answering.
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function showInput() {
var comment = document.getElementById("com").value;
var first = document.getElementById("fname").value;
var last = document.getElementById("lname").value;
var dateOfVisit = document.getElementById("date").value;
var firstError = document.getElementById('firstNameError');
var lastError = document.getElementById('lastNameError');
var displayEl = document.getElementById('displayname');
if (!first) {
firstError.setAttribute('style', 'display: block; color: red');
} else {
firstError.setAttribute('style', 'display: none;');
}
if (!last) {
lastError.setAttribute('style', 'display: block; color: red');
} else {
lastError.setAttribute('style', 'display: none;');
}
displayEl.innerHTML =
first + " " + last + " visited this on " + dateOfVisit + " and said '" + comment || 'not a thing...' + "'";
}
</script>
<title>Great Pyramid of Giza</title>
</head>
<body>
<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
First Name:<br>
<input type = "text" name="firstname" id="fname"><br>
<span style="display: none;" id="firstNameError">First name is required!</span>
Last Name:<br>
<input type = "text" name="lastname" id="lname"><br>
<span style="display: none;" id="lastNameError">Last name is required!</span>
Email Address:<br>
<input type = "text" name="email"><br>
Date of Visit:<br>
<input type = "text" name="date" id="date"><br>
Comment:<br>
<input type = "text" name="comment" size="70" id="com"><br>
</form>
<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>
</body>
</html>
You can create a email input and validate against that instead of using any regex...
function isEmail(email) {
var input = document.createElement('input')
input.type = 'email'
input.value = email
return input.validity.valid
}
console.log(isEmail('admin#example.com'))
console.log(isEmail('#example.com'))
But why bother??? just use <input type="email"> and skip all javascript nonsens
<form>
<input type="text" name="firstname" required autocomplete="given-name">
<input type="text" name="lastname" required autocomplete="family-name">
<input type="email" name="email" autocomplete="email">
<input type="date" min="2018-04-21" name="date">
<textarea name="comment"></textarea>
<input type="submit">
</form>
ps, use form.onsubmit instead of btn.onclick (way better)
read more about constraint validation and inputs

Popup window confirmation/Preview records before Insertion happens

Bear with my kindergarten introduction to Javascript and Phonegap.
I need a user to preview records captured before inserting them. Any work arounds? I have the implementation as follows:
function Preview() {
var vName = document.getElementById("name").value;
var vage = document.getElementById("age").value;
var vplace = document.getElementById("place").value;
var popup = window.open(view, 'Preview_records');
popup.document.write('Name:' + vName + '<br /> Age:' + vage + '<br /> Place: ' + vplace + '<br />');
}
<form id="view" method="POST" class="formular">
<label>Name</label>
<input type="text" name="name" id="name" /><br>
<label>age</label>
<input type="text" name="age" id="age" /><br>
<label>place</label>
<input type="text" name="place" id="place" />
<button onclick="Preview()">Preview</button>
</form>
When this window pops up, I want to have PROCEED button and CANCEL Button, where PROCEED will take me to an insertion function and CANCEL will drop back to edit form data.
Insertion function as
function Insertion() {
var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000);
db.transaction(insertDT, errorZ, successY);
}
I don't know if something like this works in phonegap, but this would be my solution:
function preview() {
var vName = document.getElementById("name").value;
var vage = document.getElementById("age").value;
var vplace = document.getElementById("place").value;
var preview = document.getElementById("preview")
preview.innerHTML = 'Name:' + vName + '<br /> Age:' + vage + '<br /> Place: ' + vplace + '<br />';
var reset = document.getElementById("reset");
reset.style.display = "initial";
var submit = document.getElementById("submit")
submit.style.display = "initial";
reset.onclick = () => {
preview.innerHTML = "";
reset.style.display = "none";
submit.style.display = "none";
};
}
<form id="view" method="POST" class="formular">
<label>Name</label>
<input type="text" name="name" id="name" /><br>
<label>age</label>
<input type="text" name="age" id="age" /><br>
<label>place</label>
<input type="text" name="place" id="place" />
<button onclick="preview()">Preview</button>
<p id="preview"></p>
<input id="reset" type="reset" value="Cancel" style="display:none">
<input id="submit" type="submit" value="Proceed" style="display:none">
</form>

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>

Categories

Resources