Autor Zpráva
hal_sk
Profil
#1 · Zasláno: 17. 2. 2009, 23:47:14
Odpovědět Citovat
Zdravím.
Chcem spraviť formulár, kde bude možné pridať niekoľko záznamov "v rámci jednej stránky".
To jest, že na stránke bude napr formulárový input "zadajte meno cloveka 1", ale ak užívateľ chce môže zadať aj mená pre 200 človekov.
Predstavujem si to tak, že bude na stránke nejaké tlačítko, na ktoré keď sa klikne, tak sa automaticky prihodí na stránku ďalší input pre zadanie mena (bez refreshu), s tým, že by input mal samozrejme svoje vnútorné vzostupne označenie (1,2,3...).
S Ajaxom takmer, vôbec nerobím. Bol by som rád ak by ste mi ukázali nejaký príklad na toto.
Vďaka.
habendorf
Profil
#2 · Zasláno: 18. 2. 2009, 00:29:30
Odpovědět Citovat
S AJAXem to nemá nic společného. Klíčová slova pro hledání: createElement, appendChild.
hal_sk
Profil
#3 · Zasláno: 18. 2. 2009, 16:01:17
Odpovědět Citovat
Našiel som jeden skript na tomto fóre a upravil som ho.
Dostal som toto.
Tu je zdroj: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">;
<title>test</title>
</head>
<body>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->


<script type="text/javascript">

var num_of_lines = 0;

function plus(element){

num_of_lines ++;

var x = document.getElementById(element);

/* sada elementov <START> */
var text = document.createTextNode('Osoba č.'+num_of_lines+' ');

var input = document.createElement('input');
input.setAttribute('name', 'F_polozka_'+num_of_lines );

var hidden = document.createElement('input');
hidden.setAttribute('type', 'hidden');
hidden.setAttribute('name', 'F_num_of_lines');
hidden.setAttribute('value', num_of_lines);

var p = document.createElement('span');
p.setAttribute('id', 'span_' + num_of_lines );

var div = document.createElement('div');
div.setAttribute('style', 'background-color:red;width:10px;height:10px;');

var br = document.createElement('br');
/* sada elementov <END> */

/* sada elementov <START> */
p.appendChild(text);
p.appendChild(input);
p.appendChild(hidden);
p.appendChild(div);
p.appendChild(br);
/* sada elementov <END> */

x.appendChild(p);
}
</script>

<form method="POST" action="index.php" id="new_sab">
<div>
</div>
<input type="submit" name="F_odoslane" value="odoslat">
<br><br><br>
</form>
<button onclick="plus('new_sab'); return false;" >pridat osobu</button>
<br><br>
<?php
if(isset($_POST['F_odoslane']))
{
 $num_of_lines=$_POST['F_num_of_lines'];
 echo "pridali ste <b>".$num_of_lines."</b> osob:<br>";
 for($i=1;$i<=$num_of_lines;$i++)
 {
  if (isset($_POST['F_polozka_'.$i]))
  {
   echo "osoba ".$i.": <b>".$_POST['F_polozka_'.$i]."</b><br>";
  }
 }
}
?>
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>


Toto je zjednodušená forma toho čo chcem dosiahnuť. Rád by som, aby sa po kliknutí na button nepridávali len jednoduché inputy s popiskom, ale komplet tabuľka s viacerými inputmi a popiskami v bunkách.
Takéto niečo.
Môžete ma posunúť ďalej?
habendorf
Profil
#4 · Zasláno: 18. 2. 2009, 16:34:45
Odpovědět Citovat
Celý vnitřní kód toho fieldsetu bych dal do nějakého stringu s tím, že bych nastavil nějaký čítač a vypisoval jeho hodnotu do legend a do name inputů.

Takže něco jako

string="<legend>Osoba č. " +citac+ "</legend><table> .......... ";

Následně bych vytvořil ten fieldset a jeho innerHTML=string.
Chamurappi
Profil
#5 · Zasláno: 18. 2. 2009, 17:53:36
Odpovědět Citovat
Reaguji na hal_sk:
Doporučuji používat místo setAttribute a getAttribute standardní vlastnosti HTML DOMu, jsou spolehlivější.
Str4wberry
Profil
#6 · Zasláno: 18. 2. 2009, 18:08:16
Odpovědět Citovat
Vysvětli bys mi prosím, Chamurappi, čím jsou standardní vlastnosti HTML DOMu spolehlivější?
hal_sk
Profil
#7 · Zasláno: 18. 2. 2009, 18:53:41
Odpovědět Citovat
habendorf
Takže něco jako

string="<legend>Osoba č. " +citac+ "</legend><table> .......... ";

