Develop Reference

Clone div and delete div

I don't understand why all Functions are not working. Normally if you click on the button "+ Loc de munca" needs to appear input and then if you click further on the "+ Loc de munca" need to clone all input. Also if you click on the "Sterge" need everything to delete. Here is the code:
var itm = document.getElementById("myList4").getElementsByTagName("div")[0];
function appearafter2() {
document.getElementById("buttonappear2").style.display = "block";
document.getElementById("button2").style.display = "block";
document.getElementById("hinzufuegen2").style.display = "none";
}
function myFunction2() {
var itm = document.getElementById("myList4").getElementsByTagName("div")[0];
var cln = itm.cloneNode(true);
document.getElementById("myList3").appendChild(cln);
}
function deleteFunction2() {
var list3 = document.getElementById("myList3");
var divs = Array.from(list3.getElementsByTagName("div"));
// If the number of divs is 4, it means we're removing the last
// cloned div, hide the delete button.
if (divs.length === 4) {
document.getElementById("button2").style.display = "none";
}
var lastDivToDelete2 = divs[divs.length - 1];
list3.removeChild(lastDivToDelete2);
}
function allFunction2() {
myFunction2();
appearafter2();
}
#button2 {
display: none;
}
#buttonappear2 {
display: none;
}
.input-data2 {
width: 49%;
}
.label-data2 {
width: 50%;
}
#myList3 {
display: none;
}
#label-job-input-inline {
display: inlin-block;
}
.label-job-input {
display: block;
}
<div id="hinzufuegen2" onclick="allFunction2()">
+ Loc de munca
</div>
<div id="myList3">
<div id="button2" onclick="deleteFunction2()">Șterge</div>
<div id="myList4">
<div id="addingNewJob">
<label class="label-job-input" for="job-input-1">Numele firmei</label>
<select size="1" type="text" id="job-input-1" /><option value="scoala_generala">școala generală</option>
<option value="scoala">școală profesională</option>
<option value="lic">liceu</option>
<option value="fac">facultate</option></select>
<label class="label-job-input" for="job-input-2">Postul ocupat
</label>
<input size="1" type="text" id="job-input-3" /><br />
<label class="label-data2" for="job-input-3">din data</label><label class="label-data2" for="job-input-4">până la data</label><br />
<input type="number" style="width: 48%" />
<input type="number" style="width: 50%; margin-left: 6px" />
</div>
</div>
</div>
<div onclick="allFunction2()" id="buttonappear2">
+ Loc de munca
</div>
Hello, I don't understand why all Functions are not working. Normally if you click on the button "+ Loc de munca" needs to appear input and then if you click further on the "+ Loc de munca" need to clone all input. Also if you click on the "Sterge" need everything to delete. Here is the code:

Updated the answer, check if this is what you are trying to achieve.
function myFunction2() {
var cln = '<div class="list-item">'+
'<div id="addingNewJob">'+
'<label class="label-job-input" for="job-input-1">Numele firmei</label>'+
'<select size="1" type="text" id="job-input-1" /></div>';
document.getElementById("myList3").innerHTML+=cln;
document.getElementById("buttonappear2").classList.remove('hide');
document.getElementById("button2").classList.remove('hide');
document.getElementById("hinzufuegen2").classList.add('hide');
}
function deleteFunction2() {
var divs = Array.from(document.querySelectorAll(".list-item"));
if(divs.length>0){
var lastDivToDelete2 = divs[divs.length - 1];
document.getElementById("myList3").removeChild(lastDivToDelete2);
}
if(divs.length==1){
document.getElementById("buttonappear2").classList.add('hide');
document.getElementById("button2").classList.add('hide');
document.getElementById("hinzufuegen2").classList.remove('hide');
}
}
.hide{
display: none;
}
.input-data2 {
width: 49%;
}
.label-data2 {
width: 50%;
}
#label-job-input-inline {
display: inlin-block;
}
.label-job-input {
display: block;
}
<div id="hinzufuegen2" onclick="myFunction2()">+ Loc de munca</div>
<div id="myList3">
<div id="button2" class="hide" onclick="deleteFunction2()">Șterge</div>
</div>
școala generală școală profesională liceu facultate
<label class="label-job-input" for="job-input-2">Postul ocupat</label>
<form>
<input size="1" type="text" id="job-input-3" />
<br />
<label class="label-data2" for="job-input-3">din data</label>
<label class="label-data2" for="job-input-4">până la data</label>
<br />
<input type="number" style="width: 48%;" />
<input type="number" style="width: 50%; margin-left: 6px;" />
</form>
<div onclick="myFunction2()" class="hide" id="buttonappear2">+ Loc de munca</div>

