JavaScript - Hidden Fields Are Showing On Page

I dont claim any of the JS below as my own.

link to an example page http://www.clansngamers.com/add_new_game.php

You see the PS3 checkbox is standard: Working, It brings up the hidden div.
The Xbox checkbox is coded exactly the same except it uses the custom checkbox image and it dont work. This is my problem.

have tried to code this and failed asking for any help i suck at JS.

The Code Im trying to add
Code:

function showMe(id){ var obj = document.getElementById(id);
  if (obj.style.display == "none"){obj.style.display = "inherit";}
  else {obj.style.display = "none";}
}

The basic layout
Code:

<input class="styled" name="foo" type="checkbox" id="foo" value="1" onclick="showMe('div1')" />
<input class="styled" name="bar" type="checkbox" id="bar" value="1" onclick="showMe('div2')" />
<div id='div1' style="display:none;">hidden content 1</div>
<div id='div2' style="display:none;">hidden content 2</div>

Custom Checkbox code
Code:

var checkboxHeight = "14";
var radioHeight = "14";
var selectWidth = "190";

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

var Custom = {
   init: function() {
      var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
      for(a = 0; a < inputs.length; a++) {
         if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
            span[a] = document.createElement("span");
            span[a].className = inputs[a].type;

            if(inputs[a].checked == true) {
               if(inputs[a].type == "checkbox") {
                  position = "0 -" + (checkboxHeight*2) + "px";
                  span[a].style.top = position;
               } else {
                  position = "0 -" + (radioHeight*2) + "px";
                  span[a].style.backgroundPosition = position;
               }
            }
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            inputs[a].onchange = Custom.clear;
            if(!inputs[a].getAttribute("disabled")) {
               span[a].onmousedown = Custom.pushed;
               span[a].onmouseup = Custom.check;
            } else {
               span[a].className = span[a].className += " disabled";
            }
         }
      }
      inputs = document.getElementsByTagName("select");
      for(a = 0; a < inputs.length; a++) {
         if(inputs[a].className == "styled") {
            option = inputs[a].getElementsByTagName("option");
            active = option[0].childNodes[0].nodeValue;
            textnode = document.createTextNode(active);
            for(b = 0; b < option.length; b++) {
               if(option[b].selected == true) {
                  textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
               }
            }
            span[a] = document.createElement("span");
            span[a].className = "select";
            span[a].id = "select" + inputs[a].name;
            span[a].appendChild(textnode);
            inputs[a].parentNode.insertBefore(span[a], inputs[a]);
            if(!inputs[a].getAttribute("disabled")) {
               inputs[a].onchange = Custom.choose;
            } else {
               inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
            }
         }
      }
      document.onmouseup = Custom.clear;
   },
   pushed: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
      } else if(element.checked == true && element.type == "radio") {
         this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
      } else if(element.checked != true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
      } else {
         this.style.backgroundPosition = "0 -" + radioHeight + "px";
      }
   },
   check: function() {
      element = this.nextSibling;
      if(element.checked == true && element.type == "checkbox") {
         this.style.backgroundPosition = "0 0";
         element.checked = false;
      } else {
         if(element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else {
            this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
            group = this.nextSibling.name;
            inputs = document.getElementsByTagName("input");
            for(a = 0; a < inputs.length; a++) {
               if(inputs[a].name == group && inputs[a] != this.nextSibling) {
                  inputs[a].previousSibling.style.backgroundPosition = "0 0";
               }
            }
         }
         element.checked = true;
      }
   },
   clear: function() {
      inputs = document.getElementsByTagName("input");
      for(var b = 0; b < inputs.length; b++) {
         if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
         } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
         } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
         }
      }
   },
   choose: function() {
      option = this.getElementsByTagName("option");
      for(d = 0; d < option.length; d++) {
         if(option[d].selected == true) {
            document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
         }
      }
   }
}
window.onload = Custom.init;

Afternoon All,

I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie:


<!-- begin Referer Check -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>");
</script>

<script type='text/javascript'>
var pageTracker = _gat._getTracker("UA-1-1");
pageTracker._trackPageview();