No, presne neviem ako to myslíš, lebo s oblasti JS som si stačil prečítať len úvod na www.jakpsatweb.cz.
Čo myslíš tými čítačmi? A čo myslíš tým Následně bych vytvořil ten fieldset a jeho innerHTML=string.
?
Neni v JS nejaká možnosť dať celí ten reťazec popiskov, inputov a buniek do premennej a následne to volať a vpisovať do dokumentu?
habendorf
Profil
#8 · Zasláno: 18. 2. 2009, 19:01:15
Odpovědět Citovat
„Neni v JS nejaká možnosť dať celí ten reťazec popiskov, inputov a buniek do premennej a následne to volať a vpisovať do dokumentu?“

No vždyť to je přesně to, co ti píšu: string="<legend>Osoba č. " +citac+ "</legend><table> .......... "; - to je to „dať celí ten reťazec popiskov, inputov a buniek do premennej“

a innerHTML=string je to „vpisovať do dokumentu“

Co se týče čítače, máš tam Osoba č. 1, Osoba č. 2 ... Osoba č. x, takže potřebuješ nějakou proměnou na to číslo, ne? Navíc asi nějak pojmenuješ ty inputy, takže budeš chtít třeba meno1, meno 2 ... a tam ho využiješ také.
hal_sk
Profil
#9 · Zasláno: 18. 2. 2009, 19:08:21 · Upravil/a: hal_sk
Odpovědět Citovat
Jasne. Ani neviem prečo som to hneď nepochopil. Idem si niečo prečítať o tom ako sa vlastne používa ten innerHTML, atď. Lebo ten úvodný príklad som len pozliepal z iného príkladu, systémom pokus-omyl.
Vďaka, ešte zrejme napíšem.
habendorf
Profil
#10 · Zasláno: 18. 2. 2009, 19:26:56
Odpovědět Citovat
„Idem si niečo prečítať o tom ako sa vlastne používa ten innerHTML“

<script>
string = "Zdar a sílu najdeš v sýru!";
</script>

<span onclick="document.getElementById('moudro').innerHTML=string">Napiš moudro</span>
<p id="moudro"></p>
Chamurappi
Profil
#11 · Zasláno: 18. 2. 2009, 19:30:04
Odpovědět Citovat
Reaguji na Str4wberryho:
• cokoliv.setAttribute("class", "třída") — selže v Exploreru.
• cokoliv.setAttribute("onclick", "alert('Hurá!')") — selže v Exploreru.
• cokoliv.setAttribute("style", "color: red") — selže v Exploreru.
• input.setAttribute("value", "hodnota") a input.getAttribute("value") — selže částečně v Mozille, tluče se s vlastností „value“ (v input.value může být něco jiného než v atributu).
• input.getAttribute("type") — selže v Mozille i Opeře při neuvedeném atributu type.
• checkbox.setAttribute("checked", "") — selže v Opeře.
• checkbox.setAttribute("checked", false) — uspěje v Exploreru (nemělo by).
• input.setAttribute("name", "novéJméno") — selže částečně v Exploreru, neaktualizuje se struktura <form>u, takže pořád existuje formulář.původníJméno.
• odkaz.getAttribute("href") — vrací v Exploreru absolutní URI a v ostatních prohlížečích přesně to, co je v atributu href.

Na ostatní problematické situace jsem buď nenarazil, nebo jsem si na ně teď nevzpomněl.
Standardní vlastnosti HTML DOMu budou asi také nepatrně rychlejší.
hal_sk
Profil
#12 · Zasláno: 18. 2. 2009, 19:37:28 · Upravil/a: hal_sk
Odpovědět Citovat
Chamurappi
Taký blbý dotaz. Tie standardní vlastnosti HTML DOMu je napríklad čo.
Str4wberry
Profil
#13 · Zasláno: 18. 2. 2009, 19:40:01
Odpovědět Citovat
Chamurappi, moc děkuji za vyčerpávající přehled.
Chamurappi
Profil
#14 · Zasláno: 18. 2. 2009, 19:52:29 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
Reaguji na hal_sk:
• cokoliv.className = "třída"
• cokoliv.onclick = function() { alert("Hurá") }
• cokoliv.style.color = "red"
• input.value = "hodnota"
• proměnná = input.type
• checkbox.checked = false
• input.name = "novéJméno"  // tohle také částečně selže v Exploreru :-) … nemá rád žádné přejmenovávání.
• proměnná = odkaz.href


Reaguji na Str4wberryho:
Možná bychom mohli těchto pár příspěvků vyčlenit do vlastního vlákna, stejnou radu papouškuji často, mohl bych jen odkazovat.

