Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ar0n

Página recarregando após submeter formulário

Por , em Javascript

Recommended Posts

Ar0n    2

Ar0n
Postado

Olá, estou tendo que desenvolver um jogo de batalha naval em javascript para a faculdade até ai tudo bem.

O problema é que quando eu submeto o formulário para chamar a função em javascript para criar o tabuleiro a página é recarregada logo em seguida e o meu tabuleiro desaparece :/ , eu só consigo visualizar o tabuleiro, pois estou inserindo um "alert" no final da função.

Então alguém sabe como impedir de uma página ser recarregada? Após a página submeter um formulário.

Segui o meu código.

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="resources/css/index.css" />
		
		<title>Batalha Naval</title>
	</head>
	<body onload="loginCookie()">
		<form onsubmit="return inicializarTabuleiro()">
			<input type="number" id="numLinhas" required min="3" max="8" placeholder="Nº de linhas" />
			<input type="number" id="numColunas" required min="3" max="8" placeholder="Nº de colunas" />
			<input type="number" id="numTentativas" required min="1" max="64" placeholder="Nº de tentativas" />
			<input type="submit" value="Criar" />
			<input type="button" value="Ver Ranking" onclick="exibirRanking()"/>
			<input type="button" value="Limpar Ranking" onclick="deleteCookie()"/>
			<div id="barraDeInformacoes"></div>
		</form>
		
		<div id="panel_fundo"></div>
		
		<div id="ranking">
			<p id="tituloDoRanking"></p>
			<table id="listaDoRanking">
				<thead>
					<tr>
						<td>Data</td><td>Hora</td><td>Tamanho</td><td>Tentativas</td><td>Duração(seg.)</td>
					</tr>
				</thead>
				<tbody id="corpoDaListaDoRanking"></tbody>
			</table>
			<input type="button" id="btnFecharRanking" value="Fechar Ranking" onclick="fecharRanking()"/>
		</div>
		
		<table id="tabuleiro"></table>
		
		<script type="text/javascript" src="resources/js/index.js"></script>
	</body>
</html>

function inicializarTabuleiro(){	

	var numLinhas = document.getElementById("numLinhas").value;	
	var numColunas = document.getElementById("numColunas").value;	
	var numTentativas = document.getElementById("numTentativas").value;	

	if (validar(numLinhas, numColunas, numTentativas)
	 == false){
	 	alert("false");
		return false;
	}

	var tabela 	= document.getElementById("tabuleiro");
	
	criar_tabela(numLinhas, numColunas, numTentativas, tabela);

	alert("teste");

	return true;

}

function validar(numLinhas, numColunas, numTentativas){

	if(numLinhas == 0 || numLinhas < 3 || numLinhas > 8){
		return false;
	}else if(numColunas == 0 || numColunas < 3 || numColunas > 8){
		return false;
	}else if(numTentativas == 0 || numTentativas < 1 || numTentativas > 64){
		return false;
	}
}//function - validar

function criar_tabela(numLinhas, numColunas, numTentativas, tabela){
	for (var i = 0; i < numLinhas; i++) {

		var ultima	 = tabela.rows.length;
		var linha	 = document.createElement("tr");	
		linha.setAttribute("id","line"+ultima);

		for (var j = 0; j < numColunas; j++) {
			
			var celula	 = document.createElement("td");
			var elemento	 = document.createElement("button");
			celula.appendChild(elemento);
			linha.appendChild(celula);		

		};//for - j	

		tabela.appendChild(linha);	

	};//for - i
}//function - criar_tabela

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Na função inicializarTabuleiro troca o return true, por false

 

Ai o form não vai ser enviado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito