We Keep Coding

Making div tag invisible on page load and display several div tags on button click

I want to make a div tag invisible when the page loads and make it visible everytime a button is clicked. This is what I have on my page:
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>
Whenever AddItem button is clicked, I want to display one Div tag/item so if I click "Add Item" button, I want to make visible only div tag "realProp1", now if I click "AddItem" button again, I want to make visible "realProp2" div tag. Below is what I have, the code is working for one div tag, but not for several div tags:
<script>
window.onload = function () {
document.getElementById("realProp1").style.display = 'none';
document.getElementById("realProp2").style.display = 'none';
document.getElementById("realProp3").style.display = 'none';
};
function Additem() {
document.getElementById("realProp1").style.display = "";
};
</script>
How can I make one div tag visible at each button click.

You can use :eq() to compare which div to show and save some variable for holding the last count value or you can just use $("div[id^=realProp]").filter(":hidden").first().show() for filtering the hidden divs and showing first div always.
Demo Code :
$('div[id^=realProp]').hide();
var count = 0;
$('.show_div').on('click', function() {
$('div[id^=realProp]:eq(' + count + ')').show(); //show div
count++; //for next div to show
//or without count ..use below
//show first div..by filtering hidden divs
//$("div[id^=realProp]").filter(":hidden").first().show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" class="btn btn-primary show_div">Add Item</button>
Without jquery :
var length = document.querySelectorAll("div[id^='realProp']").length;
var count = 1; //for holding last visible div count
function AddItem() {
if (count <= length) {
document.getElementById("realProp" + count).style.display = "block"; //show..
count++;
} else {
console.log("No more divs")
}
};
div[id^='realProp'] {
display: none
}
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

let count = 1;
window.onload = function() {
document.getElementById("realProp1").style.display = 'none';
document.getElementById("realProp2").style.display = 'none';
document.getElementById("realProp3").style.display = 'none';
};
function AddItem() {
for (let i = 1; i < 4; i++) {
document.getElementById("realProp" + i).style.display = "none";
}
document.getElementById("realProp" + count).style.display = "";
if (count <3 ){
count++;
} else {
count = 1;
}
};
<div id="realProp1">
<input name="FirstName[0]" class="form-control" />
</div>
<div id="realProp2">
<input name="FirstName[1]" class="form-control" />
</div>
<div id="realProp3">
<input name="FirstName[2]" class="form-control" />
</div>
<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

How to make complete form in which background color of button changes when user starts typing in input field with javascript , html and css?

const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");
inputfield.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
btn.disabled = true;
btn.style.backgroundColor = "grey";
} else {
btn.disabled = false;
btn.style.backgroundColor = "orange";
}
})
<div class="container">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
Now the issue is that it only works for one input and the associated button field
it does not work for another pair of input field and button , so what changes should i make in the above javascript code in which it runs for as many as input field and button i want?
Please can anyone help me in this. Thank you
If you have full jquery code it's also accepted.

My approach was to put the input and button in a div with a custom class.
And just loop over every div, get the child inputs and buttons and just use your existing code for every div.
const btns = document.getElementsByClassName('inputButton');
for (let i = 0; i < btns.length; i++) {
let input = btns[i].querySelector('input');
let button = btns[i].querySelector('button');
input.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
button.disabled = true;
button.style.backgroundColor = "grey";
} else {
button.disabled = false;
button.style.backgroundColor = "orange";
}
});
}
<div class="container">
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>

Just wrap it into a additional div element and iterate trough. For each "input-group" you can add an event listener to the input child and edit the style of the button child.
document.querySelectorAll('.input-group').forEach((group) => {
let input = group.querySelector('input');
let button = group.querySelector('button');
input.addEventListener('keyup', () => {
if(input.value !== "") {
button.disabled = false;
} else {
button.disabled = true;
}
});
});
#btn[disabled] {
background: red;
}
#btn {
background: green;
}
<div class="container">
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>

