JavaScript - Onclick Description Div For Class Of Multiple Divs?

Hi,

Need some help please. I have the following function:

Code:

<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
 
var questionid = document.question.questionid.value;
 
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

I then have the following onClick:

Code:

<input type="radio" name="vote" value="1" onClick="getVote(this.value);" />
<input type="radio" name="vote" value="2" onClick="getVote(this.value);" />

Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives.

The second function is pretty much the same, just a different div ID:

Code:

<script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
   
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end.

Any ideas gratefully received.

Thanks.

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Hey all,

Hoping someone could help me out with some javascript coding as I am a complete novice to this!

I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below).

The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on.

Can anyone help me out with how I can get this to work correctly?

javascript:

Code:

<script language="JavaScript" type="text/javascript">

var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='On';
 Lst=obj;
}

</script>

HTML:

Code:

<div id="navWrapper">

			<div id="globalNav">
				<ul>
				<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
				<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
				</ul>
			</div>
            
            <div id="localNav"></div>
        
		</div>

Good day all:

I'm wondering if the cancellation of one of my onclick js function in the below code is as a result of having multiple onclick function. here is the code:
Code:

<FORM NAME="SubCategory" method=post action='accountingsearch2.php' rel="nofollow" target='_top'>
<p align="left">
<div id="presetlabel">Or use Preset Periods-->></div>
<div id="SubCategory">
<SELECT NAME="specifiedperiod" style="display:inline";>
<OPTION>Select a Time Period
<OPTION>Today
<OPTION>Current Week
<OPTION>Current Month
<OPTION>Current Quarter
<OPTION>Past Quarter
<OPTION>Current Year
<OPTION>Previous Year
</SELECT>
</div>
<div id="proceed2"><input type='submit' value='Proceed!' onclick='return ValidateSubCategory();'></div><!--the validation does not work with onsubmit-->
</FORM>
<form name="SubCategory2" method=post action='accountingsearch.php' rel="nofollow" target='_top'>
<div id="callabel"><label for="theDate">From today thru</label></div>
<div id="othersearch"><input type="text" value="2010/10/24" readonly name="theDate" size="11"></div>
<div id="cal"><input type="button" value="Calendar" onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";></div>
 <!--<INPUT TYPE="" VALUE="" name="specifiedperiod" style="display:inline";-->
<!--<font size='2'> Please Specify an optional Device name </font><input id='searchField' name='searchField' value='(none)' type='text'></option>-->
<div id="proceed"><input type='submit' value='Proceed!'><!--onclick='return ValidateSubCategory();'--> </div>
</p>
</FORM>

If such is the case, how can I address this problem?

Currently, the first onclick function Code:

onclick='return ValidateSubCategory();'

works fine. The problem is with the second
Code:

onclick="displayCalendar(document.forms[0].theDate,'yyyy/mm/dd',this)" style="display:inline";

Any assistance is greatly appreciated!
Mossa

Ok, so basically what I've got is a button which when clicked, "opens" a section of the page. I also need the button to "jump" to this section of the page, because it's below the current content and won't be visible.

What I've got so far is ...

Javascript
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";

}
else {
ele.style.display = "block";
text.innerHTML = "hide";
location="#ordernow"

}
}
function moveWindow(){window.location.hash="ordernow"}
</script>



HTML
... (The rest of the form is up here)
<input name="Button" type="button" class="button" value="Order Now" onclick="toggle();moveWindow()" id="displayText"/>

...
(This is the start of the section that becomes visible, along with the anchor point which is highlighted in red.)
<div id="toggleText" style="display: none">
<a name="ordernow"></a>
<fieldset>
<legend>Order Confirmation</legend>
<div class="standardinput">
<label>Company:</label>
<input name="Company" type="text" class="textinput" id="Company" />
</div>




If I put two separate buttons, both functions will work. Basically I need them to be on the same function, not sure how to do that?

Thanks so much in advance =)

Hi,

I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the
updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick)
during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh
is completed it will open a popup.

The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the
refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having
any effect. In such case how i can handle this scenario?

Thanks.

I need help in creating a multiple value cookie when the user clicks the Add to cart input button. Here is the portion of code from the html page that creates the inventory item display and the Add to cart button. There are six of these on the page:

Code:

<div id="inventoryspread">

       <div class='productBoxInvUL'>
        <script type:"text/javascript">
		document.write("<img src="+"'"+"images/"+arrImage[0]+"'"+"align='left'/>"+
					   "<p><br/><span class='invName'>"+arrName[0]+"</span></p>"+
          				"<p>"+arrDescription[0]+"</p>"+
		  				"<p>Item#&nbsp;"+arrItem[0]+"<br/>"+
						"<span class='invPrice'>"+arrPrice[0]+"</p>");
		</script>
        <input type="button" value="Add to Cart" onclick='createCookie("name, value, 7", prompt("cookie created"))' />
        </div>

And here is a portion of the array that fills it:

Code:

var arrItem = new Array();
var arrName = new Array();
var arrDescription = new Array();
var arrPrice = new Array();
var arrImage = new Array();


arrItem[0]= "FE100";
arrName[0]= "Blacktop Jazzmaster";
arrDescription[0]= "Monster dual-bucker tone. Vintage style alnico humbucking pickup, single coil, skirted black amp knobs, and 3-way toggle switch. Alder body, Maple neck, Rosewood fretboard, 21 medium jumbo frets, gloss urethane finish and nickel/chrome hardware.";
arrPrice[0]= "$699.00";
arrImage[0]= "FE100.png";

arrItem[1]= "FE200";
arrName[1]= "Roland-Ready Stratocaster";
arrDescription[1]= "Time-tested Fender tone, timeless styling, 3 single-coil pickups, synchronized tremolo, high-mass bridge block, shielded body cavities and medium jumbo frets. Built-in Roland GK-2A pickup system, tinted neck, parchment pickguard and control knobs, and a '70s-style logo.";
arrPrice[1]= "$1,019.00";
arrImage[1]= "FE200.png";

arrItem[2]= "FA100";
arrName[2]= "CD220SCE Exotics ";
arrDescription[2]= "Exotic and beautiful with rich tone, laminated burl ash back and sides, with a solid spruce top. Fender-designed dreadnought body, X-bracing, and die-cast tuners. Cutaway body design with  rosewood bridge featuring a compensated bone nut";
arrPrice[2]= "$629.00";
arrImage[2]= "FA100.png";

arrItem[3]= "FA200";
arrName[3]= "Dick Dale Mailbu SCE";
arrDescription[3]= "Thin folk body design, laminated spruce top, laminated mahogany back and sides, scalloped X-bracing providing well balanced tone. Maple neck, rosewood compensated bridge and fretboard, vintage-style Fender tuners, and a surfin' red paint job on the top and back";
arrPrice[3]= "$849.00";
arrImage[3]= "FA200.png";

arrItem[4]= "FB100";
arrName[4]= "Standard Precision Bass";
arrDescription[4]= "Sound, look, and feel today's bass players demand. Classic P-Bass old-school design. Contemporary features and refinements. Alder body and a split single-coil pickup, this classic electric bass guitar lives up to its Fender legacy."; 
arrPrice[4]= "$579.00";
arrImage[4]= "FB100.png";

arrItem[5]= "FB200";
arrName[5]= "Roger Waters Signature Precision Bass";
arrDescription[5]= "Tastefully tailored, black-on-black color scheme, Seymour Duncan Basslines SPB-3 Quarter-Pound split-coil Precision Bass pickup, knurled black control knobs, brass nut, black bridge and strap buttons, vintage '70s-style open-gear chrome tuners."; 
arrPrice[5]= "$1,199.00";
arrImage[5]= "FB200.png";

arrItem[6]= "GE100";
arrName[6]= "Firebird X Limited Edition";
arrDescription[6]= "Turbo-charged Pure-Analog engine. Hand-applied and unique high-end wood finish. Beautiful, historical and yet contemporary and unique. Limited run of just 1,800 units. It is sure to become a collector classic.";
arrPrice[6]= "$5,569.00";
arrImage[6]= "GE100.png";

The cookie only needs to include the Item#, Name and Price of each item to populate a shopping cart page.

This is only a small student project and is client side only using javascript. Thank you for any help we can get on this.

Every time I try to use the notEmpty function with an onClick event, the validation stops working.

I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well.

Please help! I'm completely lost.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
      Date: 11/12/2014
      Filename: validator.html
      Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>

function formValidator(){
	// Make quick references to our fields
	var firstname = document.getElementById('firstname');
	var lastname = document.getElementById('lastname');
	var gpa = document.getElementById('gpa');
	var phone = document.getElementById('phone');
	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your first name")){
		if(isAlphabet(lastname, "Please enter only letters for your last name")){
			if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
				if(phoneValidator(phone, "Please put a valid phone number")){
					return true;
				}
			}	
		}	
	}
	return false;
}

// Functions that check values in input fields!

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function gpaValidator(elem, helperMsg){
	var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function phoneValidator(elem, helperMsg){
	var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;

	}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>

My problem is that i have multiple math calculations within different functions that have multiple switch statements that get calculated with an onclick="functionOne()" for each radio button and before i can calculate the outcome for some reason i must fully insert a value for every input as well as check every raidio button before i get to the end of my list. I wish to simply allow the user to fill out as many fields as he wishes leaving some bank without being restricted to do every single one.. Thank you in advance

Hi Experts,

I have a fixed size area.called a container tag.And based on selection of no of divs the area should divide into those many no of equal divs.And is there any other techinic to divide area by multiple divs or parts.

Thanks in advance
Eswaraiah M

Hi guys ,, I am new here

could you please help me in this:

I have multiple divs something like this

PHP Code:
<div id="div1">
<div id="div2">
<div id="div3">
....
</div>
</div> 



I want JavaScript code to print div1 with all nested divs as well

I tried using the following code but it only print div1 content


PHP Code:
var printContent = document.getElementById('div1');

var windowUrl = 'about:blank';

var uniqueName = new Date();

var windowName = 'Print' + uniqueName.getTime();

var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=200,height=200');

printWindow.document.write(printContent.innerHTML);

printWindow.document.close();

printWindow.focus();

printWindow.print();

printWindow.close(); 



so please tell me how to do such operation ??

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

I have a PHP script that automatically increases a div id number by one. An example would be:

Code:

<div id="globalEventX">

where X is a number from 1 to 1000.

I created a couple of javascript functions to show/hide these divs and it looks like this:

Code:

function hideGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='none';
    }
  }
  
function showGlobalEvents()
  {
  var i;
  var gEvent = 'globalEvent';
  for(i=1; i<=1000; i++)
    {
    var globalEvent = gEvent + i;
    document.getElementById(globalEvent).style.display='block';
    }
  }

I then created a pair of radio buttons to call the show or hide functions. The code looks like this:

Code:

<input type="radio" name="GlobalLocal" onClick="javascript:hideGlobalEvents();">Personal</input>&nbsp;&nbsp;

<input type="radio" name="GlobalLocal" checked onClick="javascript:showGlobalEvents();">Global</input>&nbsp;&nbsp;

But, when I try to use the buttons, they do not suppress the DIVs. Can anyone give me an idea what I'm doing wrong?

Thanks in advance!