button to be visible after it fulfilled requirements

Requirements:
When more than one button is clicked, users will then be able to click on "proceed-button".
Current situation:
I am making a cinema web page. Users will get to choose their preferred seats. When the seat is chosen, they will then be able to click on "proceed-button" to pay. However, i have difficulty implementing this function. I know that i needed to use the visibility-hidden function.
The following is my code:
var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
if (this.classList.contains("active")) {
count++;
if (this.classList.contains("active") > 1) {
function proceedButton() {
document.getElementById("pButton").style.display = "visible";
}
} else {
document.getElementById("pButton").style.display = "block";
}
} else {
count--;
}
disp.innerHTML = count;
})
}
function proceedButton() {
var x = document.getElementById("payment-section");
if (x.style.display === "none") {
x.style.display = "block";
}
}
.button {
background-color: #423F3E;
height: 30px;
width: 30px;
margin: 5px;
border-radius: 10px;
border: none;
float: left;
}
.button.active {
background-color: #F7EA00 !important;
}
<div class="seats-layout">
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
</div>
<p> Button Clicked <span id="display">0</span> Times</p>
<input type="submit" value="Proceed" onclick="proceedButton()" id="pButton" class="proceed-button" />
```
<div id="payment-section" style="display: none">
<h1>Payment</h1>
</div>
```

Demo page
use document.querySelectorAll to returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
function proceedButton() {
var x = document.getElementById("payment-section");
var item_click = document.querySelectorAll('.active').length;
if (item_click>1) {
x.style.display = "block";
}else{
x.style.display = "none";
}
}

HTML javascript form - what other ways can I code this javascript function with form validation

I have written the below code to get the form data to be displayed on the page. What other methods can I use to re-write the below code to include form validation.
I'm a beginner to javascript and just needed some guidance or a code snippet to help.
JSFiddle link: https://jsfiddle.net/jphfzgdq/
<head>
<script type="text/javascript">
function collect(frm) {
document.getElementById("results").innerHTML+="Name: "+frm.nm.value+"<br>Age: "+frm.ag.value+"<hr>"
frm.reset();
}
</script>
<style>
/* #entries,#results{float:left} */
</style>
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="text" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>
</body>

I think this is what you are asking for
<head>
<script type="text/javascript">
var totalAge = 0;
function collect(frm) {
var name = frm.nm.value;
var age = parseInt(frm.ag.value);
totalAge += age;
try {
if (name == "" || name == null) {
alert('Enter your name');
}
else if (age == "" || age == null || age == NaN) {
alert('Enter a valid age');
}
else {
document.getElementById("results").innerHTML+="Name: "+ name +"<br>Age: "+ age + "<br>total age: "+ totalAge +"<hr>"
frm.reset();
}
}
catch (e) {
console.log(e);
}
}
</script>
<style>
/* #entries,#results{float:left} */
</style>
</head>
<body>
<div id="entries">
<form name ="myform">
Enter name: <input type="text" name="nm"/><br>
Enter age: <input type="number" name="ag"/><br>
<input type="button" value="display" onclick="collect(this.form)"/>
</form>
</div>
<div id="results"></div>
</body>

I just made a simple age validation.
function collect(frm) {
if (Number(frm.ag.value) >= 18) {
document.getElementById("results").innerHTML +=
"Name: " + frm.nm.value + "<br>Age: " + frm.ag.value + "<hr>";
document.getElementById("warn").textContent = "";
frm.reset();
} else {
document.getElementById("warn").textContent =
"18+ Are only allowed!";
}
}
#warn {
color: red;
}
<div id="entries">
<form name="myform">
Enter name: <input type="text" name="nm" /><br> Enter age: <input type="number" name="ag" /><br>
<input type="button" value="display" onclick="collect(this.form)" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>
EDIT:
You were not doing it in a proper way so tried to make it better.
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
const btnInput = document.getElementById("btnInput");
const results = document.getElementById("results");
const warn = document.getElementById("warn");
const ageCounter = document.getElementById("totalAgeCounter");
let ageCount = 0;
function collectData() {
if (nameInput.value !== "" && Number(ageInput.value) >= 18) {
results.innerHTML += `Name: ${nameInput.value} <br>Age: ${ageInput.value} <hr>`;
ageCount += Number(ageInput.value);
ageCounter.textContent = ageCount;
warn.textContent = "";
nameInput.value = "";
ageInput.value = "";
} else {
warn.textContent = "18+ Are only allowed!";
}
}
btnInput.addEventListener("click", collectData);
#warn {
color: red;
}
#totalAgeCounter {
width: 50px;
height: 50px;
display: grid;
place-items: center;
background-color: blue;
position: absolute;
top: 20px;
right: 20px;
color: #fff;
border-radius: 50%;
font-weight: bolder;
font-size: 18px;
}
<div id="entries">
<form name="myform">
Enter name:
<input type="text" id="nameInput" />
<br /> Enter age:
<input type="number" id="ageInput" />
<br />
<input type="button" value="display" id="btnInput" />
</form>
</div>
<h4 id="warn"></h4>
<div id="results"></div>
<div id="totalAgeCounter"></div>

