Here is a sample of our project which involves counting votes, the problem is that we implemented a pop-up window thus clicking a submit button to be able to vote (which is in the pop-up window) well what our problem is that we need to increment or rather add +1 vote to the university or whatsoever you choose and we ask for help how can we do that with a pop-up window. (There is a table for the name of the university then for counting of votes)

Here is the html if you wanna try it:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pass</title>

<link rel="stylesheet" href="popup.css" type="text/css" />
<link rel="stylesheet" href="smbtable1.css" type="text/css" />

<script type="text/javascript" src="popup.js"></script>
</head>

<body>
<div id="container"> 
  <div id="menu">
    <center></center>
  </div>
  <div id="header">
    <div id="logo">
<tr>
<td width="143">Blah Blah University</td>
<td width="131" colspan="3">0</td>
</tr>
</div>
    <div id="dj"></div>
    <div id="welcome">
</div>
    <div class="clear"></div>
  </div>
  <div id="middle"></div>

  <div id="content">
  
    <div class="clear">
    
    
  <center>
  <br>
VOTE FOR YOUR UNIVERSITY
<br>
<div id = "blanket" style = "display:none"></div>
<div id = "popUpDiv" style = "display:none">
<br>
Blah Blah University
<br><br>
<center><img src="+1Heart.jpg" width="97" height="100"/></center>
<br>
<br>
<br>
<br>
<br>
<br>
<left>
<form id="form1" name="form1" method="post" onclick="popup('popUpDiv')">
  <label>
    <input type="submit" name="vote" id="vote" value="Vote for Blah Blah" />
  </label>
</form>
</div>
<a class = "opacity-1">
<img src="+1Heart.jpg" width="105" height="108" onclick = "popup('popUpDiv')"/></a>
</body>
</html>

HERE IS THE JAVASCRIPT OF THE POP UP WINDOW

JS

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	
	blanket.style.height = blanket_height + 'px';
	
	var popUpDiv = document.getElementById(popUpDivVar);
	var popUpDiv2 = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-150; ///150 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';

}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);

	window_width=window_width/2-150; ///150 is half popup's width
	popUpDiv.style.left = window_width + 'px';

}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}

CSS of the POP UP WINDOW

CSS

#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
border: 5px solid #FFF;
background-color: #000;
font-family:Verdana, Geneva, sans-serif;
color:#0C3;
width:300px;
height:300px;
z-index: 9002;

}

Note: there is not only 1 example can it also be done with many selections? Thanks and JS and CSS are not from us, found it through Google

Instead of display 0 have a textbox:

<tr>
<td width="143">Blah Blah University</td>
<td width="131" colspan="3"><input type="text" name="inc" value="0"></td>
</tr>

//Have another method call:

<form id="form1" name="form1" method="post" onclick="inc()">

//Process the updation

<script language="javaScript">
function inc(){
 //find the element
 //update the value by 1 
</script>

where will i put the other method (form) and will you please tell us the code for the other function we just need to get this done right now thanks