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>
Related
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();
}
}
});
i have 3 buttons in the top with color given.as i press the button it changes the color indicating that following button has been pressed and my submit form opens.as soon as i submit the form message displays "successful".but my problem is as i press the submit button the top button color changes to the previous one but i want it to stay the same.how can i do this please help!!!
here is my code:
this is my javascript and css fr changing the button colors:
<script type="text/javascript">
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css('background-color',"#C1B0B3");
$(this).css('background-color',"#9C7260");
});
});
<style>
.beforeClick {
margin-left: 0.4%;
background-color:#C1B0B3;
font-weight: bold;
width: 14em;
height: 2em;
}
</style>
this is my buttons and its forms:
<html>
<body>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260">Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick"> Report3</button>
<script type="text/javascript">
$("#incbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide();
$("#form_sub_container3").hide();
})
$("#dthbutton").click(function() {
$("#form_sub_container2").show();
$("#form_sub_container1").hide();
$("#form_sub_container3").hide();
})
$("#negbutton").click(function() {
$("#form_sub_container3").show();
$("#form_sub_container1").hide();
$("#form_sub_container2").hide();
})
</script>
<div id="form_sub_container1" style="display:<?= ( isset($_POST['rep']) || (!isset($_POST['report21']) && !isset($_POST['report31'])))? 'block':'none'?>">
//report1 functionalities
<input type="submit" name="rep" value="Save" id="btnsize1" /></td>
</div>
<div id="form_sub_container2" style="display: <?= isset($_POST['report21'])? 'block':'none'?>">
//report2 functionalities
<input type="submit" name="report21" value="Save" id="btnsize2" /></td>
</div>
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
//report3 functionalities
<input type="submit" name="report31" value="Save" id="btnsize3" /></td>
</div>
</body>
<html>
this my report3:
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
<?php
if (isset($_POST['report31']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report31']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
}
}
?>
<div id="color" >
<table>
<h1 align="center"><p> Report</h1>
<form action="" method="POST" id="form_id">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report31" value="Save" id="btnsiz" /></td></tr>
</form>
</table></br>
</div>
</div>
Nah..is this what you want?
$(document).ready(function(){
$('.beforeClick').click(function(){
$(this).css('background-color',"#C1B0B3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260" >Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick">Report3</button>
Create a class and call it whatever you want eg: .clickedButton or .afterClick and then when a form is submitted you do just like you did with #form_sub_container divs :
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
but this time you have to do it with your buttons, something like:
<button type="button" id="incbutton" class="<?= isset($_POST['rep'])? 'afterClick':'beforeClick'?>" >Report1</button>
<button type="button" id="dthbutton" class="<?= isset($_POST['report21'])? 'afterClick':'beforeClick'?>" >Report2</button>
<button type="button" id="negbutton" class="<?= isset($_POST['report31'])? 'afterClick':'beforeClick'?>" >Report3</button>
css
.afterClick{
background-color:#9C7260;
}
I am trying to get all the values of the input fields. The issue is all of the <input type=radio/> are dynamic and can increase or decrease at any time.
So I am starting with the main DI and going from there. The problem I have now is I am not getting the input radio buttons values.
So here are the steps I am intending to accomplish:
If any radio button is selected, pass its value to the checkbox value,
If the radio button is selected and the checkbox is not selected, do not pass to the checkbox value
I am looking for a solution in JavaScript only - do not use jQuery
Here is my jsFiddle code
HTML
<div style="display: block;" id="mymainDiv" class="fullFloat">
<input type="hidden" value="1" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">UPS<a class="fRight" onclick="localG('10',false,0,false,'UPS','1','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_UPS"><div class="loadingcheckout"></div></div>
<div id="Price_UPS">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11098" id="deliveryMethodId_1" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
UPS Ground (Order by 9:30 PM EST)
</span>
<div class="wrapRight">
<div id="UPS_11098">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="UPS">
</div>
<input type="hidden" value="2" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">Standard<a class="fRight" onclick="localG('20',false,0,false,'Standard','2','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_Standard"><div class="loadingcheckout"></div></div>
<div id="Price_Standard">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11117" id="deliveryMethodId_2" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
Standard Delivery - 2-3 Day Delivery at Ground Rate (Order by 9:30 PM EST)
</span>
<div class="wrapRight">
<div id="Standard_11117">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="Standard">
</div>
<input type="hidden" value="3" id="startIdxShMdeCarWisevId" name="startIdxShMdeCarWise">
<div class="subTitle">FedEx<a class="fRight" onclick="localG('190',false,0,false,'FedEx','3','$');" href="javascript:void(0);">Show Prices</a></div>
<div style="display:none;" id="Wheel_FedEx"><div class="loadingcheckout"></div></div>
<div id="Price_FedEx">
</div>
<div class="wrapLeft wrapClear">
<div class="wrapleft">
<label class="">
<input type="radio" value="11088" id="deliveryMethodId_3" name="deliveryMethodId" class="section" data-mask="" data-rev="" data-rel="false" data-carrier="">
<span>
FedEx Ground (Order by 8:00 PM EST)
</span>
<div class="wrapRight">
<div id="FedEx_11088">
</div>
</div>
</label>
</div>
<input type="text" value="1" id="FedEx">
</div>
</div>
<input type="checkbox" name="shipmode" id="shipmode" value="" onclick="getpref('mymainDiv');">Get Value
JS Code
This executes when the checkbox is clicked:
function getpref(val) {
var wr = document.getElementById(val);
childElements = wr.childNodes;
//alert(childElements);
for(var i = childElements.length-1; i>=0; i--){
var elem = childElements[i];
console.log(elem.id);
if(elem.id && elem.id.indexOf(val+'_')==0){
elem.style.display = 'block';
}
}
//alert(val);
}
You can directly access input nodes in your DIV with getElementsByTagName
function getpref(val) {
var divNode = document.getElementById(val);
var inputNodes = divNode.getElementsByTagName('INPUT');
for(var i = 0; i < inputNodes.length; ++i){
var inputNode = inputNodes[i];
if(inputNode.type == 'radio') {
//Do whatever you want
if(inputNode.checked) {
//Do whatever you want
}
}
}
}
Example: http://jsfiddle.net/88vp0jLw/1/
You can use getElementsByName to get you all of the radio buttons by name='deliveryMethodId' and then go from there:
function getpref(val) {
var radioButtons = document.getElementById(val).getElementsByName("deliveryMethodId");
for(var i = radioButtons.length-1; i>=0; i--)
{
var radioButton = radioButtons[i];
if(radioButton.checked)
console.log(radioButton.id + " is selected ");
}
}
I the index.html I want to toggle with the #btn between two different views:
NON-REALTIME: #getDateTime and #showData shall be visible
REALTIME: #stateBela shall be visible
Question: It works, but what isn't working as follows:
ALL (!) divs are visible after starting the index.html, but only the
#stateBela should be visible, because the default setting is "REALTIME". How can I do that?
The function toggleState is written in the upper "head-part"...
<head>
<!-- define the toggle function -->
<script type="text/javascript">
function toggleState(item){
if(item.className == "on") {
item.className="off";
item.value="NON-REALTIME";
document.getElementById("stateBela").style.display = 'none';
document.getElementById("getDateTime").style.display = 'inline';
document.getElementById("showData").style.display = 'inline';
} else {
item.className="on";
item.value="REALTIME";
document.getElementById("stateBela").style.display = 'inline';
document.getElementById("getDateTime").style.display = 'none';
document.getElementById("showData").style.display = 'none';
}
}
</script>
</head>
...and the divs are written/listed in the lower "body-part" of the html code...
<body>
<!-- call function 'toggleState' whenever clicked -->
<input type="button" id="btn" value="REALTIME" class="on" onclick="toggleState(this)" />
<div id="stateBela">
<label>BELA is: offline or online</label>
</div>
<div id="getDateTime">
<label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date">
<label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" />
<label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" />
<label>To:</label><input id="toTime" name="toTime" type="text" value="Time" />
</div>
<div id="showData">
<button>Show data</button>
</div>
</body>
CSS:
#getDateTime, #showData {
display: none;
}
You can just add a style attribute to hide them on page load.
<div id="getDateTime" style="display:none">
<label>After:</label><input id="afterDate" name="afterDate" type="text" value="Date">
<label>To:</label><input id="toDate" name="afterDate" type="text" value="Date" />
<label>After:</label><input id="afterTime" name="afterTime" type="text" value="Time" />
<label>To:</label><input id="toTime" name="toTime" type="text" value="Time" />
</div>
<div id="showData" style="display:none">
<button>Show data</button>
</div>
You should add these lines in your javascript :
function startState {
toggleState(document.getElementById("btn"));
}
window.onload = startState;
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO