I want to make application teamaker, choose how many players and teams you need, then click button and application will generate a table with random values with a range from Player 1 - Value of input PlayersNum. My biggest problem is table is filling but columns have the same values. What should I do?
<div class="wrapper">
<h1 class="content__header">Let's create some teams!</h1>
<form action="#" class="form">
<label for="playersNum">
Number of players <input type="number" id="playersNum" class="form__input">
</label>
<label for="teamsNum">
Number of teams <input type="number" id="teamsNum" class="form__input">
</label>
<input type="submit" value="Draw teams" class="form__submit">
</form>
</div>
document.addEventListener('DOMContentLoaded',function(){
const form = document.querySelector(".form");
form.addEventListener("submit", function(e){
e.preventDefault();
let teamsNum = document.getElementById("teamsNum").value;
let playersNum = document.getElementById("playersNum").value;
if(playersNum %teamsNum == 0){
const wrapper = document.querySelector(".wrapper");
const tbl = document.createElement("table");
const tblBody = document.createElement("tbody");
for (let i = 0; i < playersNum/teamsNum; i++) {
let row = document.createElement("tr");
for (let j = 0; j < teamsNum; j++) {
let cell = document.createElement("td");
let random = Math.floor(Math.random() * playersNum + 1);
let cellText = document.createTextNode("Player " + random);
cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
wrapper.appendChild(tbl);
tbl.setAttribute("border", "2");
tbl.style.margin = "20px auto";
tbl.style.width = "50%";
tbl.style.textAlign = "center";
} else alert("Teams must have the same number of players!");
});
});
Repeating values
As you can see on the picture above, values are repeating. How to make every values without repeats in range from Player 1 to value which we have written in the input.
You can try something like this.
HTML
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="content">
<table border="1" id="lotto">
<tbody>
<tr>
<td class="normal" id="cell00"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input id="btn" type="button" value="Re-generate Numbers" />
</center>
JavaScript
var btn = document.getElementById('btn');
btn.addEventListener('click', UpdateTable);
// Set the max length of random number
// and the max length
var maxLength = 4;
// Returns a random number
function CreateLottoValues() {
return Math.floor(Math.random() * 4 + 1);
}
//create table
function UpdateTable() {
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxLength; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateLottoValues();
}
}
}
UpdateTable();
Check out this JSFiddle
Related
Scenario: I'd like to input the number at the top of the page. Then I press the button "First Line". It will create a new table row with 16 cells, with the numbers inputted displayed in the new cells. When I press another button "New Line", another row of 16 cells will appear below, with some particular numbers coming out in the new cells as I programmed in function newNo().
Question: I know my syntax in the function newNo() and the two var at the bottom of the js file is wrong. I want this function to be applied in all the new cells, so that it will look up the same "column" or the same cell in the 1st row, and produce a series of numbers according to the algorithm in newNo(), and show it in the next row, in each respective cell. Can this function do so in js/html?
Thanks a lot!
const tab = document.getElementById("tab");
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
btn1.addEventListener('click', () => {
let row = tab.insertRow(-1);
for (var i = 0; i <= 15; i++) {
let c = row.insertCell(i);
c.id = `R${row.rowIndex}C${++c.cellIndex}`;
let inpId = 'inp' + (i + 1);
let inpEl = document.getElementById(inpId);
c.innerHTML = inpEl.value;
}
});
function newCells() {
let row = tab.insertRow(-1);
for (var i = 0; i <= 15; i++) {
let c = row.insertCell(i);
c.id = `R${row.rowIndex}C${++c.cellIndex}`;
}
}
btn2.addEventListener('click', () => {
newCells();
newNo();
});
var row1 = [R1C1, R1C2, R1C3, R1C4, R1C5, R1C6, R1C7, R1C8, R1C9, R1C10, R1C11, R1C12, R1C13, R1C14, R1C15, R1C16];
var r1 = document.getElementById(row1).valueAsNumber;
function newNo() {
if (r1 > 0) {
var choices = [0, (R1C1.valueAsNumber) % 7, (R1C1.valueAsNumber + 2) % 7, (R1C1.valueAsNumber - 2) % 7];
var x = Math.floor(Math.random() * choices.length);
if (choices[x] == choices.at(0)) {
R2C1.innerHTML = choices[x];
} else if (choices[x] !== choices.at(0) && choices[x] <= 0) {
R2C1.innerHTML = choices[x] + 7;
}
}
}
th,
tr,
td {
border: 1px solid black;
padding: 5px;
width: 40px;
}
<div id="data">
<table id="inpdata">
<tr>
<td id="inpb1">Group 1</td>
<td id="inpb2">Group 2</td>
<td id="inpb3">Group 3</td>
<td id="inpb4">Group 4</td>
</tr>
<tr>
<td>
<input type="number" id="inp1" title="inp1">
<input type="number" id="inp2" title="inp2">
<input type="number" id="inp3" title="inp3">
<input type="number" id="inp4" title="inp4">
</td>
<td>
<input type="number" id="inp5" title="inp5">
<input type="number" id="inp6" title="inp6">
<input type="number" id="inp7" title="inp7">
<input type="number" id="inp8" title="inp8">
</td>
<td>
<input type="number" id="inp9" title="inp9">
<input type="number" id="inp10" title="inp10">
<input type="number" id="inp11" title="inp11">
<input type="number" id="inp12" title="inp12">
</td>
<td>
<input type="number" id="inp13" title="inp13">
<input type="number" id="inp14" title="inp14">
<input type="number" id="inp15" title="inp15">
<input type="number" id="inp16" title="inp16">
</td>
</tr>
</table>
<br>
<button id="btn1">First Line</button>
<button id="btn2">New Line</button>
</div>
<br>
<div id="tables">
<table id="tab">
<tr>
<th colspan="4">Group 1</th>
<th colspan="4">Group 2</th>
<th colspan="4">Group 3</th>
<th colspan="4">Group 4</th>
</tr>
</table>
</div>
How do I do that JavaScript will print in my HTML page a table via the value the user will choose?
That the JS script:
let numCol = document.getElementById('txtColumns').value;
let numRow = document.getElementById('txtRows').value;
let go = document.getElementById('btn');
let table = document.getElementById('table');
let td = "<td></td>" * numCol;
let tr = ("<tr>" + td + "</tr>") * numRow;
go.addEventListener('click', function(){
table.innerHTML = tr;
})
That the HTML code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table">
<!--Here I want to print the table-->
</table>
</div>
</table>
<script src="script.js"></script>
</body>
</html>
At first I thought about that way with the script but its only appear as a NaN and not table...
The following syntax:
let td = "<td></td>" * numCol;
does not produce numCol cells, so the following syntax:
let tr = ("<tr>" + td + "</tr>") * numRow;
does not produce numRow rows also.
So, the whole source code should be:
let go = document.getElementById('btn');
let table = document.getElementById('table');
go.addEventListener('click', () => {
let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment.
let numRow = document.getElementById('txtRows').value;
let td = "",
tr = "";
for (let i = 0; i < numCol; i++) {
td = td + "<td></td>";
}
for (let i = 0; i < numRow; i++) {
tr = tr + "<tr>" + td + "</tr>";
}
table.innerHTML = tr;
})
<table class="workTable">
<tr>
<td>
<input type="number" placeholder="Columns Number" id="txtColumns">
</td>
<td>
<input type="number" placeholder="Rows Number" id="txtRows">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="btn">
Print
</button>
</td>
</tr>
<div>
<table id="table" border="1">
<!--Here I want to print the table-->
</table>
</div>
</table>
I want to implement the code to create a bingo appliacation where it takes the letters from array on a button click.
How can i assign the array element like array(a,b,c) to those 3X3 table cells randomly on run button click. when i got sequence like abc in a row or diagonal i want increment the count value.
I started but i am unable to implement the code. Can i get any suggestion please.
Here is my code
<html>
<head>
<script>
function run(){
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = rand();
row.cells[1].textContent = rand();
row.cells[2].textContent = rand();
}
score()
}
function rand(){
var text = new Array();
var possible = "MCS*";
return possible.charAt(Math.floor(Math.random() * possible.length));
}
function score(){
var Row = document.getElementById("grid");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
alert(Cells[1].innerText);
alert(Cells[2].innerText);
alert(Cells[3].innerText);
alert(Cells[5].innerText);
alert(Cells[6].innerText);
alert(Cells[7].innerText);
alert(Cells[8].innerText);
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
Thanks in advance..
<html>
<head>
<script>
var arr_num = ["1","2","3"];
var match =["123","234","345","567","678","111","222","333","444","555","666"];
function run(){
var counter =0;
var grid = document.getElementById("grid");
for (var i = 0, row; row = grid.rows[i]; i++){
row.cells[0].textContent = arr_num[getRandom()];
row.cells[1].textContent = arr_num[getRandom()];
row.cells[2].textContent = arr_num[getRandom()];
}
var a = getMatch();
for(var i=0;i<getMatch().length; i++){
if(match.indexOf(a[i]) > -1)
counter++;
}
document.getElementById("count").innerHTML = counter++;
}
function getMatch(){
var grid = document.getElementById("grid");
var match1 = [[]];
var match_dia =[];
var temp_dia1 = 0;
var temp_dia2 = 2;
var temp_dia3 = 0;
var temp_dia4 = 2;
var match_col = [];
for (var i = 0, row; row = grid.rows[i]; i++){
match1[match1.length++] = row.cells[0].textContent+row.cells[1].textContent+row.cells[2].textContent;
match1[match1.length++] = row.cells[2].textContent+row.cells[1].textContent+row.cells[0].textContent;
if(match_col.length != 0){
match_col[0] = match_col[0]+row.cells[0].textContent;
match_col[1] = match_col[1]+row.cells[1].textContent;
match_col[2] = match_col[2]+row.cells[2].textContent;
match_col[3] = row.cells[0].textContent+match_col[3];
match_col[4] = row.cells[1].textContent+match_col[4];
match_col[5] = row.cells[2].textContent+match_col[5];
}else{
match_col[0] = row.cells[0].textContent;
match_col[1] = row.cells[1].textContent;
match_col[2] = row.cells[2].textContent;
match_col[3] = row.cells[0].textContent;
match_col[4] = row.cells[1].textContent;
match_col[5] = row.cells[2].textContent;
}
if(match_dia.length != 0){
match_dia[0] = match_dia[0]+row.cells[temp_dia1++].textContent;
match_dia[1] = match_dia[1]+row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent+match_dia[2];
match_dia[3] = row.cells[temp_dia4--].textContent+match_dia[3];
}else{
match_dia[0] = row.cells[temp_dia1++].textContent;
match_dia[1] = row.cells[temp_dia2--].textContent;
match_dia[2] = row.cells[temp_dia3++].textContent;
match_dia[3] = row.cells[temp_dia4--].textContent;
}
}
for(var i=0;i<match_col.length;i++){
match1[match1.length++] = match_col[i];
}
match1[match1.length++] = match_dia[0];
match1[match1.length++] = match_dia[1];
return match1;
}
function getRandom(){
return Math.floor(Math.random() * arr_num.length) + 0 ;
}
</script>
</head>
<body>
<form metdod="post">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100"v id="grid">
<tr>
<td id="1-1" height="19" width="20%"> </td>
<td id="1-2" height="19" width="20%"> </td>
<td id="1-3" height="19" width="20%"> </td>
</tr>
<tr>
<td id="2-1" height="16" width="20%"> </td>
<td id="2-2" height="16" width="20%"> </td>
<td id="2-3" height="16" width="20%"> </td>
</tr>
<tr>
<td id="3-1" height="19" width="20%"> </td>
<td id="3-2" height="19" width="20%"> </td>
<td id="3-3" height="19" width="20%"> </td>
</tr>
</table>
<br><br>
<div id="count" name="count"></div>
<br><br>
<input type="button" onClick="return run();" value="run">
</form>
</body>
</html>
This is how you would assign a value to each cell:
for(var row = 1; row <= 3; row++) {
for(var col = 1; col <= 3; col++ {
var id = '#'+ row + "-" + col;
$(id).html(/* put some content here */);
}
}
To assign a random number see Math.random(). If you multiply that value with 10 and round it down, you will get an integer between 0 and 9. Use that value to pick an element from your array.
Edit
So if you have an array like letters = [ "A", "B", "CD", "asum", 12, "whatsoever" ]and a random number n then letters[n] will give you the array element with index n. For n == 2: letters[n] == "CD"
Well this is NOT bingo but your "assign random letter a,b,c to a space in a grid" can be satisfied by:
var bingocol = ["a", "b", "c"];
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$('#runbingo').on("click", function() {
var nextcolindex = getRandomIntInclusive(0, 2);
var nextletterindex = getRandomIntInclusive(0, 2);
var nextrow = getRandomIntInclusive(0, 2);
$('#grid').find('tr').eq(nextrow).find('td').eq(nextcolindex).html(bingocol[nextletterindex]);
});
NOW if you really want to emulate BINGO where the column varies and the NUMBERS in the column vary by a given sequence that is a different problem; note that you would then need to have one algorithm to assign the player cards and another to pick random values from a list for the "game" card both of which would need to consider the range and previously filled values to exclude duplicates - doable but an entirely different problem.
Here is the code above in action: https://jsfiddle.net/MarkSchultheiss/tjd7j3oh/
The code works for the most part.
Whenever the interval is set to refresh the game card, the onclick functions no longer work and the variable no longer increments.
What am I missing here?
You Can comment out the line with the setInterval() to see the desired outcome. It should refresh every second keeping the variable score and incrementing whenever someone clicks on the images. Thanks!
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 2 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if (randomNumber == 1) {
image = "<img src='gopher.jpg' class='gopher' height='100' width='100'>";
} else if (randomNumber == 2) {
image = "<img src='lettuce.jpg' class='lettuce' height='100' width='100'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
setTimeout(function() {
alert("Your Score is " + score)
}, 15000);
setInterval(UpdateTable, 1000);
var score = 0;
$(".lettuce").click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = score;
});
$(".gopher").click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = score;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<center>
<div id="container">
<div id="header">
<h1>Welcome</h1>
<div id="scoreOut"></div>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
//<input id="btn" type="button" value="Play The Game!!" />
</center>
Figured it out!
Needed to put my JQUERY on.click goodies in the actual main function, which I did not have in the first place, in with the other functions nested in it.
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gopher Broke</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#gameCard td{
padding:0; margin:0;
}
#gameCard {
border-collapse: collapse;
cursor:url(finger2.png), pointer;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">
<h1>GOPHER BROKE</h1>
<center>You have 15 seconds to stop as many gophers as possible!</center>
<div id="scoreOut">Score:</div>
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>
</div>
<div id="content">
<table id="gameCard">
<tbody>
<tr>
<td id="cell00"> </td>
<td id="cell01"> </td>
<td id="cell02"> </td>
<td id="cell03"> </td>
</tr>
<tr>
<td id="cell10"> </td>
<td id="cell11"> </td>
<td id="cell12"> </td>
<td id="cell13"> </td>
</tr>
<tr>
<td id="cell20"> </td>
<td id="cell21"> </td>
<td id="cell22"> </td>
<td id="cell23"> </td>
</tr>
<tr>
<td id="cell30"> </td>
<td id="cell31"> </td>
<td id="cell32"> </td>
<td id="cell33"> </td>
</tr>
<tr>
<td id="cell40"> </td>
<td id="cell41"> </td>
<td id="cell42"> </td>
<td id="cell43"> </td>
</tr>
<tr>
<td id="cell50"> </td>
<td id="cell51"> </td>
<td id="cell52"> </td>
<td id="cell53"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<!--<input id="btn" type="button" value="Play The Game!!" />-->
</center>
<script>
var score = 0;
function game(){
// var btn = document.getElementById('btn');
//btn.addEventListener('click', UpdateTable);
// Set the max length and Width
var maxWidth = 4;
var maxLength = 6;
// Returns a random number
function CreateRandom() {
return Math.floor(Math.random() * 4 + 1);
}
//function to create an image
function CreateGopher() {
var randomNumber = CreateRandom();
var image = "Sup";
if(randomNumber == 1){
image = "<img src='gopher.jpg' class='gopher' height='50' width='50'>";
}
else if(randomNumber == 2){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 3){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
else if(randomNumber == 4){
image = "<img src='lettuce.jpg' class='lettuce' height='50' width='50'>";
}
return image;
}
//create table
function UpdateTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
function newTable() {
// Iterate over each cell and set a random number
for (var i = 0; i < maxLength; i++) {
for (var j = 0; j < maxWidth; j++) {
tmp = 'cell' + i + j;
document.getElementById(tmp).innerHTML = CreateGopher();
}
}
}
//Use The function update table
UpdateTable();
$( ".lettuce" ).click(function() {
//alert( "You Clicked on the lettuce" );
score -= 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
$( ".gopher" ).click(function() {
//alert( "You Clicked on the lettuce" );
score += 5;
document.getElementById("scoreOut").innerHTML = "<h1>Score :" + score;
});
}
game();
setInterval(game, 1000);
setTimeout(function ()
{alert("Your Score is " + score)
window.location.href = "startGame.html";
}, 16000);
</script>
</body>
</html>
I have list of array elements like {5000,10000,25000,50000,100000}
i want those elements should assign to the text field with buttons on click.Like as show in the image
the units value should change according to the click events.
Here is the sample code
<html>
<head>
<style>
td { width:33%; }
</style>
<script>
var counter = 0;
function upDate(){
counter++;
if (counter > 7){
counter = 0;
}
var description = new Array(7)
description[0] = "5000";
description[1] = "10000";
description[2] = "25000";
description[3] = "50000";
description[4] = "100000";
description[5] = "250000";
description[6] = "500000";
description[7] = "Unlimited";
document.myForm.units.value = description[counter];
}
var lenght = 0;
function upDateLength(){
lenght++;
if (lenght > 2){
lenght = 0;
}
var description = new Array(3)
description[0] = "30sec";
description[1] = "60sec";
description[2] = "unlimited";
document.myForm.length.value = description[lenght];
}
var utype = 0;
function upDateType(){
utype++;
if (utype > 2){
utype = 0;
}
var description = new Array(3)
description[0] = "Feature";
description[1] = "Background";
description[2] = "Theme";
document.myForm.utype.value = description[utype];
}
</script>
</head>
<body>
<form method="post" action="" name="myForm">
<table width="75%" align="center" border="1">
<tr>
<td colspan="3" align="center"><h2>License Requests</h2></td>
</tr>
<tr>
<td><input type="radio" name="type" value="vocal"><span>Vocal</span></td>
<td><input type="radio" name="type" value="inst"><span>Instrumental</span></td>
<td> </td>
</tr>
<tr>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDate()"> Units</td></tr>
<tr><td><input type="text" name="units" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateLength()"> Length</td></tr>
<tr><td><input type="text" name="length" value="" ></td></tr></table>
</td>
<td>
<table><tr><td><img src="images/up.jpg" width="10px" onclick="upDateType()"> User Type</td></tr>
<tr><td><input type="text" name="utype" value="" ></td></tr></table>
</td>
</tr>
</table>
</form>
</body>
<html>