You can make a loop with a class to add an event listener to every input you want.
You can use data-whateverYouWant to link the button to the input
Also, should make your style in css.
let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("keyup", function(e) {
let btn = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
if (this.value === "") {
btn.disabled = true;
} else {
btn.disabled = false;
}
})
}
button{
background-color:orange;
}
button:disabled,
button[disabled]{
background-color:grey;
}
<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>
<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>

Javascript show div does not work when I press button

I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>

user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>

<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.

Submitting form depend of color clicked

i have form that's announcing user for error, warning or new content on my site. I have three buttons on class ann-right and each button have its color. When i click the button, the button input on class ann-left changed to color were clicked. What i want to ask is, how do i submit the form depend of color selected. Red is for "Error announcement", Green is for "Warning announcement" and Blue is for "New announcement". Red = #D91E18
Green = #3FC380
Blue = #5BBBFF
<div class="ann-left">
<form method="post" id="ann">
<input id="announce-text" type="text" name="" placeholder="What's new?"></input>
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post"></input>
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
}
</script>

You can use one input hidden to pass the type of annoncement to your form.
Then you submit it normally.
<div class="ann-left">
<form method="post" action="announcement_post.php" id="ann">
<input type="text" name="announcement_description" id="announce-text" placeholder="What's new?">
<input type="hidden" name="announcement_type" id="announcement_type">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"> </button>
<button id="green" onclick="color2()" class="tooltip color"title="Warning!" > </button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"> </button>
</div>
<script>
function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
document.getElementById("announcement_type").value="Error announcement";
sessionStorage.setItem('col1', "#D91E18");
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
document.getElementById("announcement_type").value="Warning announcement";
sessionStorage.setItem('col2', "#3FC380");
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
document.getElementById("announcement_type").value="New announcement";
sessionStorage.setItem('col3', "#5BBBFF");
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
</script>
announcement_post.php:
<?php
if(!isset($_POST["announcement_type"])) die("Post was not sent.");
echo $_POST["announcement_type"];
echo '<br>';
echo $_POST["announcement_description"];

There are a couple of issues here. First you are not practicing DRY (Dont Repeat Yourself), which is very important when creating functions. Create one function that handles your setColor function and send the selected colors on the actual buttons clicked. Once thats done, you can focus on "submitting your form". When you submit a form it normally expects you to have a buttom with type submit. Since you dont have that, it will not submit the form. What I would do is place your onsubmit() on the form element as such:
<div class="ann-left">
<form method="post" id="ann" onsubmit="return submitform(this);">
<input id="hidden-input" type="hidden" name="color_selected" value="">
<input id="announce-text" type="text" name="" placeholder="What's new?">
<input id="submit-post" type="submit" name="" value="Post">
</form>
</div>
<div class="ann-right">
<button id="red" onclick="setColor('#D91E18')" class="tooltip color" title="Error!"></button>
<button id="green" onclick="setColor('#3FC380')" class="tooltip color"title="Warning!" ></button>
<button id="blue" onclick="setColor('#5BBBFF')" class="tooltip color" title="New!"></button>
</div>
<script>
var $btn = document.getElementById("submit-post");
var $hidden = document.getElementById("hidden-input");
function setColor(color) {
$btn.style.backgroundColor = color;
$hidden.value = color;
}
function submitform(form) {
alert(form.color_selected.value);
return false;
}
</script>

