Forum PHP.pl

Pytanie mam funkcje:

[HTML] pobierz, plaintext 
function dodaj_element(kontener){
	var znacznik = document.createElement('input');
 
	znacznik.setAttribute('type', 'text');
	znacznik.setAttribute('name', 'Imie');
 
	znacznik.className = 'upload';
 
	var kontener = document.getElementById(kontener);
	kontener.appendChild(znacznik);
 
}
//-->
</script>
[HTML] pobierz, plaintext 

I moje pytanie jest jak z lewej strony tego inputa wyswietlic jakis tekst. Np. Podaj imie...

przed "wkładaniem" inputa możesz dać:


nie wiem jak to będzie wyglądać w Twoim kodzie i czy Ciebie to zadowala ale takie coś przyszło mi pierwsze do głowy .. jeżeli będziesz chciał bardziej złozony efekt napisz wiecej szczegółów + jakiś kod html'a gdzie to się wyświetla ;]

Pomoglo tylko czesciowo bo moge wstawic ten kod tylko raz. A ja potrzebuje kilka takich tekstow przed kazdym

kontener.appendChild(znacznik);

bo mam ich kilka.

tekst dodajesz na identycznej zasadzie co inputa - tworzysz obiekt tekstowy i appendChild.

Jakbys jednak skorzystał z gotowych libow, np. jQuery, to Twoj kod by wyglądał tak:

Przyjemniej, nieprawdaż?

Pewnie ze przyjemniej ale ja jestem kompletnym laikiem w tej kwestii i czy aby korzystac z takiego liba, to pewnie trzeba cos na poczatku zaimportowac?

To jeszcze jedno pytanie jest dodaje sobie kilka pol to czy mozna je dodac w jakiejs tabeli aby byly ulozone. Nie wiem czy dobrze to wytlumaczylem chodzi mi o to aby bylo mniej wiecej tak :

[HTML] pobierz, plaintext 
<table><tr><td>Jakis tekst</td><td><input.....></td><tr>
<tr><td>Jakis tekst</td><td><input.....></td><tr></table>
[HTML] pobierz, plaintext 

(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) ?

I pytanie drugie.... jesli chcialbym stworzyc przycisk usuwajacy dodany formularz to moge zrobic dokladnie taka sama funkcje i dac ja pod przycisk tylko zamiast append dac remove? Czy jest moze jakas funkcja usuwajaca wszystko od razy?

I mozna to podpiac pod przycisk przy dodawaniu go w taki sposob:

[HTML] pobierz, plaintext 
$('#'+kontener).append('<label for="upload_1">Twoj jakis tekst:</label><input type="button" name="Imie" id="upload_1" class="upload" onclick="usunwszystko(); />');
[HTML] pobierz, plaintext 

Żadnej tabelki nie potrzebujesz, css wystarczy
ustawiasz parametry dla label i input, wszystko razem jeszcze wrzucasz w div.

[HTML] pobierz, plaintext 
<div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
<style type="text/css">
.holder {clear: both; width: 600px;}
.holder label{width: 300px; float: left; display: inline;}
.holder input{display: inline;}
</style>
<div>
<div class="holder"><label for="input_1">Input 1</label><input id="input_1" class="upload" /></div>
<div class="holder"><label for="input_2">Input 1</label><input id="input_2" class="upload" /></div>
<div class="holder"><label for="input_3">Input 1</label><input id="input_3" class="upload" /></div>
<div class="holder"><label for="input_4">Input 1</label><input id="input_4" class="upload" /></div>
<div class="holder"><label for="input_5">Input 1</label><input id="input_5" class="upload" /></div>
</div>
[HTML] pobierz, plaintext 

Tworzenie inputow wraz z przyciskami do ich usuwania. Tworzysz linki a href z klasą add oraz id z nazwa kontenera.

