We Keep Coding

hide various buttons with different div Javascript within a form

this is my code
press to hide , then press to display
<script type="text/javascript">
var clic = 1;
function hideFecha(){
if (clic == 1){
document.getElementById('fecha').style.display='none';
clic = clic + 1;
} else {
document.getElementById('fecha').style.display = 'block';
clic = 1;
}
}
</script>
//press to hide , then press to display
<script type="text/javascript">
var click = 1;
function hidePerson(){
if (click == 1){
document.getElementById('person').style.display='none';
click = click + 1;}
else{
document.getElementById('person').style.display = 'block';
click = 1;
}
}
</script>
my form
<g:form controller="SoliCon" action="save" >
<fieldset id="solContri" class="form">
<div>
<fieldset id="solContri" class="buttons">
<center><input type="button" name="fecha" value="FECHA" onclick="hideFecha()"/></center>
</fieldset>
<div id="fecha" >
<g:render template="formfecha"/>
<br>
</div>
</div>
Stylish button hides the div
<div>
<fieldset id="solContri" class="buttons">
<input type="button" name="person" value="PERSON" onclick="hidePerson()"/>
</fieldset>
<div id="person">
<g:render template="persona"/>
</div>
</div>
</div>
</fieldset>
</g:form>
Press to hide then press to display The catch is that when there are two or more templates javascript code does not work.
ERROR hidePerson is not defined , ERROR: hideFecha is not defined