function color1() {
document.getElementById("submit-post").style.backgroundColor = "#D91E18";
sessionStorage.setItem('col1', "#D91E18");
document.getElementById("hidden_field").value = 'error';
submitform();
}
function color2() {
document.getElementById("submit-post").style.backgroundColor = "#3FC380";
sessionStorage.setItem('col2', "#3FC380");
document.getElementById("hidden_field").value = 'warning';
submitform();
}
function color3() {
document.getElementById("submit-post").style.backgroundColor = "#5BBBFF";
sessionStorage.setItem('col3', "#5BBBFF");
document.getElementById("hidden_field").value = 'new';
submitform();
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
color3(sessionStorage.getItem('col3'));
function submitform() {
var form = document.getElementById("ann");
var data = new FormData(form);
console.log(data);
//var req = new XMLHttpRequest();
//eq.send(data);
form.submit();
}
#red {
background: #D91E18;
}
#green {
background: #3fc380;
}
#blue {
background: #5bbbff;
}
<form method="post" id="ann">
<div class="ann-left">
<input id="announce-text" type="text" name="" placeholder="What's new?" />
<input id="submit-post" type="button" name="" onsubmit="submitform();" value="Post" />
<input type="hidden" id="hidden_field" />
</div>
<div class="ann-right">
<button id="red" onclick="color1()" class="tooltip color" title="Error!"></button>
<button id="green" onclick="color2()" class="tooltip color" title="Warning!"></button>
<button id="blue" onclick="color3()" class="tooltip color" title="New!"></button>
</div>
</form>

How to hide or show html tags with javascript

I have 2 div tags in my HTML code and I have defined a class by which I can expand or hide them.The problem that I have is the fact that when I click on one of the the value of the other changes.
<HTML>
<BODY>
<FORM>
<script language="JavaScript">
function setVisibility(id) {
if (document.getElementById('btnshowhide').value == '-') {
document.getElementById('btnshowhide').value = '+';
document.getElementById(id).style.display = 'none';
} else {
document.getElementById('btnshowhide').value = '-';
document.getElementById(id).style.display = 'inline';
}
}
</script>
<FIELDSET style="width: 600px;">
<LEGEND>
<input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div1');" ;/>Insert Data:</LEGEND>
<DIV id="div1" style="display: none;">
<LABEL for="351fef76-b826-426f-88c4-dbaaa60f886b">Name:</LABEL>
<TEXTAREA id="351fef76-b826 -426f-88c4-dbaaa60f886b" name="txtname" value="Name" type="text" title="Name:">Name</TEXTAREA>
<BR>
<LABEL for="02973dcc-5677-417c-a9bf-1578f58923ef">Family:</LABEL>
<TEXTAREA id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtFamiy" value="Family" type="text" title="Family:">Family</TEXTAREA>
<BR>
</DIV>
</FIELDSET>
<BR>
<FIELDSET style="width: 600px;">
<LEGEND>
<input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div2');" ;/>Insert Data:</LEGEND>
<DIV id="div2" style="display: none;">
<LABEL for="d8876943-5861-4d62-9249-c5fef88219fa">Type of property</LABEL>
<SELECT id="d8876943-5861-4d62-9249-c5fef88219fa" name="PropertyType" value="" type="select" title="Type of property"></SELECT>
<BR>
</DIV>
</FIELDSET>
<BR>
</FORM>
</BODY>
</HTML>
I tried changing the Ids of my buttons but nothing changed.

change you buttons to --
<input type="button" name="type" id="btnshowhide1" value="+" onclick="setVisibility('div1',this.id);";/>
and
<input type="button" name="type" id="btnshowhide2" value="+" onclick="setVisibility('div2',this.id);";/>
And use following function --
function setVisibility(id,buttonid) {
if(document.getElementById(buttonid).value=='-'){
document.getElementById(buttonid).value = '+';
document.getElementById(id).style.display = 'none';
}
else{
document.getElementById(buttonid).value = '-';
document.getElementById(id).style.display = 'inline';
}
}
DEMO

First of all, you shouldn`t have two elements with same ID. You should use class for it.
And it happens because you have both buttons with id="btnshowhide" so when you are trying to do document.getElementById('btnshowhide').value it matches you both buttons.
you can do something like this
<script language="JavaScript">
function setVisibility(id,input)
{
if(input.value=='-')
{
input.value = '+';
document.getElementById(id).style.display = 'none';
}
else
{
input.value = '-';
document.getElementById(id).style.display = 'inline';
}
}
</script>
and in your inputs
onclick="setVisibility('div1', this);"
onclick="setVisibility('div2', this);"