//
// This is a function that I "borrowed" from the urchin.js file.
// It parses a string and returns a value. I used it to get
// data from the __utmz cookie
//
function _uGC(l,n,s) {
if (!l || l=="" || !n || n=="" || !s || s=="") return "-";
var i,i2,i3,c="-";
i=l.indexOf(n);
i3=n.indexOf("=")+1;
if (i > -1) {
i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; }
c=l.substring((i+i3),i2);
}
return c;
}

//
// Get the __utmz cookie value. This is the cookies that
// stores all campaign information.
//
var z = _uGC(document.cookie, '__utmz=', ';');
//
// The cookie has a number of name-value pairs.
// Each identifies an aspect of the campaign.
//
// utmcsr = campaign source
// utmcmd = campaign medium
// utmctr = campaign term (keyword)
// utmcct = campaign content
// utmccn = campaign name
// utmgclid = unique identifier used when AdWords auto tagging is enabled
//
// This is very basic code. It separates the campaign-tracking cookie
// and populates a variable with each piece of campaign info.
//
var source = _uGC(z, 'utmcsr=', '|');
var medium = _uGC(z, 'utmcmd=', '|');
var term = _uGC(z, 'utmctr=', '|');
var content = _uGC(z, 'utmcct=', '|');
var campaign = _uGC(z, 'utmccn=', '|');
var gclid = _uGC(z, 'utmgclid=', '|');
//
// The gclid is ONLY present when auto tagging has been enabled.
// All other variables, except the term variable, will be '(not set)'.
// Because the gclid is only present for Google AdWords we can
// populate some other variables that would normally
// be left blank.
//
if (gclid !="-") {
source = 'google';
medium = 'cpc';
}
// Data from the custom segmentation cookie can also be passed
// back to your server via a hidden form field
var csegment = _uGC(document.cookie, '__utmv=', ';');
if (csegment != '-') {
var csegmentex = /[1-9]*?\.(.*)/;
csegment = csegment.match(csegmentex);
csegment = csegment[1];
} else {
csegment = '(not set)';
}

//
// One more bonus piece of information.
// We're going to extract the number of visits that the visitor
// has generated. It's also stored in a cookie, the __utma cookis
//
var a = _uGC(document.cookie, '__utma=', ';');
var aParts = a.split(".");
var nVisits = aParts[5];

/*

function populateHiddenFields(f) {
f.source.value = source;
f.medium.value = medium;
f.term.value = term;
f.content.value = content;
f.campaign.value = campaign;
f.segment.value = csegment;
f.numVisits.value = nVisits;

alert('source='+f.source.value);
alert('medium='+f.medium.value);
alert('term='+f.term.value);
alert('content='+f.content.value);
alert('campaign='+f.campaign.value);
alert('custom segment='+f.segment.value);
alert('number of visits='+f.numVisits.value);

return false;
}

*/

document.forms["cforms2"].elements["cf2_field_1"].value = source;

</script>




The key outputs from this code are the vars:

source
medium
term
content
campaign
csegment
nVisits

My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co?

I have tried to pass just the source var from within the <script> tags.

document.forms["cforms2"].elements["cf2_field_1"].value = source;

I have commented out part of original code that I did not think I needed.

Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields.

Thanks

Paul Brown

Hello,

I was wondering if it is possible to do something like below using JS.

Say I have some hidden text at the top of an HTML page...

Code:

<div id="text" style="visibility: hidden;">text</>

and an empty tag at the bottom of the page.

Code:

<div id="empty_container"></div>

Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads?

Thanks.

Looking for a simple way to have a hidden element made visible when the page scrolls.

The idea is to have a back arrow appear only when the page has been scrolled horizontally.

trying something along these lines without success ...

Code:

	<script type="text/javascript">
		window.onscroll = function () {
			if $("back").is(":hidden") {
				$("back").show("slow");
			}
		}
	</script>

The site is he www.milesjaffe.com.

Thanks --

I need for the form to do the following:
when age is greater than or equal to 65 enter "yes" in the hidden field
when age is less than 65 enter "no" in the hidden filed
return true