You have a couple issues with your code.
1.) You have multiple elements with the same id ( solContri )
2.) You have an extra closing div tag
The errors you were receiving were due to the duplicate ID.
See the code below. I believe it is what you are after.
$("#solContri-person").click(function(){
$("#person").hide();
});
$("#solContri-fecha").click(function(){
$("#fecha").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<fieldset id="solContri" class="form">
<div>
<fieldset id="solContri-fecha" class="buttons">
<center><input type="button" name="fecha" value="FECHA" /></center>
</fieldset>
<div id="fecha" >
<br>
</div>
</div>
<div>
<fieldset id="solContri-person" class="buttons">
<input type="button" name="person" value="PERSON" />
</fieldset>
<div id="person">
<br/>
</div>
</div>
</fieldset>

jquery next() reference to specific ul's li

I'm working on a multi stage form with the following enabling the next/previous button to transit the form submission from one stage to the other:
$("input[name='next']").click(function(){
var output = validate();
if(output) {
var current = $("#signup-step.active");
var next = current .next(); //Just use .next() here to get the nextSibling of this li
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("input[name='back']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
next.addClass("active");
/* if($(".active").attr("id") == $("#signup-step.li").last().attr("id")) {
$("input[name='next']").hide();
$("input[name='finish']").show();
} */
if ( next.is(':last-child') ) {
$("input[name='next']").hide();
$("input[name='finish']").show();
}
}
}
});
$("input[name='back']").click(function(){
var current = $(".active");
var prev = $(".active").prev("#signup-step.li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("input[name='next']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
prev.addClass("active");
/*if($(".active").attr("id") == $("#signup-step.li").first().attr("id")) {
$("input[name='back']").hide();
}
*/
if ( next.is(':last-child') ) {
$("input[name='back']").hide();
}
}
});
By #signup-step:li I'm trying to refer to the li elements in a specific UL element because there two other UL element on the page: 1) UL of main menu, 2) UL of sidebars. Now since the main menu's UL comes before the form itself, the next/back button activate the menu items of the main menu rather the form stages. So being able to specify the UL referred will resolve this.
Kindly advise on the the correct for mat for selecting #signup-step:li in the code above?
Here is the form:
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
<form name="frmRegistration" id="signup-form" method="post" enctype="multipart/form-data" action="sendemail.php">
<div id="initiate-field">
<label>Name of Organization</label><span id="coyname-error" class="signup-error"></span>
<div><input type="text" name="coyname" id="coyname" class="demoInputBox"/></div>
<label>Certificate of Incorporation No.</label><span id="cacnum-error" class="signup-error"></span>
<div><input type="text" name="cacnum" id="cacnum" class="demoInputBox"/></div>
<label>Registered Office Address</label><span id="regofficeaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="regofficeaddy" id="regofficeaddy" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Operations Address</label><span id="opsaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="opsaddy" id="opsaddy" class="demoInputBox" class = "max10"></textarea>
</div>
</div>
<div id="strive-field" style="display:none;">
<label>Location of workshop/facility if different from office address given in the Structure Section:</label><span id="facilityloc-error" class="signup-error"></span>
<div>
<textarea cols="60" rows="8" name="facilityloc" id="facilityloc" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Size of facility (in sq meters):</label><span id="facilitysize-error" class="signup-error"></span>
<div><input type="text" name="facilitysize" id="facilitysize" class="demoInputBox"/></div>
<label>Does your organization own or hire equipment:</label>
<div>
<input type="radio" name="facilityownhire" id="facilityownhire" value="Own"> Own
<input type="radio" name="facilityownhire" id="facilityownhire" value="Hire"> Hire <span id="facilityownhire-error" class="signup-error"></span>
</div>
</div>
<div id="end-field" style="display:none;">
<label>Does your Organization have an HSE Manual?</label>
<div>
<input type="radio" name="hsemanual" id="hsemanual" value="Yes"> Yes
<input type="radio" name="hsemanual" id="hsemanual" value="No"> No <span id="hsemanual-error" class="signup-error"></span>
</div>
<div id="hseevidenceBOX">
<label>If yes, please attach evidence</label><span id="hseevidence-error" class="signup-error"></span>
<div>
<input type="file" name="vendorfile[]" id="hseevidence" class="demoInputBox" />
</div>
</div>
<label>Does your Organization have a Safety Policy?</label>
<div>
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="Yes"> Yes
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="No"> No <span id="orgsafepolicy-error" class="signup-error"></span>
</div>
</div>
<div>
<input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
<input class="btnAction" type="button" name="next" id="next" value="Next">
<input class="btnAction" type="submit" name="finish" id="finish" value="Send" style="display:none;">
</div>
</form>

Thanks everyone for responding. I solve the problem of conflict with the main menu of the page I change the .active class to .here in the UL HTML, CSS and jquery script. I also reliazed from this fiddle http://jsfiddle.net/GrahamWalters/sgNH4/2/ i gained from another thread that the next("#signup-step.li"); should be next("#signup-step li");
UL HTML
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
CSS
#signup-step li.here{background-color:#FF0000;}
.here{color:#FFF;}
JQUERY
$("#next").click(function(){
var output = validate();
if(output) {
var current = $(".here");
var next = $(".here").next("#signup-step li");
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("#back").show();
$("#finish").hide();
$(".here").removeClass("here");
next.addClass("here");
if($(".here").attr("id") == $("#signup-step li").last().attr("id")) {
$("#next").hide();
$("#finish").show();
}
}
}
});
$("#back").click(function(){
var current = $(".here");
var prev = $(".here").prev("#signup-step li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("#next").show();
$("#finish").hide();
$(".here").removeClass("here");
prev.addClass("active");
if($(".here").attr("id") == $("li").first().attr("id")) {
$("#back").hide();
}
}
});

push down content when hidden div become to be visible?

Got this code, and I got a hidden divs which are unhidden when user click on one of radio buttons. What I would like to achieve is that when hide div will become visible, than button will be push down by this div depends of course of dive height ? what is the best way to get this done ?
<head>
<script type="text/javascript">
function displayForm(c){
if(c.value == "1"){
document.getElementById("form1").style.visibility='visible';
document.getElementById("form2").style.visibility='hidden';
}
else if(c.value =="2"){
document.getElementById("form1").style.visibility='hidden';
document.getElementById("form2").style.visibility='visible';
}
}
</script>
<style type="text/css">
#divOne{
position:absolute;
width:70px;
height:150px;
border: 1px solid #000;
}
</style>
</head>
<body>
<form>
<label>Form 1<input value="1" type="radio" name="formselector" onclick="displayForm(this)" /></label>
<label>Form 2<input value="2" type="radio" name="formselector" onclick="displayForm(this)" /></label>
</form>
<div style="visibility:hidden" id="form1">
<div id="divOne"> Message 1 </div>
</div>
<div style="visibility:hidden" id="form2">
<div id="divOne"> Message 2 </div>
</div>
<div>
<input type="submit" value="ClickMe"/>
</div>
</body>

Look at this: http://jsfiddle.net/WU9ZJ/2/
You need to use display : none; and display : block;
Remove the position:absolute; from #divOne
This should be you function:
function displayForm(cElem)
{
if(cElem.value == "1"){
document.getElementById("form1").style.display = 'block';
document.getElementById("form2").style.display = 'none';
}
else if(cElem.value =="2"){
document.getElementById("form1").style.display = 'none';
document.getElementById("form2").style.display = 'block';
}
}
This should be your HTML:
<div style="display:none;clear:both;" id="form1">
<div id="divOne"> Message 1 </div>
</div>
<div style="display:none;clear:both;" id="form2">
<div id="divOne"> Message 2 </div>
</div>

Try to use the css [display] property instead of [visibility].
display : none;

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);"

