Skrypt " Podgląd Newsa.", Pomooocy Opcje

[korey]

Witam..

Prubuje zrobić skrypt a dokładnie BUTTON który działał by tak ze po kliknięciu na niego wyskakuje mi okienko z Treściami wpisanymi w formularzu. (ma to ziałać jak klasyczny podlą posta na forach)
Kombinowałam na kilka sposobów i miernie mi to wychodziło.

O to Sposoby jakimi próbowałem to zrobić.

Formularz:
Nazwa pliku: add_news_form

[PHP] pobierz, plaintext 
<?php
	echo 'Dodawanie newsa.<br />';
 
				if ((isset($log) && isset($pass) && $log != ""  && $pass != ""))
				{
 
echo 'formulaz dodawania newsa';
 
	$dzien = date("j:m:Y");
	$godzina = date("H:i:s");
	$data = "Dnia $dzien, $godzina";
 
 
echo '<form action="admin.php?administrator=add_news_doit" method="post">';
echo '<table style="margin-left: auto; margin-right: auto;">';
echo '<tr>';
echo '<td>Tytuł:</td><td><input name="tytul" type="text" size="34" value="" /></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Data:</td><td><input name="data" type="text" size="34" value="'.$data.'" /></td>';
echo '</tr>';
echo '<tr>';
 
echo '<td>Autor:</td><td><input name="autor" id="autor" type="text" id="autor"size="34" value="" />';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Krótka Tresc:</td><td><textarea name="tresc" id="content" cols="60" rows="7"></textarea></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Pełny Tekst:</td><td><textarea name="full_tresc" cols="60" rows="7"></textarea></td>';
echo '</tr>';
 
echo '</table>';
echo '<center>';
echo '<input type="reset" value="Wyczysc" /> <input type="submit" value="Dodaj newsa" />';
echo ' <INPUT TYPE="BUTTON"  value="Wstecz" onClick="history.back()" />';
echo ' <INPUT TYPE="BUTTON" value="Podglad" onClick="window.open()" />';
echo '</form>';
echo '</center>';			
				}
				else {
				page_error();
					}
 
?>
[PHP] pobierz, plaintext 

Plik Który ma wyświatlać nawsa w podglądzie:
nazwa: view.php

[PHP] pobierz, plaintext 
      <?php
 
      echo $_GET['content'];
 
      ?>
[PHP] pobierz, plaintext 

Za pomocą tego kodu próbowałem to zrobić ale nie wychodziło.

[PHP] pobierz, plaintext 
echo '<input type="button" onclick="window.open('preview.html?content='+document.getElementById('content').value,'Podglad','width=400;height=300')" />';
[PHP] pobierz, plaintext 

PHP wyświetlało błąd, a gdy pozamieniałe. "" , '' Przycisk nie działał.

zrobiłem też funkcje i wstawiałem ją w input ale nic z tego:

[PHP] pobierz, plaintext 
echo ' <INPUT TYPE="BUTTON" value="Podglad" onClick="view_news()" />';
//albo
echo ' <INPUT TYPE="BUTTON" value="Podglad" onClick="view_news('$tresc, $autor, $data, $tytul, $ful_tresc.')" />';
[PHP] pobierz, plaintext 

Wie ktoś jak moge to zrobić..?

[darko]

np.

[PHP] pobierz, plaintext 
echo 'Dodawanie newsa.<br />';
 
echo 'formulaz dodawania newsa';
 
	$dzien = date("j:m:Y");
	$godzina = date("H:i:s");
	$data = "Dnia $dzien, $godzina";
 
 
echo '<form action="admin.php?administrator=add_news_doit" method="post">';
echo '<table style="margin-left: auto; margin-right: auto;">';
echo '<tr>';
echo '<td>Tytuł:</td><td><input id="tytul" name="tytul" type="text" size="34" value="" /></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Data:</td><td><input id="data" name="data" type="text" size="34" value="'.$data.'" /></td>';
echo '</tr>';
echo '<tr>';
 
echo '<td>Autor:</td><td><input id="autor" name="autor" id="autor" type="text" id="autor"size="34" value="" />';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Krótka Tresc:</td><td><textarea id="tresc" name="tresc" id="content" cols="60" rows="7"></textarea></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Pełny Tekst:</td><td><textarea id="fulltresc" name="full_tresc" cols="60" rows="7"></textarea></td>';
echo '</tr>';
 
echo '</table>';
echo '<center>';
echo '<input type="reset" value="Wyczysc" /> <input type="submit" value="Dodaj newsa" />';
echo ' <INPUT TYPE="BUTTON"  value="Wstecz" onClick="history.back()" />';
echo ' <INPUT TYPE="BUTTON" value="Podglad" onClick="preview();" />';
echo '</form>';
echo '</center>';
echo '<div id="targetDiv"></div>';
[PHP] pobierz, plaintext 

