Ir para conteúdo

POWERED BY:

Arquivado

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

lordwillers

Preenchimento tabela JavaScript

Recommended Posts

E ai pessoal,

sou iniciante em javaScript / Jquery, dei uma pesquisada mas não consegui achar nada parecido com minha dúvida/dificuldade.

Segue abaixo imagem do meu projeto. ( http://imageshack.com/a/img823/3015/xpxf.jpg )

xpxf.jpg

 

É o seguinte, preciso fazer com que os dados selecionados (o texto, não a ID ) nos Selects passam para a tabela abaixo assim que clicado em "Processar", ou seja, pode ser adicionado várias linhas e ainda salvar em uma matriz as informações para que eu possa passar para o PHP, montar a Query e jogar no banco quando clicado em "Finalizar".

 

Alguém ai pode me ajudar..

(OBS: os selects tem preenchimento dinâmico, feito em Jquery, ou seja, quando selecionar o nível de questão, irá aparecer apenas os assunto vinculados com o nível selecionado, e assim por diante ).

 

Obrigado a todos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz um código pequeno, espero que te ajude.

 

Aqui ficaria a parte principal aonde aparece os selects

 

<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
#menu ul {
	padding:0px;
	margin:0px;
	background-color:#EDEDED;
	list-style:none;
}
#menu ul li { display: inline; }
#menu ul li {
	padding: 2px 10px;
	display: inline-block;
 
	/* visual do link */
	background-color:#EDEDED;
	color: #333;
	text-decoration: none;
	border-bottom:3px solid #EDEDED;
}

</style>
<script>
$(document).ready(function(){
	$( "#enviar" ).click(function() {
			var professor = $("#professor").val();
			var instituicao = $("#instituicao").val();
			var avaliacao = $("#avaliacao").val();
			$.ajax({
			  type: "POST",
			  url: "seleciona.php",
			  data: { professor: professor, instituicao: instituicao, avaliacao: avaliacao }
			})
			  .done(function( msg ) {
				$('#conteudo_novo').append(msg);
			  });
	});
});
</script>
</head>
<BODY>
<form name="form1" action="form.php" method="POST">
	<table>
	<tr>
		<td> Selecione o professor</td>
		<td>
		<select name="professor" id="professor">
			<option value="">Selecione</option>
			<option value="professor1">professor1</option>
			<option value="professor2">professor2</option>
			<option value="professor3">professor3</option>
		</select>
		</td>
		<td>
		<select name="instituicao" id="instituicao">
			<option value="">Selecione</option>
			<option value="instituicao1">instituicao1</option>
			<option value="instituicao2">instituicao2</option>
			<option value="instituicao3">instituicao3</option>
		</select>
		</td>
		<td>
		<select name="avaliacao" id="avaliacao">
			<option value="">Selecione</option>
			<option value="avaliacao1">avaliacao1</option>
			<option value="avaliacao2">avaliacao2</option>
			<option value="avaliacao3">avaliacao3</option>
		</select>
		</td>
		<td><input type="button" name="enviar" value="enviar" id="enviar"></td>
	</tr>
<table>	
</form>
<nav id="menu">
	<ul>
		<li>Professor</li>
		<li>Instituicao</li>
		<li>Avaliacao</li>
	</ul>

<div id="conteudo_novo">
	
</div>
</nav>
</div>


</BODY>
</HTML>

 

E esse o arquivo aonde o ajax chama a pagina. (seleciona.php)

 

<?php

	$prof = $_REQUEST['professor'];
	$inst = $_REQUEST['instituicao'];
	$avav = $_REQUEST['avaliacao'];
	
	echo"<ul><li>".$prof."</li><li>".$inst."</li><li>".$avav."</li>";

?>

 

Espero que te ajude!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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