[HTML] pobierz, plaintext 
<a href="#" class="add" id="id_kontenera" title="Dodaj nowy input" >dodaj</a>
<script type="text/javascript">
$(document).ready(
	function(){
		$("a.add").click(function(){
		// pobierasz id kontenera
		var kontener = $(this).attr('id');
		// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
		var new_div = '<div class="holder">';
		// tworzysz label i inputa
		var new_label_input = '<label for="input_1">Input 1</label><input id="input_1" class="upload" />';
		// tworzysz nowy link
		var new_link = $('<a href="#" >usun</a>');
		// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
		new_link.click(function(){
			$(this).parent("div").remove();
			return false;
		});
		// dodajesz do diva lablel i input
		new_div.append(new_label_input);
		// dodajesz do diva link
		new_div.append(new_link);
		// dodajesz do kontenera caly div
		$('#'+kontener).append(new_div);
		return false;
	});
});
</script>
[HTML] pobierz, plaintext 

Czyli co to normalnie mam wrzucic do html w miejscy gdzie chce aby te inputy sie pojawily?
Ale ten div nie bedzie widoczny dopuki nie klikne dodaj nowy input?


Ale ta funkcje dodaj_element(kontener) musze tez miec?

Nie tej funkcji już nie musisz mieć, taka jest zaleta jquery, że sama wykryje, że kliknąłeś w odpowieni link ($("a.add").click)
- css wrzucasz tam gdzie zawsze wrzucasz css (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
- js wrzucasz w head
- <a href="#" class="add" id="id_kontenera" title="Dodaj nowy input" >dodaj</a> wrzucasz w miejsce gdzie chcesz zeby tresc sie pojawiala (wrzucając to w diva o jakimś id, żeby jquery wiedziała gdzie dodać inputy) czyli np

[HTML] pobierz, plaintext 
<div id="kontener_na_nowe_inputy_div">
<a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a> 
</div>
[HTML] pobierz, plaintext 

schemat dokumentu
1. nagłowek
2. head a w nim css, jquery z listingu
3. body a w nim div z kontenerem i w nim inputy

zmieniłem jedną rzecz (żeby zachować poprawną semantykę, div w który js będzie wpisywać nowe wartości ma dodane na końcu _div, żeby nie było dwóch elementów na stronie o tym samym id)
czyli w js trzeba zmienić linijkę:

[HTML] pobierz, plaintext 
<!-- z tego -->
var kontener = $(this).attr('id');
<!-- na ten -->
var kontener = $(this).attr('id')+ '_div';
[HTML] pobierz, plaintext 

Ten post edytował vokiel 14.11.2008, 14:41:10

Wiesz co nie wiem czy dobrze to zrobilem ale moja strona wyglada tak i troche to nie dziala, bo od razu mam wyswietlone inputy, a po kliknieciu w przycisk nic sie nie dzieje

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/skrypt.js"></script>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="pl/AC_RunActiveContent.js" language="javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
 
 
<script type="text/javascript">
$(document).ready(
function(){
$("a.add").click(function(){
// pobierasz id kontenera
var kontener = $(this).attr('id')+ '_div';
// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
var new_div = '<div class="holder">';
// tworzysz label i inputa
var new_label_input = '<label for="input_1">Podaj imie:</label><input type="text" id="input_1" class="upload" />';
// tworzysz nowy link
var new_link = $('<a href="#" >usun</a>');
// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
new_link.click(function(){
$(this).parent("div").remove();
return false;
});
// dodajesz do diva lablel i input
new_div.append(new_label_input);
// dodajesz do diva link
new_div.append(new_link);
// dodajesz do kontenera caly div
$('#'+kontener).append(new_div);
return false;
});
});
</script>
</head>
<body>
 
 
<div id="kontener_na_nowe_inputy_div">
<a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
</div>
 
<div class="holder"><label for="input_1">Podaj imie</label><input type="text" id="input_1" class="upload" /></div>
<style type="text/css">
.holder {clear: both; width: 600px;}
.holder label{width: 300px; float: left; display: inline;}
.holder input{display: inline;}
</style>
<div>
<div class="holder"><label for="input_1">Input 1</label><input type="text" id="input_1" class="upload" /></div>
 
</div>
 
</body>
</html>
[HTML] pobierz, plaintext 

Wielkie dzieki, pomoglo. Nawet wiedzialem jak przerobic abym mial kilka przyciskow dodaj i kilka div'ow (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Ale znow napotkalem na problem, otoz wyglada on nastepujaco, gdzies na forum juz pisalem o tym, ale chodzi o to: ze na stronie wyswietlam te div'y i przyciski dodaj w petli czyli mam ich kilka (to ma byc formularz kontaktowy) i jak mozna by zrobic aby po kliknieciu przycisku dodaj, wszystkie przyciski dodaj zostaly zablokowane tzn. po wysweitleniu jednego formularza nie dalo sie wysweitlic kolejnego.
Usuniecie licznika nie pomaga, bo po kliknieciu w dodaj zawsze jest dodawany formularz. Probowalem zrobic sobie zmienna na false i w funkcji zmieniac ja na true i przy pomocy tego sprawdzac if'em ktora jest jak na true to mialem wszystkie przyciski poblokowane.


Jeszcze jeden problem.
Czy ten link do usuwania (ta akcje mozna by jakos podpiac do buttona? Bo skoro mam przycisk submit to ladniej by to wygladalo jakby i usun bylo buttonem?
Po raz kolejny dzieki za pomoc.

Ten post edytował gregi1 16.11.2008, 14:23:08

Możesz dodac na poczatku sprawdzanie warunku w funkcji

[HTML] pobierz, plaintext 
$("a.add").click(function(){
if(added){
// caly ten kod co byl
// a na koncu
var added=true;
// no i tutaj przydaloby sie ukryc inne przyciski dodaj, albo nawet wszystkie w ogóle:
$("a.add").toggle();
// albo 
$("a.add").addClass("hide");
}else{
$("a.add").addClass("show");
}
}
[HTML] pobierz, plaintext 

Możesz ostylować link, żeby wyglądał jak button, albo po prostu wstawić button.

[HTML] pobierz, plaintext 
// tworzysz nowy link (zmieniasz tutaj)
var new_link = $('<button class="usun"><span>usun</span></button>');
// reszta juz może zostać tak jak było
// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
new_link.click(function(){
$(this).parent("div").remove();
return false;
});
[HTML] pobierz, plaintext 

Trochę inną rzecz robisz, niż myślałem, kilka formularzy, a nie tak jak podejrzewałem dodawanie pól do jednego

Wiesz co jestem kompletnym laikiem ale nie dziala mi za bardzo to co podales:
Mam cos takiego:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/skrypt.js"></script>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="pl/AC_RunActiveContent.js" language="javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
 
 
$(document).ready(
function(){
// aby tworzyc wiecej inputow to trzeba by ustawic ich unikalne id, do tego bedzie ten licznik
//var licznik=1;
$("a.add").click(function(){
if(added){
// pobierasz id kontenera
var kontener = $(this).attr('id');
kontener = kontener + "_div";
// tworzysz diva (kontenera dla lablela inputa i linku do usuniecia
var new_div = $('<div class="holder">');
// tworzysz label i inputa
var new_label_input0 = '<label for="input"><center>WYŚLIJ ZAPYTANIE </center></label><br />';
var new_label_input = '<label for="input">Podaj adres e-mail: </label><input style="margin-left:27px;" name="mail" type="text" id="input" class="upload" size="49" /><br />';
 
var new_label_input4 = '<label for="input">Treść wiadomości: </label><textarea style="margin-left:31px;margin-top:3px;" name="wiadomosc" id="input" class="upload" cols="46" rows="5"/></textarea><br />';
var new_label_input5 = '<input style="margin-left:250px;margin-bottom:5px;" type="submit" name="wyslij_form" id="input" class="upload" value="Wyślij" />';
// tworzysz nowy link
var new_link = $('<a style="margin-left:20px;margin-bottom:5px; color:black" class="zwin_formularz" href="#" >Zrezygnuj</a>');
// dodajesz funkcje ktora po kliknieciu w link usunie parent div (czyli calego diva z labelem inputem i tym kliknietym a)
new_link.click(function(){
$(this).parent("div").remove();
return false;
});
// dodajesz do diva lablel i input
new_div.append(new_label_input0);
new_div.append(new_label_input);
new_div.append(new_label_input4);
new_div.append(new_label_input5);
 
// dodajesz do diva link
new_div.append(new_link);
// dodajesz do kontenera caly div
$('#'+kontener).append(new_div);
//licznik++;
 
 
var added=true;
// no i tutaj przydaloby sie ukryc inne przyciski dodaj, albo nawet wszystkie w ogóle:
$("a.add").toggle();
// albo
return false;
}
});
});
</script>
<style type="text/css">
.holder {clear: both; width: 600px;}
.holder label{width: 300px; float: left; display: inline;}
.holder input{display: inline;}
</style>
</head>
<body>
<div id="kontener_na_nowe_inputy_div">
 
</div>
 
<a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
 
 
<div id="kontener_na_nowe_inputy2_div">
 
</div>
 
<a href="#" class="add" id="kontener_na_nowe_inputy2" title="Dodaj nowy input" >dodaj</a>
</body>
</html>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
 
<script type="text/javascript">
$(document).ready(
function(){
$("a.add").click(function(){
var kontener = $(this).attr('id');
kontener = kontener + "_div";
var new_div = $('<div class="holder">');
var new_label_input = '<label for="input"><center>WYŚLIJ ZAPYTANIE </center></label><br />';
new_label_input += '<label for="input">Podaj adres e-mail: </label><input style="margin-left:27px;" name="mail" type="text" id="input" class="upload" size="49" /><br />';
new_label_input += '<label for="input">Treść wiadomości: </label><textarea style="margin-left:31px;margin-top:3px;" name="wiadomosc" id="input" class="upload" cols="46" rows="5"/></textarea><br />';
new_label_input += '<input style="margin-left:250px;margin-bottom:5px;" type="submit" name="wyslij_form" id="input" class="upload" value="Wyślij" />';
var new_link = $('<a style="margin-left:20px;margin-bottom:5px; color:black" class="zwin_formularz" href="#" >Zrezygnuj</a>');
new_link.click(function(){
$(this).parent("div").remove();
$("a.add").toggle();
return false;
});
new_div.append(new_label_input);
new_div.append(new_link);
$('#'+kontener).append(new_div);
 
var added=true;
$("a.add").toggle();
return false;
});
});
</script>
<style type="text/css">
.holder {clear: both; width: 600px;}
.holder label{width: 300px; float: left; display: inline;}
.holder input{display: inline;}
</style>
</head>
<body>
<div id="kontener_na_nowe_inputy_div">
</div>
<a href="#" class="add" id="kontener_na_nowe_inputy" title="Dodaj nowy input" >dodaj</a>
 
 
<div id="kontener_na_nowe_inputy2_div">
</div>
<a href="#" class="add" id="kontener_na_nowe_inputy2" title="Dodaj nowy input" >dodaj</a>
</body>
</html>
[HTML] pobierz, plaintext 

Wielkie dzieki za pomoc, to mam jeszcze prosbe, potrzebna mi jeszcze jedna rzecz, a narazie nie mam czasu na nauke js - bo ucze sie Flasha:) wiec bylbym wdzieczny za pomoc.

Domyslam sie ze to mozna by zrobic przy pomocy obecnego skryptu.

Chcialbym dodatkowo miec link "wiecej>>>" po kliknieciu ktorego w jego miejscu wyswietlaja sie slowa z bazy danych. Czyli wykonuje sie zapytanie sql i wyswieltaja sie wyniki, musi to byc bez przeladowania strony, bo inaczej strace rezultaty wyszukiwania. Dzieki za pomoc

http://www.sitepoint.com/article/ajax-jquery/

Dzieki za link, hmm a mozna w kod funkcji wstawic nie odzielny plik a jakas zmienna php? Moze wyjasnie to na przykladzie :

Mam cos takiego.......

[PHP] pobierz, plaintext 
<?php
..........
while ($row = mysql_fetch_array($result)) {
echo $row[1];
 
//i tutaj chcialbym przycisk WIECEJ ktory wyswietli mi po kliknieciu $row[2] i $row[3].
<a  href="#" class="wiecej" id="wiecej_'.$row[0].'" title="wyswietl wiecej" >WIECEJ</a><div id="wyswietl_wiecej">TUTAJ POWINNO MI SIE WSTAWIC $ROW[2] i $ROW[3].</div>
 
}
?>
[PHP] pobierz, plaintext 

Wiec jak powinien wygladac moj skrypt js?

Mam cos takiego:

[PHP] pobierz, plaintext 
<?php
<script type="text/javascript">
        $(document).ready(function(){
            $("a.wiecej").click(function(){
            $("#wyswietl_wiecej).(IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) ?    
                       //CO TUTAJ POWINNO BYC?
            });
        });
        </script>
?>
[PHP] pobierz, plaintext 

Z gory dzieki za pomoc.