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;
Related
Hey everone, I am trying to make a validation of radio button. Once submit without clicking the button, it will be a red warning text next to the text-input as this image
The code is below here,I am very appreciated if someone fixes this problem.
<html>
<head>
<link rel ="stylesheet" type="text/css" href="456.css">
<meta charest ="utf-8">
<title>error-msg will not display correctly at the same time</title>
<script>
function validation(thisForm) {
// other
if(!thisForm.other.value.length)
{
document.getElementById('other-error').style.display= "inline-block";
}
else
{
document.getElementById('other-error').style.display= "none";
}
if (!thisForm.other.value.length) {
return false;
}
return true;
}
</script>
<style>
.error-msg {
display: none;
color:red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
</style>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<div class="Other">
<label for="other">Other</label>
<input type="radio" id="other" name="other" />
<input type="text" id="o-text" name="o-text">
<span class="error-msg" id="other-error">other error</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>```
you can just check with checked property.
if(document.getElementById("yourRadiobuttonID").checked==false){
document.getElementById('other-error').style.display= "inline-block";
}
else{
document.getElementById('other-error').style.display= "none";
}
What I want to do is simply to make div with id="one" invisible on input of "1" in input-field and correspondingly same for div's with id="2" and id="3" for input of "2", input of "3".
I look for a short and simple way but other ways are also welcomed.
I am a beginner in web designing and development.
For any query please comment below.
<head>
<title>
sample
</title>
<script type="text/javascript">
function myFunction0()
{
var x = document.getElementById("text_1").value;
if ( x == 1 ){
document.getElementById("one").style.visibility = "hidden";
}
if ( x == 2 ){
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
}
if ( x == 3 ){
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div style="margin-left: 250px;">
<form>
<input id="text_1" name="text1" type="text"/>
<input id="text_2" name="text2" onclick="myFunction0();" type="submit"/>
</form>
<br/>
<br/>
<br/>
<div id="one" style="height:100px; width:200px; border:1px solid black;">
box 1
</div>
<br/>
<div id="two" style="height:100px; width:200px; border:1px solid black;">
box 2
</div>
<br/>
<div id="three" style="height:100px; width:200px; border:1px solid black;">
box 3
</div>
<br/>
<div id="four" style="height:100px; width:200px; border:1px solid black;">
box 4
</div>
<br/>
</div>
</body>
Try this
<head>
<title>
sample
</title>
<script type="text/javascript">
function myFunction0()
{
[ 'one', 'two', 'three','four' ].forEach(function( ide ) {
document.getElementById( ide ).style.visibility = "visible";
});
var arr = [ 'one','two','three','four'];
var x = Number(document.getElementById("text_1").value);
for(var i=1;i<=x;i++){
document.getElementById(arr[i-1]).style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div style="margin-left: 250px;">
<form>
<input id="text_1" name="text1" type="text"/>
<input id="text_2" name="text2" value="click" onclick="myFunction0()" type="button">
</form>
<br/>
<br/>
<br/>
<div id="one" style="height:100px; width:200px; border:1px solid black;">
box 1
</div>
<br/>
<div id="two" style="height:100px; width:200px; border:1px solid black;">
box 2
</div>
<br/>
<div id="three" style="height:100px; width:200px; border:1px solid black;">
box 3
</div>
<br/>
<div id="four" style="height:100px; width:200px; border:1px solid black;">
box 4
</div>
<br/>
</div>
</body>
$("body").on("keyup","#text_1",function() {
var x = $("#text_1").val();
if ( x == 1 ){
document.getElementById("one").style.visibility = "hidden";
}
if ( x == 2 ){
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
}
if ( x == 3 ){
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "hidden";
}
});
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 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);"
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.