Forum PHP.pl > Wyświetlanie poszczególnych elementów formularza

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wyświetlanie poszczególnych elementów formularza

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Galakar

25.09.2011, 10:30:57

Pracuję nad formularzem zgłoszeniowym na stronie. Jako że formularz jest dość długi nie chcę aby niepotrzebnie rozjeżdżał strony (nie trzeba wypełniać wszystkich pól). Spróbowałem ukryć jego poszczególne elementy poprzez javascript, ale nie mam pojęcia co zrobiłem źle.

Jak wygląda plika .js:

[HTML] pobierz, plaintext 
<script type="text/javascript">
function wys_form_test1()
{
<fieldset><legend>Kategoria 1</legend>
<textarea name = "kat1" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
</fieldset>
}
 
function wys_form_test2()
{
<fieldset><legend>Kategoria 2</legend>
<textarea name = "kat2" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
</fieldset>
}
 
function wys_form_test3()
{
<fieldset><legend>Kategoria 3</legend>
<textarea name = "kat3" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
</fieldset>
}
</script>
[HTML] pobierz, plaintext

Jak wygląda kod strony:

[HTML] 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" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-Type" content="text/html" charset = "utf-8" />
	<meta http-equiv="Content-Language" content="pl" />
	<title>Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="/scripts/qTip.js" type="text/javascript"></script>
	<script src="/scripts/test.js" type="text/javascript"></script>
</head>
<body>
<form method=post action="zglosz.php">
<div class = "m">
<input type = "button" onclick = "wys_form_test1()" value = "Kategoria 1" /><br />
<input type = "button" onclick = "wys_form_test2()" value = "Kategoria 2" /><br />
<input type = "button" onclick = "wys_form_test3()" value = "Kategoria 3" /><br />
<input type=submit value="Zgłoś"></div>
</form>
</body>
</head>
[HTML] pobierz, plaintext

Korab

25.09.2011, 11:11:26

HTML w JS? Nieźle pojechałeś...
Napisz sobie stronę tak, żeby wszystko było widoczne. W CSSie ustaw display:none, aby ukryć elementy formularza, które chcesz ukryć. W JS użyj czegoś takiego:

[JAVASCRIPT] pobierz, plaintext 
function pokaz(co) {
document.getElementById(co).style.display = 'block';
}
[JAVASCRIPT] pobierz, plaintext

A tym ukrywanym fieldsetom nadaj id - i przy wywoływaniu funkcji wywołuj ją dla konkretnego id. Przykład:

[HTML] pobierz, plaintext 
<input type="button" onclick="pokaz('3');" value="Kategoria 3" /><br />
<fieldset id="3" style="display: none;"><legend>Kategoria 3</legend>
<textarea name = "kat3" cols="50" rows="10">Proszę podać kandydatki w następującej formie: Imię - Tytuł</textarea>
</fieldset>
[HTML] pobierz, plaintext

Galakar

26.09.2011, 10:05:35

To mam nauczkę na przyszłość żeby nie mieszać JS i HTML-a. Nie rozumiem zasad rządzących js. Wszystko jednak działa, więc dzięki za pomoc.

Korab

26.09.2011, 18:19:44

W sposób, który podałeś, możesz mieszać PHP i HTML, w taki sposób:

[PHP] pobierz, plaintext 
<?php
if ($bułka="z_masłem") {
?>
<h1>Bułka z masłem</h1>
<?php
}
else {
?>
<h1>Zwykła bułka</h1>
<?php
}
?>
[PHP] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.