Develop Reference

how to push comment using 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>

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

Add a Drop Down Option in an HTML form

Can I add a drop down option on two of my forms like on the Gender (Male or Female Option) and on the VERID if (Yes or No) and then when I click on submit it will show the one that i inputted?
<form id="myForm">
Phone: <br><input type="text" name="Phone Number" placeholder="Phone Number"/><br/>
Gender: <br><input type="text" name="Gender" placeholder="Gender"/><br/>
INBOUND: <br><input type="text" name="INBOUND" placeholder="INBOUND"/><br/>
Name: <br><input type="text" name="Name" placeholder="Name"/><br/>
Status: <br><input type="text" name="Status" placeholder="Status" /><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=8 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.getElementsByTagName('input');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
<textarea rows="8" cols="40">
Issue:
Steps:
</textarea>

In your form you should use select instead of input
<select name="Gender" placeholder="Gender"><option>Male<option>Female</select>
Next you can get the input tag and select tag using querySelectorAll
var inputs = myForm.querySelectorAll('input,select');
Putting all together :
<form id="myForm">
Gender:<select name="Gender" placeholder="Gender"><option>Male<option>Female</select><br/>
Name:<input type="text" name="Name" placeholder="Name"/><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=8 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}
function selectText(textField) {
textField.focus();
textField.select();
}
</script>

Split urls/text by spaces into 2 boxes Javascript Only no libraries

Well so far i havent been able to get it to change the input box value.
What i want it to do?
I want it to take the text from the first box. And when you click the button splits it and appends them to the 2nd and 3rd box.
I don't want to use jquery or any libraries purely javascript.
Any questions ask away.
Not sure what im doing wrong here. Seems it should work. Any help? Thanks
Edited this is working for what i need.... not sure if its the best way but it does work
Code
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var urls_1;
var split_text;
function addto_boxes(form) {
var split_text = document.getElementById("text_to_split").value;
var urls_1 = split_text.split(" ", 100000);
document.getElementById("input_box1").value = document.getElementById("input_box1").value + urls_1[0] + " ";
document.getElementById("input_box2").value = document.getElementById("input_box2").value + urls_1[1] + " ";
}
</SCRIPT>
</HEAD>
<BODY>
<input id="Split" type="button" value="Add to boxes" onclick="addto_boxes(this.form);"/><Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea><Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE=""rows="4" cols="75"></textarea><Br>
Put 2nd urls in this box: <Br>
<textarea NAME="inputbox2" id="input_box2" VALUE=""rows="4" cols="75"></textarea><Br>
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>

This should work for you
HTML
<input id="Split" type="button" value="Add to boxes" />
<Br>
<textarea NAME="texttosplit" id="text_to_split" VALUE="" rows="4" cols="75"></textarea>
<Br>
<FORM NAME="myform" ACTION="" METHOD="GET">Put 1st urls in this box:
<textarea NAME="inputbox" id="input_box1" VALUE="" rows="4" cols="75"></textarea>
<Br>Put 2nd urls in this box:
<Br>
<textarea NAME="inputbox2" id="input_box2" VALUE="" rows="4" cols="75"></textarea>
<Br>
<INPUT id="reset" TYPE="reset">
</FORM>
Javascript
var aBox1 = [];
var aBox2 = [];
document.getElementById("Split").addEventListener("click", function () {
var urls_1 = document.getElementById("text_to_split").value.trim().split(" "),
url1 = urls_1[0] || "",
url2 = urls_1[1] || "";
if (url1.length) {
aBox1.push(url1);
}
if (url2.length) {
aBox2.push(url2);
}
document.getElementById("input_box1").value = aBox1.join(" ");
document.getElementById("input_box2").value = aBox2.join(" ");
}, false);
document.getElementById("reset").addEventListener("click", function () {
aBox1.length = 0;
aBox2.length = 0;
}, false);
On jsfiddle

Replace text in form using javascript

I have a form that has several fields. The first field is called subject. What I want to do is disable the ability for the user to type in the field, but it still show, and the text they enter into three other fields show up with spaces between the variables in the first field. Example: In this scenario: "Second_Field: John" "Third_Field: Doe" "Forth_Field: New part" then on first field, subject, it will show: John Doe New Part
Thanks for any help.

You can try the following:
<!-- HTML -->
<input type="text" id="subject" disabled="disabled">
<input type="text" id="field1">
<input type="text" id="field2">
<input type="text" id="field3">
// JavaScript
var fields = [];
for (var i = 1; i <= 3; i++) {
fields.push(document.getElementById("field" + i).value);
}
document.getElementById("subject").value = fields.join(" ");

Try this:
<script>
function UpdateText()
{
document.getElementById("subject").value =document.getElementById("Field1").value + " " + document.getElementById("Field2").value + " " + document.getElementById("Field3").value;
}
</script>
<input type="text" id="subject" disabled="disabled"/>
<input type="text" id="Field1" onchange="UpdateText()";/>
<input type="text" id="Field2" onchange="UpdateText()";/>
<input type="text" id="Field3" onchange="UpdateText()";/>

HTML:
<form>
<p><input id="subject" name="subject" disabled size="60"></p>
<p><input id="Second_Field" class="part">
<input id="Third_Field" class="part">
<input id="Fourth_Field" class="part"></p>
</form>
​
JavaScript:
var updateSubject = function() {
var outArray = [];
for (var i=0;i<parts.length;i++) {
if (parts[i].value !== '' ) {
outArray.push(parts[i].value);
}
}
document.getElementById('subject').value = outArray.join(' ');
};
var parts = document.getElementsByClassName('part');
for (var i=0;i<parts.length;i++) {
parts[i].onkeydown = updateSubject;
}
​