Wyskocz z PHP i na końcu pliku doklej jeszcze to:

[HTML] pobierz, plaintext 
<script>
function preview() {
	var t = document.getElementById('targetDiv');
	var targets = new Array('tytul', 'data', 'autor', 'tresc', 'fulltresc');
	var data = '<b>Podgląd newsa</b>:<br /><br />';
 
	for(var x in targets) {
		data += document.getElementById(targets[x]).value;
		data += '<br />';
	}
	t.innerHTML = data;
}
</script>
[HTML] pobierz, plaintext 

Ten post edytował darko 29.11.2009, 16:41:20

[korey]

ale ta funkcja musi być w tym samym pliku co formularz?

[darko]

Tak, ale zabezpiecz się przed wstrzyknięciem kodu javascript z pól formularza i eskejpuj sobie pojedyncze cudzysłowy, bo Ci skrypt wywali.

Ten post edytował darko 29.11.2009, 16:52:18

[korey]

Jesteś normalnie wielki..
Powiedz mi a dało by tade wpakowac to wszystko w taka tabele:

[PHP] pobierz, plaintext 
  $tytul = $_GET['tytul'];
  $data = $_GET['data'];
  $autor = $_GET['autor'];
  $tresc = $_GET['tresc'];
  $full_tresc = $_GET['full_tresc'];
 
echo '<link rel="stylesheet" type="text/css" href="functions/newsy.css" media="screen"/>';
echo '<table name="news" class="news" cellpadding="3" cellspacing="0">';
echo '<tbody>';
    echo '<tr align="left">';
     echo '<td colspan="2" rowspan="1" name="news_title" class="news_title">'.ucfirst($tytul).'</td>';
   echo '</tr>';
   echo '<tr  align="justify">';
   echo '<td colspan="2" rowspan="1"><b>'.ucfirst($tresc).'</b>';
echo ucfirst($ful_tresc);
   echo '</td>';
 echo ' </tr>';
   echo '<tr>';
      echo '<td name="news_autor" class="news_autor"><b>Autor: </b>'.ucfirst($autor).'</td>';
     echo '<td name="news_data" class="news_data">'.ucfirst($data).'</td>';
    echo '</tr>';
  echo '</tbody>';
echo '</table>';
 
		echo '<br />';
[PHP] pobierz, plaintext 

tak wygląda w news:

[darko]

Wszystko da radę, walcz dalej sam, ale uważaj na dane pochodzące od użytkownika, nigdy im nie ufaj i używaj htmlentities, htmlspecialchars i strip_tags

[korey]

Kurde było by dobrze ale z js to kompletnie nic nie umiem.. kod jest dobry ale nic z niego nie rozumiem

[darko]

[HTML] pobierz, plaintext 
<script>
// funkcja podgląd wywoływana po kliknięciu przycisku podgląd z forumlarza
function preview() {
      // do zmiennej t przypisujemy element div o id=targetDiv
	var t = document.getElementById('targetDiv');
	// w tablicy targets trzymamy nazwy idków elementów forumlarza, z którego ściągamy dane 
	var targets = new Array('tytul', 'data', 'autor', 'tresc', 'fulltresc');
	// w tej zmiennej przechowujemy treść wstrzykiwaną później do naszego diva
	var data = '<b>Podgląd newsa</b>:<br /><br />';
    // dla każdego x znalezionego w tablicy z nazwami idków
	for(var x in targets) {
		// dopisz do wstawianej zawartości wartość elementu formularza o znalezionym id
		data += document.getElementById(targets[x]).value;
		// dodaj jeszcze znacznik nowej linii (<br />)
		data += '<br />';
	}
	// wszystkie dane zebrane, wiec wstrzyknij do (ustaw wartość) docelowego diva 
	t.innerHTML = data;
}
</script>
[HTML] pobierz, plaintext 

Jak będziesz wstawiał wartości przysłane z formularza, to w php używaj funkcji htmlentities, htmlspecialchars i strip_tags

Pozdrawiam!

[korey]

a nie dało by rady jakos tak tego rozłożyć..?
Wtedy pomiędzy mógłbym powstawiać znaczniki tabeli i miałbym taki efekt jaki potrzebuje

[PHP] pobierz, plaintext 
	  data += document.getElementById(targets[tytul]).value;
	  data += '<br />';
	  data += document.getElementById(targets[data]).value;
 	  data += '<br />';
	  data += document.getElementById(targets[autor]).value;
	  data += '<br />';
	  data += document.getElementById(targets[tresc]).value;	  
	  data += '<br />';
	  data += document.getElementById(targets[fulltresc]).value;	
[PHP] pobierz, plaintext 

[darko]

Oczywiście, że można, idziesz dobrym tropem, powodzenia!