Moderátor Str4wberry: Staniž se.
hal_sk
Profil
#15 · Zasláno: 18. 2. 2009, 19:57:22
Odpovědět Citovat
Chamurappi
dík
hal_sk
Profil
#16 · Zasláno: 18. 2. 2009, 21:20:48
Odpovědět Citovat
Tu som našiel fajné riešenie:
http://www.pcforum.sk/innerhtml-maze-zadane-udaje-do-inputov-vt56434.html#522199

Vyzerá to takto:
http://hal.tym.sk/js2/
hal_sk
Profil
#17 · Zasláno: 18. 2. 2009, 23:03:58 · Upravil/a: hal_sk
Odpovědět Citovat
hal_sk
Na to "fajné" riešenie čumím ako puk. Vôbec neviem ako to funguje.
Jak tam spravím:
a) vzostupné označovanie (1,2,3...) - ktoré budem môcť využiť pri stanovení atribútov name pre inputy
b) každý riadok "obaliť" do rámčeku <fieldset> (skúšam rôzne spôsoby, ale vždy mi to obalí všetky riadky, nie každý zvlášť)
?
hal_sk
Profil
#18 · Zasláno: 19. 2. 2009, 08:11:49 · Upravil/a: hal_sk
Odpovědět Citovat
Dotaz nado mnou beriem späť, asi použijem riešenie, ako som ukazoval v mojom príspevku na začiatku.
hal_sk
Profil
#19 · Zasláno: 19. 2. 2009, 11:21:39 · Upravil/a: hal_sk
Odpovědět Citovat
Ešte taký sub-dotaz. Chcem elementom nastavovať atribúty spôsobom ako odporúčal Chamurappi, ale nejak mi to nejde. Robím to takto:

var input1 = document.createElement('input');
input1.setAttribute('id', 'input1');
document.getElementById('input1').maxLength = "5";

Keď to spravím takto, tak prehliadač v stavovom riadku ohlási chybu, a nič neprevedie. Kde je chyba?
hal_sk
Profil
#20 · Zasláno: 19. 2. 2009, 13:42:24
Odpovědět Citovat
Ako vytvorím tabuľku pomocou: 
document.createElement('table');


???

V Chrome to funguje, ale v IE nie. Je na to nejaká obchádzka?
_es
Profil
#21 · Zasláno: 19. 2. 2009, 14:07:35
Odpovědět Citovat
hal_sk
„Keď to spravím takto, tak prehliadač v stavovom riadku ohlási chybu, a nič neprevedie. Kde je chyba?“

Ten kód, čo tu dávaš, funguje aj ako odkazy.
Tak si klikni na createElement a snáď na no prídeš aj sám.
habendorf
Profil
#22 · Zasláno: 19. 2. 2009, 14:53:13
Odpovědět Citovat
hal_sk

Myslím, že ses vydal zbytečně složitou cestou. Měli jsme to rozjetý lépe a jednodušeji.
hal_sk
Profil
#23 · Zasláno: 19. 2. 2009, 15:10:01
Odpovědět Citovat
habendorf
Áno. Skúsim to ešte raz s tvojim innerHTML riešením. Tu som našiel jeden pekný script, idem ho prerobiť:
http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=8&topic=78296
habendorf
Profil
#24 · Zasláno: 19. 2. 2009, 15:20:10
Odpovědět Citovat
hal_sk

Víš co je tvůj problém? Že se pokoušíš neustále předělávat něco cizího. Už jsem to nevydržel a napsal ti základní kostru, vyzkoušej: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>
		</title>
		<script>
		var i=1;
		function pridej() {
			 i+=1;
			 string="<fieldset>položka č. " +i+ "</fieldset>"
			 document.getElementById('neco').innerHTML+=string;
		}
		</script>
	</head>
	<body>
		<form id="neco">
			<fieldset> položka č. 1
				</fieldset>
		</form>
		<a href="#" onclick="pridej()">Přidat</a>
	</body>
</html>
hal_sk
Profil
#25 · Zasláno: 20. 2. 2009, 12:11:45
Odpovědět Citovat
habendorf
Dík, pomohlo to.
Mám ale ešte problém:
V IE to ide OK, ale v Chrome a FF si nepamätá predošlé zadané hodnoty do inputov.
habendorf
Profil
#26 · Zasláno: 20. 2. 2009, 18:37:47
Odpovědět Citovat
hal_sk

Hm, on vždycky přepíše ty stávající fieldsety nanovo. Stačí, když z toho stringu vyhodíš fieldset, fieldset si vždy vytvoříš pomocí createElement a do něj zapíšeš ten string. Jinými slovy, dostáváme se na úplný začátek http://diskuse.jakpsatweb.cz/index.php?action=vthread&topic=90264&forum=8&page=-1#4 :o)
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0