Create a page processAge.htm that
Writes the message on the page
Hi name. At age # you may retire.
or
Hi name. At age # you are not ready to retire. Get to work.
name is the name entered on the form.
# is the age entered on the form.

Java:
Code:

<script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
  var retValue = true;
  if (document.forms[0].name.value == "") {
      window.alert("You did not fill in one of the following required fields: Name or Age.");
      retValue = false;
      }
}
function checkForNumber(fieldValue) {
  var numberCheck = isNaN(fieldValue);
  if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;
    }
} 
/* ]]> */
</script>

Body:
Code:

<form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); ">
<table frame="border" rules="cols" >
<tr>
<td valign="top">
<h2>Retirement</h2>
<p>Name<br />
<input type="text" name="name" size="40" /></p>
<p>Age<br />
<input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p>
<p style="text-align: center"><input type="submit" value="Send" /><input type="reset" />
<input type="hidden" name="Retirement" /></p>
</td></tr>
</table>
</form>

Process Page:
Code:

<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
  formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
  document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>

Thanks for any help!

Hello all, hope all is well. I have a search function that displays hidden divs based on what the user has searched for. I would like the "search results" to be opened onto a new page; I have a feeling the results page would contain all the hidden divs and a form of JS would need to be used to "pass" the search data to the new page and thus perform the search and display the corresponding div. - Any help is appreciated here code and demo site below.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
   $path = $_SERVER['DOCUMENT_ROOT'];
   $path .= "/php/fleet/includes/website.php";
   include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
	}
document.getElementById(showndiv).style.display = 'block';
}
	
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/  +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "";
   }
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
   document.getElementById(IDlist[i]).style.display = "none";
   }
}
</script>

<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>

<div id="fleet1" style="display:block">
</div>


<div id="fleet2" style="display:none" class="fleetdiv">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W599 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network 

Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>



<div id="fleet3" style="display:none">	<br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">

             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png"  border="0"></a></FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W601 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none">	<br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
	<TR border="0" bordercolor="#FFFFFF">
	<TD valign="top">
         <TR>
        <TD>
         <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
         <TR>
           <TH class="titlebg" bgcolor="#336699" width="16%">
             <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

            </TH>
              <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
             </TH>
		<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
                  <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

             </TH>
         </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
  <FONT class="font">122</FONT></TD> 
           <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
         <FONT class="font">W602 PTO</FONT> 
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">  
           <FONT class="font">M920</TD> 
           <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <FONT class="font">OPTARE</font>

    </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
         <FONT class="font">B33F</font>
    </TD> 
	<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
         <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
    </TD>  
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>

http://nctfleetlist.co.uk/div3.php

epic thread title!


Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case.

PHP Code:
// save notes against company
if ($_POST['a']=="Save Note") {
    if (addnote($_POST['notetitle'],$_POST['notebody'])) {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>";
    } else {
        $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>";
    }
} 


I want to then wait until the page load is complete and then do the following.

PHP Code:
document.getElementById('addevent').style.display='block'; 


The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown.

Now my current fail attempt at doing it was this
PHP Code:
echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } 


However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this.

I have a form in an iframe that submits nicely. Here is one of the hidden fields that gives the page to redirect to after submitting the form:

Code:

<input type="hidden" name="rtrn" value="http://www.domain.com/thanks.html" target="_parent">

The parent target doesn't work, does anyone know how I get the thanks page to replace the page containing the iframe?

I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:

Code:

document.documentElement.style.overflow = document.body.style.overflow = 'hidden';

The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.

I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.

Folks,

I am trying to calculate the total of fields on a web form.
I have multiple rows of 10 fields with a total for each.
Each row comes from a different record in a database.
I am only showing 2 fields of the 10 for simplicity.

The name and id of each field looks like
"Q300_1" onchange="update(Q300)"
"Q300_2" onchange="update(Q300)"
"Q300_t"
"Q301_1" onchange="update(Q301)"
"Q301_2" onchange="update(Q301)"
"Q301_t"