I add the max value of three input numbers and it's worked but how to add the increment decrement button without losing the max value?

I need the addition of a three-element is 8, with click + and - button. But, I don't want that it will increase each element up to 8.
// Addtion of select items LINK - https://stackoverflow.com/questions/49644837/set-max-value-of-three-input-numbers-together
var max = 8;
var $inputs = $('input');
function sumInputs($inputs) {
var sum = 0;
$inputs.each(function() {
sum += parseInt($(this).val(), 0);
});
return sum;
}
$inputs.on('input', function(e) {
var $this = $(this);
var sum = sumInputs($inputs.not(function(i, el) {
return el === e.target;
}));
var value = parseInt($this.val(), 10) || 0;
if (sum + value > max) $this.val(max - sum);
});
//Increment Decrement value
function up(max) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) + 1;
if (document.getElementById("myNumber").value >= parseInt(max)) {
document.getElementById("myNumber").value = max;
}
}
function down(min) {
document.getElementById("myNumber").value = parseInt(document.getElementById("myNumber").value) - 1;
if (document.getElementById("myNumber").value <= parseInt(min)) {
document.getElementById("myNumber").value = min;
}
}
function up2(max) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) + 1;
if (document.getElementById("myNumber2").value >= parseInt(max)) {
document.getElementById("myNumber2").value = max;
}
}
function down2(min) {
document.getElementById("myNumber2").value = parseInt(document.getElementById("myNumber2").value) - 1;
if (document.getElementById("myNumber2").value <= parseInt(min)) {
document.getElementById("myNumber2").value = min;
}
}
function up3(max) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) + 1;
if (document.getElementById("myNumber3").value >= parseInt(max)) {
document.getElementById("myNumber3").value = max;
}
}
function down3(min) {
document.getElementById("myNumber3").value = parseInt(document.getElementById("myNumber3").value) - 1;
if (document.getElementById("myNumber3").value <= parseInt(min)) {
document.getElementById("myNumber3").value = min;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select-1">
<button type="submit" value="-" onclick=" down('0')" class="sub" id="">-</button>
<input type="number" id="myNumber" value="0" name="qty" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up('8')" class="add">+</button>
</div>
<div class="select-2">
<button type="submit" value="-" onclick=" down2('0')" class="sub">-</button>
<input type="number" id="myNumber2" value="0" name="qty2" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up2('8')" class="add">+</button>
</div>
<div class="select-3">
<button type="submit" value="-" onclick=" down3('0')" class="sub" id="">-</button>
<input type="number" id="myNumber3" value="0" name="qty3" max="8" min="0" step="1"/>
<button type="submit" value="+" onclick="up3('8')" class="add">+</button>
</div>
Currently, the max value is 8. I would like to get the max value with the + and - button as well.
How can I solve this with javascript or jquery?
Here, there is a link below I follow for increment and decrement.
https://stackoverflow.com/a/49645518/15412266

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<button type="submit" value="+" onclick="minusoperation(1)" class="minus">-</button>
<input type="number" class="numbers" id="number1" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(1)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(2)" class="minus">-</button>
<input type="number" class="numbers" id="number2" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(2)" class="plus">+</button>
<button type="submit" value="+" onclick="minusoperation(3)" class="minus">-</button>
<input type="number" class="numbers" id="number3" min="0" max="8" onchange="inputNumber(this)" data-prevvalue=0 />
<button type="submit" value="+" onclick="plusoperation(3)" class="plus">+</button>
</div>
<script type="text/javascript">
function inputNumber(el)
{
var myElements = document.getElementsByClassName('numbers');
var sum = 0;
for (var i=0;i<myElements.length;i++) {
if(myElements[i].value)
sum = sum+parseInt(myElements[i].value);
}
if(sum<=8)
{
el.dataset.prevvalue = el.value;
} else {
el.value = el.dataset.prevvalue;
}
}
function minusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)-1;
} else {
el.value = 0;
}
el.onchange();
}
function plusoperation(inputNumber)
{
var el = document.getElementById('number'+inputNumber);
if(parseInt(el.value))
{
el.value = parseInt(el.value)+1;
} else {
el.value = 1;
}
el.onchange();
}
</script>
</body>
</html>