[HTML] pobierz, plaintext 
data += '<br /> czy cokolwiek innego';   
         data += document.getElementById('tytul').value;
	  data += '<br /> czy cokolwiek innego';
	  data += document.getElementById('data').value;
 	  data += '<br />';
	  data += document.getElementById('autor').value;
	  data += '<br />';
	  data += document.getElementById('tresc').value;	  
	  data += '<br />';
	  data += document.getElementById('fulltresc').value;
[HTML] pobierz, plaintext 

Ten post edytował darko 29.11.2009, 17:32:50

[korey]

Tak wygląda teraz cała pętla:

[HTML] pobierz, plaintext 
     for(var x in targets) {
 
      // dopisz do wstawianej zawartości wartość elementu formularza o znalezionym id
	  data += '<link rel="stylesheet" type="text/css" href="functions/newsy.css" media="screen"/>';
data += '<table name="news" class="news" cellpadding="3" cellspacing="0">';
  data += '<tbody>';
    data += '<tr align="left">';
	  data += '<td colspan="2" rowspan="1" name="news_title" class="news_title">';
      data += document.getElementById('tytul').value;
	  data += '</td>';
      data += '</tr>';
	  data += '<tr  align="justify">';
      data += '<td colspan="2" rowspan="1"><b>';
      data += document.getElementById('tresc').value;
	  data += '</b>';
      data += document.getElementById('fulltresc').value;  
	  data += '</td>';
	  data += ' </tr>';
	  data += '<tr>';
      data += '<td name="news_autor" class="news_autor"><b>Autor: </b>';
	  data += document.getElementById('autor').value; 
	  data +='</td>';
	  data += '<td name="news_data" class="news_data">';
	  data += document.getElementById('data').value;
 
    data += '</tr>';
  data += '</tbody>';
data += '</table>';
	       // dodaj jeszcze znacznik nowej linii (<br />)
      }
[HTML] pobierz, plaintext 

nie wiem czemu ale gdy naciskam na podgląd wyświetla mi sie kazda z zawartości po 5 razy..
mógłbyś powiedzieć jak zrobić by entery wciskane w <textarea> działały jak <br /> w tym podglądaczu.?

[darko]

Daj to:

[HTML] pobierz, plaintext 
data += '<table name="news" class="news" cellpadding="3" cellspacing="0">';
data += '<tbody>';
data += '<tr align="left">';
data += '<td colspan="2" rowspan="1" name="news_title" class="news_title">';
[HTML] pobierz, plaintext 

