We Keep Coding

How can I display form data in a table on the same page

I'm a beginner to Javascript and CSS.
I'm creating a web app that gets the user data, for example, the name of the person, etc. So, I want the form to close when its submit button is pressed and then I want it to create a table of the submitter's info.
submitter's info never ends, so it should have the capability to store many data.
I used this login form to get an idea;
https://www.w3schools.com/howto/howto_css_login_form.asp
The code is below;
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function all() {
let name = document.getElementById("output").value;
var finalName = document.createElement("PARAGRAPH")
name.innerHTML(name)
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<h2>Modal Login Form</h2>
<h3 class="output"></h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="sub2.html" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Student Name</b></label>
<input type="text" id="name" placeholder="Enter Username" name="uname">
<label for="psw"><b>Class</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<label for="psw"><b>Class Number</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<div class="marks">
<label for="psw"><b>First Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Second Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Third Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
</div>
<button type="submit" onclick="all()">Done!</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>

The problem is you are using the submit button. After clicking on it, the data is being sent and the page is immediately reloaded and all filled data is deleted. The all() function is not executed at all. You need to submit the form via an ajax request so that the page is not refreshed. Here is the article about it https://www.w3schools.com/xml/ajax_intro.asp .
But it's much more convenient to send ajax requests using jQuery library (https://jquery.com).
So you can connect this library: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. There is how use ajax by jQuery: https://www.w3schools.com/jquery/ajax_ajax.asp
If you have difficulties, i can detale write your code, just ask me.

How to hide input value on input click with js?

I am trying to hide the input value of each individual input when clicked
My javascript is working fine but only targets the individual ID listed. I am looking for a more refined method that selects only the clicked input without having to repeat that same block of code 5 times targeting each different ID
$(document).ready(function() {
var text = document.getElementById('first_name');
var button = document.getElementById('first_name');
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>

You can use jquery selector and use $(this)
$(document).ready(function() {
$('input[type="text"]').on('click', function(e) {
$(this).val('');
$(this).addClass('lowercase')
})
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input,
input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit">
<input type="submit" name="submit" value="Send" id="submit">
</div>
<!-- End of Submit -->
</form>

Maybe you should consider using placeholdr instead.
$(document).ready(function() {
$('form input[type="text"]').on('click', function() {
this.value = '';
});
});
input[type=text] {
display: block;
border: none;
border-bottom: 1px solid;
width: 100%;
padding: 2rem 0 1rem;
}
input, input[type=submit] {
font-family: 'usm', sans-serif;
font-size: 0.7rem;
letter-spacing: 1pt;
text-transform: uppercase;
color: #7A7A7A;
}
input.lowercase {
text-transform: none !important;
letter-spacing: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" name="palceholder_example" id="placeholdr_example" placeholder="Place holder example">
<form method="post" action="">
<input type="text" name="first_name" id="first_name" value="First Name*">
<br>
<input type="text" name="last_name" id="last_name" value="Last Name*">
<br>
<input type="text" name="email" id="email" value="Email Address*">
<br>
<input type="text" name="phone" id="phone" value="Phone Number">
<br>
<input type="text" name="message" id="message" value="Message*">
<div class="submit" >
<input type="submit" name="submit" value="Send" id="submit">
</div><!-- End of Submit -->
</form>
</body>

Define one function with input parameter as id and call this fn in an individual input element by passing that element's id.
function clearText(id) {
var text =
document.getElementById(id);
var button =
document.getElementById(id);
button.onclick = function() {
text.value = '';
text.classList.add("lowercase");
}

How to display all required error once with required attribute

The required attribute in input type display's once at a time. Is it possible to display required notification in html5 all at once when the user submits the form?

This snippet will help you to implement form validation.
Here we are adding a data attribute data-required to identify the required field and implement the validation logic.
var $ = jQuery;
$('#form').on('submit', function(e) {
e.preventDefault();
let validation = validateForm($(this))
})
validateForm = (formElement) => {
let form = formElement;
let valid = true;
$('.error').remove();
const generalError = "<span class='error'>This Field can not be empty</span>";
form.find('.form-group').each(function(index, item) {
let formItem = $(item).find('.form-item');
// check only inputs with validation required
if (formItem.data('required')) {
let type = formItem.data('field');
let formItemLength = formItem.val().length
if (formItem.val() === '') {
$(item).append(generalError)
valid = false
}
if (formItem.attr('type') == 'checkbox' && !formItem.is(':checked')) {
$(item).append(generalError)
valid = false
}
}
})
return valid
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-item" id="name" name="name" data-field="name" data-required="required">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" class="form-item" id="lastname" name="lastname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-item" data-field="email" data-required="required">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-item" data-field="phone" data-min="6" data-max="8" data-required="required">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-item" id="password" name="password" data-field="password" data-min="6" data-max="12" data-required="required">
</div>
<div class="form-group">
<label for="agreement">Agreement</label>
<input type="checkbox" class="form-item" id="agreement" name="agreement" data-required="required">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea cols="57" id="description" name="description" rows="10" class="form-item" data-field="description"></textarea>
</div>
<div class="form-action">
<input class="form-submit" type="submit" value="Apply">
</div>
</form>

2 inline div's, 2nd one won't fit in line with the 1st one

I'm trying to get the first div, '#grp1', left-aligned and inline with the second div, '#grp2'. Both divs have 2 input elements in them which are vertically aligned within their divs.
The issue is that the grp2 div isn't scaling its width to fit onto the same line. I keep resetting its width, but the console element inspector shows it isn't reducing on the page. I've gotten them on the same line only by reducing the with of grp1. grp2 still wasn't changing. I'd like everything to be much more compact.
Thank you very much. If you have a sec, I'd appreciate some detail as to why the grp2 div isn't scaling at all; I seem to keep getting stuck on markup issues.
legend{
color: RGB(25, 115, 115);
}
.label {
float:left;
width:60%;
margin-top: 5px;
font-weight:bold;
color: RGB(25,90,90);
font-size: 18;
font-weight: 8;
font-family: 'Open Sans Condensed', sans-serif;
}
.form-text{
color: RGB(100,100,100);
font-size: 15;
font-weight: 6;
font-family: 'Open Sans Condensed', sans-serif;
margin-top: 3px;
}
.grp1{
float: left;
width: 40%;
position: relative;
}
.grp2{
position: relative;
margin-left: 45%;
}
select{
margin-bottom: 29px;
}
.err{
font-size: 15;
font-style: italic;
color: RGB(180,100,100);
}
<div id="form-input">
<form id="form">
<fieldset>
<legend class='form-text' style='font-size:20'>Hello World</legend>
<div id='grp1' style='display:inline-block' class='grp1'>
<label for='subject'style='display:block' class='label'>
Choose your subject.<br>
<input type="text" id="subject" name='subject' style="display:block" class='form-text'><br>
</label>
<label for='mode' style='display:block' class='label'>
Select your search mode.<br>
<select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)">
<option value="1">Search</option>
<option value="2">Live</option>
</select>
</label>
</div>
<div id='grp2' style='display:inline-block' class='grp2'>
<label for='startdate' style='display:block' id='startlabel' class='label'>
Choose a start date for a search, up to one week ago: <br>
<input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br>
<div name="error1" id="starterror" style="display:none" class='err'></div>
</label>
<label for='enddate' style='display:block' id='endlabel' class='label'>
Choose an end date for your search: <br>
<input type="text" id="enddate" style="display:block" class='form-text'><br>
<div name="error2" id="enderror" style="display:none" class='err'></div>
</label>
</div>
</fieldset>
</form>
</div>

Since you have made it relative, no need to give 45% margin. Just remove it, and it will work.
legend{
color: RGB(25, 115, 115);
}
.label {
float:left;
width:60%;
margin-top: 5px;
font-weight:bold;
color: RGB(25,90,90);
font-size: 18;
font-weight: 8;
font-family: 'Open Sans Condensed', sans-serif;
}
.form-text{
color: RGB(100,100,100);
font-size: 15;
font-weight: 6;
font-family: 'Open Sans Condensed', sans-serif;
margin-top: 3px;
}
.grp1{
float: left;
width: 40%;
position: relative;
}
.grp2{
position: relative;
}
select{
margin-bottom: 29px;
}
.err{
font-size: 15;
font-style: italic;
color: RGB(180,100,100);
}
<div id="form-input">
<form id="form">
<fieldset>
<legend class='form-text' style='font-size:20'>Hello World</legend>
<div id='grp1' style='display:inline-block' class='grp1'>
<label for='subject'style='display:block' class='label'>
Choose your subject.<br>
<input type="text" id="subject" name='subject' style="display:block" class='form-text'><br>
</label>
<label for='mode' style='display:block' class='label'>
Select your search mode.<br>
<select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)">
<option value="1">Search</option>
<option value="2">Live</option>
</select>
</label>
</div>
<div id='grp2' style='display:inline-block' class='grp2'>
<label for='startdate' style='display:block' id='startlabel' class='label'>
Choose a start date for a search, up to one week ago: <br>
<input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br>
<div name="error1" id="starterror" style="display:none" class='err'></div>
</label>
<label for='enddate' style='display:block' id='endlabel' class='label'>
Choose an end date for your search: <br>
<input type="text" id="enddate" style="display:block" class='form-text'><br>
<div name="error2" id="enderror" style="display:none" class='err'></div>
</label>
</div>
</fieldset>
</form>
</div>

Jquery, ordered form input and label with DOM

Small problem. I want to set the labels to the left infront of the input boxes so they are within the same line.
Any help would be great.
My HTML:
<div class="row">
<div class="col-12">
<label for="fname">First Name</label>
<input type="text" class="form-control input-lg" name="FNAME" id="FNAME">
</div>
</div>
<div class="row">
<div class="col-12">
<label for="lname">Last Name</label>
<input type="text" class="form-control input-lg" name="LNAME" id="LNAME">
</div>
</div>
Jquery I have tried:
$('.row.col-12 label').each(function() {
$(this).insertBefore( $(this).next('input') );
});
What the form looks like:
enter link description here
Some CSS:
form-group {
margin-bottom:15px;
}
.col-12 {
width:100%
}
.input-sm {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
select.input-sm {
height: 30px;
line-height: 30px;
}
textarea.input-sm {
height: auto;
}
.input-lg {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
select.input-lg {
height: 45px;
line-height: 45px;
}
textarea.input-lg {
height: auto;
}

I'm trying to understand your problem but simply put your DOM into the fiddle, each label is in the same line as each textbox.
jsfiddle.net/TWfDs
But if you meant that first name and last name should be in the same one line, you can try below.
$(".row").css({"display":"inline-block"});
http://jsfiddle.net/TWfDs/1/
----- update ----
If you can still style via js and it is acceptable to set the static width for the textbox then label and textbox line up.
http://jsfiddle.net/TWfDs/10/
$("#FNAME").css({"display":"inline-block", "width":"300px"});