Displaying a name using Javascript

Am new to javascript and doing my student project. I have created a sample page where user enters the name of a place..
He can enter a maximum of 4 places.. I Just like to have a text of "Place A" on the top when user is entering 1st place and when he clicks on "Add Another Place" then "Place B" needs to be displayed to enter text and same like "Place C" and "Place D".
Here is my code
var i = 0;
function isNumericKey(e) {
if (window.event) {
var charCode = window.event.keyCode;
} else if (e) {
var charCode = e.which;
} else {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function add() {
var a = document.getElementById("ad").value;
// alert('Please Enter Details');
if (a != 'null' || a != '') {
i++;
if (i == 1) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
document.getElementById("Place2").required = true;
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "none";
} else if (i == 2) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
document.getElementById("Place3").required = true;
document.getElementById("Place4").style.display = "none";
} else if (i == 3) {
//document.getElementById("input").reset();
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("Place4").required = true;
document.getElementById("ad").style.display = "none";
}
}
}
<form action="abc.php" method="post">
<table width="600" ;>
<tr>
<td><font size=4px><label>Place</label></font>
<br>
<br>
</td>
<td>
<input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" required="true" />
<br>
</td>
<td>
<input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
<td>
<input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20vw;height:30px;font-size:14pt;" onkeypress="return isNumericKey(event);" />
<br>
</td>
</tr>
<td>
<input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" style="display: block;
height: 25px;
width: 175px;
border-radius: 25px;
background-color: #008CBA;
color: #fff;
border: #008CBA;
cursor: pointer;" />
Let me know how to do this..

There are lots of syntax error in your HTML code, anyways beside that the solution to your problem is quite simple. I have written the following script to acquire the functionality required
<script type="text/javascript">
var i = 1;
function add() {
if (i == 1)
{
document.getElementById("Place1").style.display = "none";
document.getElementById("Place2").style.display = "block";
i++;
}
else if(i==2)
{
document.getElementById("Place2").style.display = "none";
document.getElementById("Place3").style.display = "block";
i++;
}
else if (i == 3) {
document.getElementById("Place3").style.display = "none";
document.getElementById("Place4").style.display = "block";
document.getElementById("ad").style.display = "none";
}
}
</script>
And below is my HTML code
<table>
<tr>
<td><label>Place</label></td>
<td><input type="text" name="Place1" id="Place1" value="" style="display:block; width: 20px;height:30px;font-size:14pt;" placeholder="place1"/></td>
<td><input type="text" name="Place2" id="Place2" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place2" /></td>
<td><input type="text" name="Place3" id="Place3" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place3" /></td>
<td><input type="text" name="Place4" id="Place4" value="" style="display:none; width: 20px;height:30px;font-size:14pt;" placeholder="place4" /></td>
</tr>
<tr>
<td><input type="button" name="Add Another place" id="ad" value="Add Another place" onclick="add();" /></td>
</tr>

Something like that ???
var MAX_PLACES = 4;
var currentEditPlace = 0;
function editPlace(index)
{
var places = document.getElementById('places');
var place = places.getElementsByTagName("li")[index];
place.style.display = 'block';
var span = place.getElementsByTagName("span")[0];
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("value", "");
span.appendChild(input)
/** Return key => show next place */
input.onkeydown = function(e) {
/** Validation */
if (this.value != "" && e.keyCode == 13) {
addNewPlace();
}
}
/** Auto focus new input */
input.focus();
}
function addNewPlace() {
if (currentEditPlace+1 < MAX_PLACES) {
currentEditPlace++;
editPlace(currentEditPlace);
}
}
/** Start editing place A */
editPlace(currentEditPlace);
<ul id="places">
<li style="display:none;">Place A: <span></span></li>
<li style="display:none;">Place B: <span></span></li>
<li style="display:none;">Place C: <span></span></li>
<li style="display:none;">Place D: <span></span></li>
</ul>
<input type="button" value="Add new place" onclick="addNewPlace()"/>

you need to add jquery library
<ol></ol>
<button id="btn2">Append list item</button>
try this..
$(document).ready(function(){
$("#btn2").click(function(){
var count_cls = $('.munna').length;
if(count_cls<4)
{
$("ol").append("<li class='munna'>Place "+count_cls+"</li>");
}else
{
alert('max reached');
}
});
});
i have given for li you just change it to button whatever you want
chttK :http://jsfiddle.net/6yLpw9jv/2/