przed for(var x in targets) {


a to

[HTML] pobierz, plaintext 
data += '</tr>';
data += '</tbody>';
data += '</table>';
[HTML] pobierz, plaintext 

już poza pętlą. Co do textarea, to jeśli chcesz dać nową linię, to zamiast '<br />' trzeba dac '\n'

[korey]

Robiłam juz tak na początku i nic..
moze cos zle z tym jest.

[PHP] pobierz, plaintext 
  for(var x in targets) {
 
}
[PHP] pobierz, plaintext 

[darko]

Jeśli jesteś w tej pętli

for(var x in targets) {

to każde

data += document.getElementById('tytul').value; // itd.

zamień na

data += document.getElementById(targets[x]).value;

albo nie stosuj tej pętli tylko odwołuj się po nazwach:

data += document.getElementById('tytul').value;
data += '<br /> czy cokolwiek innego';
data += document.getElementById('data').value;
data += '<br /> czy cokolwiek innego';
data += document.getElementById('autor').value;
// I TAK DALEJ
Albo tak, albo tak.

[korey]

Usunąłem całkowicie znaczniki pętli i nie ma żadnego efektu
teraz mój kod wygląda tak:

[PHP] pobierz, plaintext 
     <script>
      // funkcja podgląd wywoływana po kliknięciu przycisku podgląd z forumlarza
      function preview() {
 
      // do zmiennej t przypisujemy element div o id=targetDiv
 
      var t = document.getElementById('targetDiv');
 
      // w tablicy targets trzymamy nazwy idków elementów forumlarza, z którego ściągamy dane
 
	  var targets = new Array('tytul', 'data', 'autor', 'tresc', 'fulltresc');
 
      // w tej zmiennej przechowujemy treść wstrzykiwaną później do naszego diva
 
      var data = '<b>Podgląd newsa</b>:<br /><br />';
 
      // dla każdego x znalezionego w tablicy z nazwami idków
 
  for(var x in targets) {
 
      // dopisz do wstawianej zawartości wartość elementu formularza o znalezionym id
	  data += '<link rel="stylesheet" type="text/css" href="functions/newsy.css" media="screen"/>';
data += '<table name="news" class="news" cellpadding="3" cellspacing="0">';
  data += '<tbody>';
    data += '<tr align="left">';
	  data += '<td colspan="2" rowspan="1" name="news_title" class="news_title">';  
      data += document.getElementById('tytul').value;
	  data += '</td>';
      data += '</tr>';
	  data += '<tr  align="justify">';
      data += '<td colspan="2" rowspan="1"><b>';
      data += document.getElementById('tresc').value;
	  data += '</b>';
      data += document.getElementById('fulltresc').value;  
	  data += '</td>';
	  data += ' </tr>';
	  data += '<tr>';
      data += '<td name="news_autor" class="news_autor"><b>Autor: </b>';
	  data += document.getElementById('autor').value; 
	  data +='</td>';
	  data += '<td name="news_data" class="news_data">';
	  data += document.getElementById('data').value;
	      data += '</tr>';
  data += '</tbody>';
data += '</table>';
 
data += '<br />';
      }
 
      // wszystkie dane zebrane, wiec wstrzyknij do (ustaw wartość) docelowego diva
 
      t.innerHTML = data;
 
      }
 
      </script>
[PHP] pobierz, plaintext 

Podgląd newsa na takim kodzie wygląda poprawnie z taka małą różnicą że gdy naciska się 'podgląd' w div'ie wyskakuje mi 5 takich tabel. każda z nich pokazuje podgląd Newsa
przykładowy SS:

[darko]

Usunąłem całkowicie znaczniki pętli

Tak

[PHP] pobierz, plaintext 
 for(var x in targets) {
[PHP] pobierz, plaintext 

(i klamra zamykająca)

Ciekawe...

[korey]

no jak usunąłem to nic sie nie działo..
więc dodałem je spowrotem i działa, ale tak ze całość wyświetla sie 5 razy

[darko]

Domyślam się, że usunąłeś sam początek pętli czyli for(var x in targets) { ale zapomniałeś o klamrze zamykającej }. Poza tym jeśli już piszesz, że nie działa, to chociaż podaj błąd z konsoli.

[korey]

Nie no usunąłem całe for i klamrę zamykającą też. Klikałem na przycisk i w ogóle nic sie nie działo. żadnego błędu nic

[darko]

Nie wiem, co Ci tu nie działa, zrobiłem tak:

[PHP] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#news
{
	font-family: Verdana, Sans-Serif;
	font-size: 13px;
	margin: 1px;
	text-align: left;
	border-collapse: collapse;
	color :navy;
}
</style>
</head>
<body>
<?php 
echo 'Dodawanie newsa.<br />';
 
echo 'formulaz dodawania newsa';
 
	$dzien = date("j:m:Y");
	$godzina = date("H:i:s");
	$data = "Dnia $dzien, $godzina";
 
 
echo '<form action="admin.php?administrator=add_news_doit" method="post">';
echo '<table style="margin-left: auto; margin-right: auto;">';
echo '<tr>';
echo '<td>Tytuł:</td><td><input id="tytul" name="tytul" type="text" size="34" value="" /></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Data:</td><td><input id="data" name="data" type="text" size="34" value="'.$data.'" /></td>';
echo '</tr>';
echo '<tr>';
 
echo '<td>Autor:</td><td><input id="autor" name="autor" id="autor" type="text" id="autor"size="34" value="" />';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>Krótka Tresc:</td><td><textarea id="tresc" name="tresc" id="content" cols="60" rows="7"></textarea></td>';
echo '</tr>';
echo '<tr>';
echo '<td>Pełny Tekst:</td><td><textarea id="fulltresc" name="full_tresc" cols="60" rows="7"></textarea></td>';
echo '</tr>';
 
echo '</table>';
echo '<center>';
echo '<input type="reset" value="Wyczysc" /> <input type="submit" value="Dodaj newsa" />';
echo ' <INPUT TYPE="BUTTON"  value="Wstecz" onClick="history.back()" />';
echo ' <INPUT TYPE="BUTTON" value="Podglad" onClick="preview();" />';
echo '</form>';
echo '</center>';
echo '<div id="targetDiv"></div>';
?>
 
<script>
function preview() {
	var t = document.getElementById('targetDiv');
	var targets = new Array('tytul', 'data', 'autor', 'tresc', 'fulltresc');
	var descs = new Array('Tytuł:', 'Data:', 'Autor:', 'Krótka treść:', 'Pełny tekst:');
	var data = '<table id="news" name="news" class="news" cellpadding="3" cellspacing="0"><tr><th>Podgląd newsa</th><th></th></tr>';
	for(var x in targets) {
		data +='<tr><td>'+descs[x]+'</td><td>';
		data += document.getElementById(targets[x]).value;
		data += '</td></tr>';
	}
	data += '</table>';
	t.innerHTML = data;
}
</script>
</body>
</html>
[PHP] pobierz, plaintext 

I wszystko gra, tabelkę dekorujesz sobie stylem w head, walcz już dalej sam.

Ten post edytował darko 30.11.2009, 13:16:30