Firebug returning odd error for one getElementById

I have the following lines of js
var select_container = "container_"+parts[2];
var get_container = document.getElementById(select_container);
The function this is part of is failing and when I look in firebug it returns get_container as undefined. I have checked select_container is the correct value and that there isn't a duplicate id on page.
This is called by an onclick event so I can't see waiting for the page to load being an issue (the result is same no matter how long I wait).
revelent html example:
<div id="container_0">
I'm stumped!
edit
This is all the Javascript from the parent functions
/*detects links in the form editor and uses them to adjust the layout*/
window.onload = function () {
clickDetection();
} /*detect clicks on interesting links*/
function clickDetection() {
var canvas = document.getElementById("content");
var dumbLinks = canvas.getElementsByTagName("a");
for (var i = 0; i < dumbLinks.length; i++) {
dumbLinks[i].onclick = function () {
clickRoute(this);
return false
};
}
} /*reroute click behaviour to correct function*/
function clickRoute(link_object) {
var linkId = link_object.getAttribute("id");
var linkParts = linkId.split("_");
if (linkParts[1] == "delete") {
delete_route(linkParts);
} else if (linkParts[1] == "new") {
new_route(linkParts);
}
}
function delete_route(parts) {
alert(parts);
if (parts[0] == "field") {
var select_container = "container_" + parts[2];
var get_container = document.getElementById(select_container);
document.removeChild(get_container);
} else if (parts[0] == "option") {
alert("delete a option");
}
}
full (typical) html (please note repeating sections have been cut for length and other details changed for secuity):
<!DOCTYPE HTML>
<html>
<head>
<!-- determines header content -->
<meta charset="utf-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<script type="text/javascript" src="some.js"></script>
<title>Title of the document</title>
</head>
<body>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav linke</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div class="bignavblock"><p>nav link</p></div>
<div id="content">
<h1>screen name</h1>
<form method="post" action="#this">
<label for="summary">Select an item to edit:<br></label>
<select name="summary" id="summary">
<option value="generic">generic</option>
<option value="updated">updated</option>
</select>
<input type="submit" name="summary_select" value="Select">
</form>
<h2>screen name</h2>
<div id="container_7">
<form method="post" action="#this">
<fieldset><legend>existing segment</legend>
<p><a id="field_delete_7" href="#">Delete field</a></p>
<label for="name_7">Field Name</label><input type=text id="name_7" name="name" value="Colour"><br>
<label for="type_7">Data type expected</label>
<select name="type" id="type_7">
<option value="name" >Name</option>
<option value="email" >Email Address</option>
<!-- cut for length -->
</select>
<p>Some text</p>
<label for="option_7_0">Option Value</label><input type=text id="option_7_0" name="option_7_0" value="Red">
<a id="option_delete_7_0" href="#">Delete option</a><br>
<label for="option_7_1">Option Value</label><input type=text id="option_7_1" name="option_7_1" value="Green">
<a id="option_delete_7_1" href="#">Delete option</a><br>
<label for="option_7_2">Option Value</label><input type=text id="option_7_2" name="option_7_2" value="Blue">
<a id="option_delete_7_2" href="#">Delete option</a><br>
<a id="option_new_7" href="#">Add new option</a>
<input type="submit" name="detail" value="Finish"></fieldset></form></div>
<p><a id="field_new" href="#">Add new field</a></p>
</div>
<!-- determines footer content -->
footer content
</body>
</html>

Change this:
document.removeChild(get_container);
to this:
get_container.parentNode.removeChild(get_container);
or if the containers are a direct descendant of body, then you could do this:
document.body.removeChild(get_container);