My current attempt at the script looks like:
[CODE]
<script type="text/javascript">
function update(item) {
var itemt=item + "_t";
var item1=item + "_1";
var item2=item + "_2";
document.myform[itemt].value = (document.myform[item1].value -0) + (document.myform[item2].value -0);
}
</script>
[CODE]

It does not work and I get
Error: Q301 is not defined
in the Firefox error console.

I have 1 html page and 1 flash object on it

when i click on that flash object than a image should b appear and flash object will hide

when i click on that image than flash object should b appear and image will hide

the page should b same no other pages

can i do this using javascript? if yes than please send the code

Hey,

I've got a question regarding javascript. I'm a total novice at this and I would love to hear any advice which could help me resolve this problem.

I've got a html document with something like this:

<form>
<input type="button" value="Sum up" name="A" onClick="calculate()">
</form>

The thing is onClick="calculate()" transfers me to a new page and I need this function (calculate) shown below this button on the same page. I'm out of ideas of how should I do this.

Thanks in advance

What I want to do, is that, when the user select one option out of many from the dropdown box some new fields appears.

I was so close to make it , using this example:
Code:

<script type="text/javascript">
function showInfo()
{
var elem = document.getElementById('verify');
if(document.forms[0].menu.value == "verify"){
elem.style.display="inline";}
else{
elem.style.display="none";}
}
</script>
</head>

<body>
<form action="#" method="post">
<select name="menu" onchange="showInfo()">
<option value="none">Select an option</option>
<option value="email">Email</option>
<option value="verify">Verify</option>
</select>

<div id="verify" style="display:none;">
<input type="text" value="Username" >
<input type="password" value="password" >
</div>
</form>

But what I do want, is that two differen things appear on the page and in the different location of the page. And this script does not read the second <div>. So the result is, that the only first <div> appears.

Here are some images of what I want to do.
Befo
http://img82.imageshack.us/img82/7093/beforens9.jpg

After
http://img246.imageshack.us/img246/2759/afterzh2.jpg (what has to be changed is on the red circules).

So can someone help me with this script?? Please! I am pritty noob to the javascript.

The page loads and existing data is put in their correct fields.

When I click 'add more' to add more fields to the form it does so and I am able to add new data.

If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared.

how can I get it so the data stays, like in phpmyadmin when adding new fields.


JS
Code:

function addmore(addwhat) {
	// count existing boxes to find out next number to use.
	// ?
	if (addwhat == 'addresses') {
	fieldid = 'addressesdiv';
	}
	if (addwhat == 'namesnumbers') {
	fieldid = 'namesdiv';
	}
	var dv = document.getElementById(fieldid).innerHTML;
	var lines = dv.match(/<br>/ig).length;
	
		if (addwhat == 'addresses') {
					document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
					}
		if (addwhat == 'namesnumbers') {
					document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
					document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
					}
	}

PHP
Code:

<?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ."&nbsp;&nbsp;&nbsp;mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}

$customer_id = "11";

// get existing data.

// if not yet sent get data from databases
$ok = "no";
		if ($_POST['Submit'] != "Submit") {
		echo("<br>not sent<br>");
		$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
		$maincount = mysql_num_rows($res);
		echo("<br>number of clients = ".$maincount."<br>");
			for ($c = 1; $c <= $maincount; $c++) {
			$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
			$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
			echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
			}
		} else {
						// display last posted info
						echo("<br>sent<br>");

						$ok = "yes";
						// check if info was entrted correctly or not.
						
						for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
							if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
							echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
							$ok = "no";
							$maincount ++;
							}
							if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
							echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
							$ok = "no";
							$maincount ++;
							}
						}

				}

if ($ok == "no") {
					?>
					<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&amp;phpsession=" . $phpsession); ?>">
					<div style="width: 850px;">
						<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
						<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
							<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
							if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
							?>
							<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
							<?
							}
							} ?>
						</div>
					</div>
					<br style="clear: both;">
					  <a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a> 
					  <input type="hidden" name="customer_id" value="<?=$customer_id;?>">
					  <input type="submit" name="Submit" value="Submit">
					</form>
					<?
					}
?>

I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution?


Code:

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>