View Full Version : Ajuda com javascript
Boas, tou a fazer um trabalho académico e tou com um ligeiro problema. É o seguinte: Tenho uma página com um formulário para introduzir dados numa base de dados relativos a um DVD. Quando chego à parte de seleccionar as legendas desse DVD tenho um "button" que ao carregar vai abrir uma nova página (pop up) com um novo formulário com as possíveis legendas. Dps de seleccionar as legendas q o DVD a introduzir tem eu queria fechar essa página (pop up) e voltar à página inicial (carregando no "submit"). Fazer cada acção dessas em separado é relativamente simples, fechar e voltar para uma nova página tb consigo fazer. Agora fechar a pop up e fazer o refresh à página inicial, adicionando as novas variaveis (utilizando o get) n tou a chegar lá.. Alguém sabe como fazer isto? Ou sabe me apontar o caminho q devo seguir pa conseguir?
Boas, tou a fazer um trabalho académico e tou com um ligeiro problema. É o seguinte: Tenho uma página com um formulário para introduzir dados numa base de dados relativos a um DVD. Quando chego à parte de seleccionar as legendas desse DVD tenho um "button" que ao carregar vai abrir uma nova página (pop up) com um novo formulário com as possíveis legendas. Dps de seleccionar as legendas q o DVD a introduzir tem eu queria fechar essa página (pop up) e voltar à página inicial (carregando no "submit"). Fazer cada acção dessas em separado é relativamente simples, fechar e voltar para uma nova página tb consigo fazer. Agora fechar a pop up e fazer o refresh à página inicial, adicionando as novas variaveis (utilizando o get) n tou a chegar lá.. Alguém sabe como fazer isto? Ou sabe me apontar o caminho q devo seguir pa conseguir?
pk n optas por uma abordagem javascript?
vê se este exemplo te ajuda:
ficheiro "teste.htm", será o teu formulario principal:
<html>
<body>
<form name="frmTeste" method="POST" id="frmTeste">
Nome: <input type="text" id="txtName" name="txtName">
Sexo:
<select name="ddlSex" id="ddlSex">
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
</select>
<br>
Sexo (extenso): <input type="text" id="txtSex" name="txtSex">
<br>
<input type="button" value="Abrir opções" onclick="window.open('teste2.htm')">
</form>
</body>
</html>
ficheiro "teste2.htm" será a tal popup que te vai permitir escolher uma opção, quando pressionares o botão do form, nesta página, vai actualizar os campos que estão no formulário anterior:
<html>
<head>
<script type="text/javascript">
function updateValues(form){
//campos da "outra" página que vão ser actualizados
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="txtName";
arrFieldsToUpdate[1]="ddlSex";
arrFieldsToUpdate[2]="txtSex";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="txtName2";
arrFieldsToUpdateFrom[1]="ddlSex2";
arrFieldsToUpdateFrom[2]="ddlSex2";
var count=arrFieldsToUpdate.length;
for(var i=0;i<count;i++){
var fieldToUpdate=opener.document.getElementById(arrFi eldsToUpdate[i]);
var fieldToUpdateFrom=form.elements[arrFieldsToUpdateFrom[i]];
fieldToUpdate.value=fieldToUpdateFrom.value;
}
self.close();
}
</script>
</head>
<body>
<form name="frmTeste" method="post" id="frmTeste">
Nome: <input type="text" id="txtName" name="txtName2">
Sexo:
<select name="ddlSex" id="ddlSex2">
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
</select>
<input type="button" value="Actualizar Valores" onclick="updateValues(this.form);">
</form>
</body>
</html>
penso que se optares por 1 solução server-side, terás de por ex. na popup qdo escolheres uma opção e a submeteres terás de a guardar na bd, depois terás de reconstruir o formulário, porém imagina que alteraste vários campos no formulário principal, esses valores iriam ser perdidos, visto que não seriam guardados em lado nenhum e o formulário iria ser carregado.
espero n ter baralhado ainda mais :joker:
p2dro, obg pela resposta..
O meu caso é o seguinte:
Ficheiro 'novo_dvd.php'
<form name="form1" action="novo_dvd.php" method="get" enctype="multipart/form-data" id="form1">
<?php
include("conf.php");
$con=mysql_connect($host,$user,$pass);
if(!$con){
die("ERRO NA LIGAÇÃO". mysql_error());
}
mysql_select_db($db,$con);
?>
<table width="600" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><div align="right">Nome:</div></td>
<td><input name="nome" id="nome" type="text" size="30" maxlength="45"></td>
</tr>
<tr>
<td><div align="right">Genero:</div></td>
<td>
<select name="genero" id="genero">
<?php
$result=mysql_query(" SELECT idgenero as id,tipo as name from generos");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
if($genero==$row["id"])
printf("<option value='%d' selected='selected'>%s</option>\n", $row["id"], $row["name"]);
else
printf("<option value='%d'>%s</option>\n", $row["id"], $row["name"]);
}
mysql_free_result($result);
if(!isset($genero))
echo "<option value='-1' selected='selected'>Seleccione um genero</option>";
else
echo "<option value='-1'>Seleccione um genero</option>";
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Ano:</div></td>
<td>
<select name="ano" id="ano">
<?php
for($i=date("Y");$i>=date("Y")-50;$i--){
printf("<option value='%d'>%d</option>\n", $i, $i);
}
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Formato:</div></td>
<td>
<select name="formato" id="formato">
<?php
$result=mysql_query(" SELECT idformato as id,formato as name from formatos");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
if($formato==$row["id"])
printf("<option value='%d' selected='selected'>%s</option>\n", $row["id"], $row["name"]);
else
printf("<option value='%d'>%s</option>\n", $row["id"], $row["name"]);
}
mysql_free_result($result);
if(!isset($formato))
echo "<option value='-1' selected='selected'>Seleccione um formato</option>";
else
echo "<option value='-1'>Seleccione um formato</option>";
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Idioma:</div></td>
<td><input name="nomee" type="hidden" value="<?php echo $nome;?>">
<input name="idiomas_filme" type="button" onClick="AbrirPopUp('idiomas_filme.php');" value="Seleccione"></td>
</tr>
<tr>
<td><div align="right">Legendas:</div></td>
<td><input name="escolher_legendas" type="button" onClick="MM_openBrWindow('legendas_filme','EscolherLegendas ','scrollbars=yes,width=200px,height=400px')" value="Seleccione"></td>
</tr>
<tr>
<td><div align="right">Número de discos:</div></td>
<td>
<select name="numdiscos" id="numdiscos">
<?php
for($i=1;$i<=5;$i++){
printf("<option value='%d'>%d</option>\n", $i, $i);
}
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Link:</div></td>
<td><input name="link" type="text" size="30" maxlength="45" id="link"></td>
</tr>
<tr>
<td><div align="right">Imagem:</div></td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000"> <!--http://www.php-mysql-tutorial.com/php-mysql-upload.php-->
<input name="userfile" type="file" id="userfile">
</td>
</tr>
<tr>
<td><input name="flag" type="hidden" value="<?php echo '1'; ?>"></td>
<td><input type="submit" name="submit" value="Introduzir"></td>
</tr>
</table>
</form>
Ficheiro 'idiomas_filme.php': (Abre ao clicar no botão que está em frente ao Idioma)
<body>
<?php
include("conf.php");
$con=mysql_connect($host,$user,$pass);
if(!$con){
die("ERRO NA LIGAÇÃO". mysql_error());
}
mysql_select_db($db,$con);
?>
<form action="" method="get">
<?php
$result=mysql_query(" SELECT ididioma as id,idioma as name from idiomas");
echo "<table width='200' border='1px'>";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<tr>";
printf("<td><div align='right'><input name='idiomas' type='checkbox' value='%d'></div></td><td><div align'left'>%s</div></td>", $row["id"], $row["name"]);
echo "</tr>";
}
echo "<tr><td> </td><td><input name='submit' type='submit' value='OK' onClick='updateValues(this.form);refreshParent();'></td></tr>";
echo "</table>";
mysql_free_result($result);
echo "O nome é:</br>";
echo "$nomee";
?>
</form>
<?php
mysql_close($con);
?>
</body>
Ficheiro 'funcoes.js':
function AbrirPopUp(pagina) {
var width = 285;
var height = 390;
var left = (screen.width-width)/2;
var top = (screen.height-height)/2;
window.open(pagina,'pagina','width='+width+', height='+height+', top='+top+', left='+left+'');
}
function refreshParent() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow){
window.opener.progressWindow.close()
}
window.close();
}
function updateValues(form){
//campos da "outra" página que vão ser actualizados
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="nome";
arrFieldsToUpdate[1]="genero";
arrFieldsToUpdate[2]="ano";
arrFieldsToUpdate[3]="formato";
arrFieldsToUpdate[4]="numdiscos";
arrFieldsToUpdate[5]="link";
arrFieldsToUpdate[6]="userfile";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";
var count=arrFieldsToUpdate.length;
for(var i=0;i<count;i++){
var fieldToUpdate=opener.document.getElementById(arrFi eldsToUpdate[i]);
var fieldToUpdateFrom=form.elements[arrFieldsToUpdateFrom[i]];
fieldToUpdate.value=fieldToUpdateFrom.value;
}
self.close();
}
Era isto que estavas a dizer para fazer? Tou com dúvida ali no fim do 'idiomas_filme.php', é para meter o onClick='updateValues(this.form);refreshParent();' ??
Não tou a conseguir meter isto a funcionar ainda.. :mad:
p2dro, obg pela resposta..
O meu caso é o seguinte:
Ficheiro 'novo_dvd.php'
<form name="form1" action="novo_dvd.php" method="get" enctype="multipart/form-data" id="form1">
<?php
include("conf.php");
$con=mysql_connect($host,$user,$pass);
if(!$con){
die("ERRO NA LIGAÇÃO". mysql_error());
}
mysql_select_db($db,$con);
?>
<table width="600" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><div align="right">Nome:</div></td>
<td><input name="nome" id="nome" type="text" size="30" maxlength="45"></td>
</tr>
<tr>
<td><div align="right">Genero:</div></td>
<td>
<select name="genero" id="genero">
<?php
$result=mysql_query(" SELECT idgenero as id,tipo as name from generos");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
if($genero==$row["id"])
printf("<option value='%d' selected='selected'>%s</option>\n", $row["id"], $row["name"]);
else
printf("<option value='%d'>%s</option>\n", $row["id"], $row["name"]);
}
mysql_free_result($result);
if(!isset($genero))
echo "<option value='-1' selected='selected'>Seleccione um genero</option>";
else
echo "<option value='-1'>Seleccione um genero</option>";
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Ano:</div></td>
<td>
<select name="ano" id="ano">
<?php
for($i=date("Y");$i>=date("Y")-50;$i--){
printf("<option value='%d'>%d</option>\n", $i, $i);
}
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Formato:</div></td>
<td>
<select name="formato" id="formato">
<?php
$result=mysql_query(" SELECT idformato as id,formato as name from formatos");
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
if($formato==$row["id"])
printf("<option value='%d' selected='selected'>%s</option>\n", $row["id"], $row["name"]);
else
printf("<option value='%d'>%s</option>\n", $row["id"], $row["name"]);
}
mysql_free_result($result);
if(!isset($formato))
echo "<option value='-1' selected='selected'>Seleccione um formato</option>";
else
echo "<option value='-1'>Seleccione um formato</option>";
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Idioma:</div></td>
<td><input name="nomee" type="hidden" value="<?php echo $nome;?>">
<input name="idiomas_filme" type="button" onClick="AbrirPopUp('idiomas_filme.php');" value="Seleccione"></td>
</tr>
<tr>
<td><div align="right">Legendas:</div></td>
<td><input name="escolher_legendas" type="button" onClick="MM_openBrWindow('legendas_filme','EscolherLegendas ','scrollbars=yes,width=200px,height=400px')" value="Seleccione"></td>
</tr>
<tr>
<td><div align="right">Número de discos:</div></td>
<td>
<select name="numdiscos" id="numdiscos">
<?php
for($i=1;$i<=5;$i++){
printf("<option value='%d'>%d</option>\n", $i, $i);
}
?>
</select>
</td>
</tr>
<tr>
<td><div align="right">Link:</div></td>
<td><input name="link" type="text" size="30" maxlength="45" id="link"></td>
</tr>
<tr>
<td><div align="right">Imagem:</div></td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000"> <!--http://www.php-mysql-tutorial.com/php-mysql-upload.php-->
<input name="userfile" type="file" id="userfile">
</td>
</tr>
<tr>
<td><input name="flag" type="hidden" value="<?php echo '1'; ?>"></td>
<td><input type="submit" name="submit" value="Introduzir"></td>
</tr>
</table>
</form>
Ficheiro 'idiomas_filme.php': (Abre ao clicar no botão que está em frente ao Idioma)
<body>
<?php
include("conf.php");
$con=mysql_connect($host,$user,$pass);
if(!$con){
die("ERRO NA LIGAÇÃO". mysql_error());
}
mysql_select_db($db,$con);
?>
<form action="" method="get">
<?php
$result=mysql_query(" SELECT ididioma as id,idioma as name from idiomas");
echo "<table width='200' border='1px'>";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<tr>";
printf("<td><div align='right'><input name='idiomas' type='checkbox' value='%d'></div></td><td><div align'left'>%s</div></td>", $row["id"], $row["name"]);
echo "</tr>";
}
echo "<tr><td> </td><td><input name='submit' type='submit' value='OK' onClick='updateValues(this.form);refreshParent();'></td></tr>";
echo "</table>";
mysql_free_result($result);
echo "O nome é:</br>";
echo "$nomee";
?>
</form>
<?php
mysql_close($con);
?>
</body>
Ficheiro 'funcoes.js':
function AbrirPopUp(pagina) {
var width = 285;
var height = 390;
var left = (screen.width-width)/2;
var top = (screen.height-height)/2;
window.open(pagina,'pagina','width='+width+', height='+height+', top='+top+', left='+left+'');
}
function refreshParent() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow){
window.opener.progressWindow.close()
}
window.close();
}
function updateValues(form){
//campos da "outra" página que vão ser actualizados
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="nome";
arrFieldsToUpdate[1]="genero";
arrFieldsToUpdate[2]="ano";
arrFieldsToUpdate[3]="formato";
arrFieldsToUpdate[4]="numdiscos";
arrFieldsToUpdate[5]="link";
arrFieldsToUpdate[6]="userfile";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";
var count=arrFieldsToUpdate.length;
for(var i=0;i<count;i++){
var fieldToUpdate=opener.document.getElementById(arrFi eldsToUpdate[i]);
var fieldToUpdateFrom=form.elements[arrFieldsToUpdateFrom[i]];
fieldToUpdate.value=fieldToUpdateFrom.value;
}
self.close();
}
Era isto que estavas a dizer para fazer? Tou com dúvida ali no fim do 'idiomas_filme.php', é para meter o onClick='updateValues(this.form);refreshParent();' ??
Não tou a conseguir meter isto a funcionar ainda.. :mad:
pelo k percebi só vais actualizar o campo idioma, recorrendo à popup
tenta mudar isto
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="nome";
arrFieldsToUpdate[1]="genero";
arrFieldsToUpdate[2]="ano";
arrFieldsToUpdate[3]="formato";
arrFieldsToUpdate[4]="numdiscos";
arrFieldsToUpdate[5]="link";
arrFieldsToUpdate[6]="userfile";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";
para isto
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="nomee";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";
atenção que não precisas de fazer o refresh ao parent, a função "updateValues" vai modificar o campo idiomas, se vais fazer 1 refresh vais re-carregar a página com os valores da BD;
no file "idiomas_filme.php" altera o type="submit" para type="button" e onClick='updateValues(this.form);refreshParent();' para onClick='updateValues(this.form);'
basicamente aquele código que mostrei altera directamente o formulário principal, depois nesse formulário principal quando fizeres o submit é que vai guardar a informação na bd.
Ok, já estou a perceber melhor a lógica disto, pelo menos já voltei do popup para a parent sem perder os dados que lá tinha inicialmente.
Continuando,
eu quero manter todos os dados e actualizar só o campo "idiomas_filme", por isso mudei para isto:
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="idiomas_filme";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";Não é isto?
Agora não estou é a conseguir passar para a parent o q selecciono na página idiomas_filme.php. Será por estar a usar várias checkbox com o mesmo nome?
Qdo volto à parent o button q carrego para ir para o popup fica assim:
http://sard.planetaclix.pt/undifined.jpg
Aquele undefined quer dizer o que?
Desculpa lá tar a fazer tantas perguntas, mas tou mm a fritar com isto..
Ok, já estou a perceber melhor a lógica disto, pelo menos já voltei do popup para a parent sem perder os dados que lá tinha inicialmente.
Continuando,
eu quero manter todos os dados e actualizar só o campo "idiomas_filme", por isso mudei para isto:
var arrFieldsToUpdate = new Array();
arrFieldsToUpdate[0]="idiomas_filme";
//campos desta página que contém os valores que vão ser actualizados
var arrFieldsToUpdateFrom = new Array();
arrFieldsToUpdateFrom[0]="idiomas";Não é isto?
Agora não estou é a conseguir passar para a parent o q selecciono na página idiomas_filme.php. Será por estar a usar várias checkbox com o mesmo nome?
Qdo volto à parent o button q carrego para ir para o popup fica assim:
http://sard.planetaclix.pt/undifined.jpg
Aquele undefined quer dizer o que?
Desculpa lá tar a fazer tantas perguntas, mas tou mm a fritar com isto..
pois, aquele script de exemplo que te mostrei não funciona com checkboxes :-D, nem reparei k era isso k kerias utilizar, aquele script só funciona com textbox e dropdown.
subtitui a função "updateValues" (ou então muda o nome, caso precises dela para alguma coisa :)) por esta:
function updateValues(form, fieldSource, fieldDestination){
fieldDestination=opener.document.getElementById(fi eldDestination);
fieldSource=form.elements[fieldSource];
count=fieldSource.length;
result="";
if(count==undefined){ //só existe 1 checkbox
result = (fieldSource.checked) ? fieldSource.value : "";
}
else{ //várias checkbox, percorrer array
for(i=0;i<count;i++){
if (fieldSource[i].checked) {
result+=fieldSource[i].value+";";
}
}
}
fieldDestination.value=result;
self.close();
}
e agora põe o botão assim:
<input name='submit' type='button' value='OK' onClick="updateValues(this.form,'idiomas','idiomas_filme');">
Pelo k vejo no teu código (não sei se é o mais actual k tu tens) o idiomas_filme é um botão, é ai k pretendes mostrar a informação? É pk eu acho k o valor do button não é passado no formulário, cria antes uma textbox (ou usa um hidden field) e armazena lá a informação.
|
|