1. Tudásbázis
  2. Modulok fejlesztése
  3. Form elemek létrehozása Javascripttel

Form elemek létrehozása Javascripttel

Beküldte Bálint - 2008. december 16. 13.55
Bálint képe

Sziasztok!
Hogyan lehetséges form elemeket javascript segítségével felpakolni?
Leírom, mit szeretnék.
Egy js-függvény visszatérési értékének megfelelően szeretnék x db textfieldet kirakni.
Valaki tudna írni nekem erre egy példakódot?

Drupal verzió: 
6.x
Fórum: 
Modulok fejlesztése
LaciApu képe

Beküldte LaciApu - 2008. december 16. 14.34

Nem tudom, hogy a reptében hozzáadott form elemek belekerülnek-e a form visszatérési tömbjébe, de nem tartom valószínűnek. Szerintem hozd létre az összeset és a feleslegeset rejtsd el. Én így oldottam meg a felesleges mezők eltüntetését:

$(document).ready(function(){
 
  // az ingatlan típushoz nem illő mezőket elrejti
  elrejt($('#ingatlan-hirdetes-form-add #edit-ing-tip-id').val());
 
  // ha az ingatlan típus mező változik elrejti a felesleges mezőket
  $('#ingatlan-hirdetes-form-add #edit-ing-tip-id').change(function(){
    val = $(this).val();
    elrejt(val);
  });
});
 
 
/**
 * Az elrejtést végző függvény.
 */
 
function elrejt(val){
  switch(val){
    case '1':
    case '2':
      $('#edit-alap-ter-wrapper').show();
      $('#edit-telek-wrapper').hide();
      $('#edit-szoba-szam-wrapper').show();
      $('#edit-fel-szoba-szam-wrapper').show();
      $('#edit-epites-eve-wrapper').show();
      $('#edit-allapot-id-wrapper').show();
      $('#edit-futes-id-wrapper').show();
      break;
    case '5':
      $('#edit-alap-ter-wrapper').show();
      $('#edit-telek-wrapper').show();
      $('#edit-szoba-szam-wrapper').hide();
      $('#edit-fel-szoba-szam-wrapper').hide();
      $('#edit-epites-eve-wrapper').show();
      $('#edit-allapot-id-wrapper').show();
      $('#edit-futes-id-wrapper').show();
      break;
    case '6':
      $('#edit-alap-ter-wrapper').show();
      $('#edit-telek-wrapper').hide();
      $('#edit-szoba-szam-wrapper').hide();
      $('#edit-fel-szoba-szam-wrapper').hide();
      $('#edit-epites-eve-wrapper').hide();
      $('#edit-allapot-id-wrapper').hide();
      $('#edit-futes-id-wrapper').hide();
      break;
    case '7':
    case '8':
      $('#edit-alap-ter-wrapper').hide();
      $('#edit-telek-wrapper').show();
      $('#edit-szoba-szam-wrapper').hide();
      $('#edit-fel-szoba-szam-wrapper').hide();
      $('#edit-epites-eve-wrapper').hide();
      $('#edit-allapot-id-wrapper').hide();
      $('#edit-futes-id-wrapper').hide();
      break;
    default :
      $('#edit-alap-ter-wrapper').show();
      $('#edit-telek-wrapper').show();
      $('#edit-szoba-szam-wrapper').show();
      $('#edit-fel-szoba-szam-wrapper').show();
      $('#edit-epites-eve-wrapper').show();
      $('#edit-allapot-id-wrapper').show();
      $('#edit-futes-id-wrapper').show();
      break;
  }
}
0
0
Bálint képe

Beküldte Bálint - 2008. december 16. 14.44

Nem tudom, hogy a reptében hozzáadott form elemek belekerülnek-e a form visszatérési tömbjébe

Pontosan ezért kérdeztem itt, mert én sem tudom, hogy vajon ez így megoldható-e.

Sajnos az elrejtéses módszer azért nem jó, mert nem tudni, hogy mennyi kell, de még csak maximumot sem tudok rá mondani. És fontos, hogy szépen oldjam meg. :)

0
0
LaciApu képe

Beküldte LaciApu - 2008. december 16. 15.15

Azt el tudom képzelni, hogy egy komplett formot (submit gombbal) cserélgess egy divben. A modulodban meg a validate és a submit függvényed meg egy foreach-csel végigjárja a form tömböt.

<?php
  // form létrehozása
  for($i = 0;$i < $max_i;$i++){
    $form['tf' . $i]          = array(
      '#title'         => 'title',
      '#description'   => 'description',
      '#type'          =>'textfield',
      '#size'          => 15,
    );
  }
  // validate és submit függvényben meg valami ilyesmi
  foreach ($form_state['values'] as $kulcs => $ertek){
    if(substr($kulcs, 0, 1)=='tf'){
      // blablabla
    }
  }
?>

Most már engem is érdekel, hogy vajon működik-e ez a megoldás.
0
0
LaciApu képe

Beküldte LaciApu - 2008. december 16. 15.44

Természetesen a formot át kell tolni a javascriptnek:

<?php
  // form átadása a js-nek
  $data['html'] .= '<div id="sajat">'. drupal_render($form) .'</div>';
  print drupal_to_js($data);
?>
  // a div tartalmának cserélése
  // az utvonal-at definiálni kell a hook_menu-ben
  jQuery.getJSON('utvonal/', function(data){
    $('#sajat').html(data['html']);
  }

Talán.
0
0
gergely képe

Beküldte gergely - 2008. december 16. 17.07

off
es akkor mi van ha valaki kifejezetten tiltja a js-t akkor nem lesz neki textfield? :)
/off

0
0

---
Tévedni mindenkinek szabad, csak a mérnöknek észre kell vennie.

Bálint képe

Beküldte Bálint - 2008. december 16. 17.51

Hagyjuk már ezt! Igen, le lehet tiltani a js-t, tudok róla, ahogyan a css formázásokat is le lehet tiltani, meg a sütiket, folytassam...?
Javaslom, nézz szét a drupal könyvtárad 'misc' mappájában!

0
0
aboros képe

Beküldte aboros - 2008. december 16. 18.10

javaslom próbáld ki, hogy letiltasz minden jst, hibátlanul menni fog a drupalod, cckstul, viewsostul, szőröstül-bőröstül. persze nem lesz fogd-vidd, hanem helyette lehulló listás súlyozás lesz például. a funkció nem sérül, ha nincs js. alap.

hogy a kérdésre is válaszoljak, nem vagyok feketeöves formAPI mester, de nekem úgy rémlik, hogy a formAPI csak olyan űrlapelemeket és azokban csak olyan értékeket fogad el visszatéréskor, amik a kiküldött formban is benne voltak, ennek pedig valami biztonsági okai vannak.

szerintem röptében, jsből hozzáadott elemekkel megáldott űrlapodat nem fogja megenni a formAPI, meglepődnék, ha igen.

0
0

-
clear: both;

pp képe

Beküldte pp - 2008. december 16. 18.23

Ugyanis onnan tudja a form_api, hogy van benne ilyen form elem, hogy a form tömböt előállító függvény beleteszi azt. Tehát ha te úgy írod meg, hogy ha kliens oldalon hozzáadtak akkor a szerver oldalon is beletedd, akkor meg fogja enni.

Bár én, ha sok textfield-et kell kirakni, akkor inkább azt javasolnám, hogy a formba beraksz egy textarea-t és a js-el elrejted, majd kirakod a textfield-eket és a submit eseményre ráülve beletolod a textareaba minden egyes elemet új sorba. (hisz újsor nem lehet a textfield-ben... vagyis abból ki kell dobni, ha van. ;))
Ekkor ha nincs js az ember tolhatja be az infót új sorba, ha van akkor meg csillivilli felület.

A js nem arra való, hogy valamit csinálj vele, hanem arra, hogy valamit máshogy csinálj vele.

pp

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Bálint képe

Beküldte Bálint - 2008. december 16. 18.47

Ez baromira jó ötlet, köszönöm szépen! Pont megfelel nekem, így fogom csinálni! :)

0
0
aboros képe

Beküldte aboros - 2008. december 16. 19.09

hova teszem?
valami globálisba?

jó hagyjuk, amúgy is ködös ez a szerver oldal sztori. kb annyi a biztos, hogy ott fut a php. :D
de mondjuk szívesen meghallgatok egy gyorstalpalót csütörtökön egy sör mellett. (amit természetesen én vettem neked ;)

0
0

-
clear: both;

pp képe

Beküldte pp - 2008. december 16. 19.28

http://palocz.hu/irasok/2007/dinamikus_select
Az egészet is elolvashatod, de a "Mi is az a DANGEROUS_SKIP_CHECK nem dokumentált direktíva?" cím utáni rész érdekel téged.

Természetesen kérdezhetsz a DUG-on sör nélkül is, no meg a sört is elfogadom csak úgy is ;)

pp

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Bálint képe

Beküldte Bálint - 2008. december 16. 18.40

Igen, erre pp egyik leírásában találtam még anno egy módszert, hogy hogyan kell kiküszöbölni.

Egyébként meg én nem azt mondtam, hogy js nélkül nem működik a drupal, csak nekem valahogy mindig úgy tűnik, hogy 2008-ban letiltott js-ről beszélni szőrszálhasogatás. De lehet, hogy hülyeséget beszélek, csak én így látom. :)

0
0
pp képe

Beküldte pp - 2008. december 16. 18.56

A jövő nem az lesz(szerencsére), hogy van egy oprendszer, egy böngészővel, hanem a paletta a mobil eszközök és játékgépek, settopbox-ok megjelenésével egyre szélesedik. Nem beszélve arról, hogy az idő előrehaladtával szintén változnak a dolgok (a palocz.hu napi huszas látogató számával is begyűjt vagy tíz fajta Firefoxot a többi böngészőről nem is beszélve) Tehát nem arról szól a történet, hogy valaki is kikapcsolná a JavaScriptet, hanem arról, hogy egy icipicit máshogy működik az adott böngészőn az adott Js, más a dom model és más a dom modelt manipuláló függvénykönyvtár, nem JavaScript, hanem mondjuk ECMAScript van és így tovább.

Ezért sose fogsz tudni olyan "JavaScript"-et írni, ami minden böngészőben működni fog, tehát a legjobb, ha felkészülsz arra, hogy akkor is menjen a webalkalmazásod, ha nincs js.

pp
(én pl gyakran nyomulok a telefonommal. A beépített böngészőben most már jól működik az admin menü, az Opera miniben viszont egyáltalán nem. ezért azt használom, mert mobilon nem segít, hanem gátol az a menü. Szóval vannak különbségek)

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

pp képe

Beküldte pp - 2008. december 16. 19.03

Na, be volt állítva, hogy csak az első 10 találatot mutassa (én már ezen is megdöbbentem), de most megnéztem 19 FF verziót regisztrált nálam az analitycs.
FF 19
IE 2
Opera 8
Chrome 9
Safari 8
Mozilla 6
Konqueror 1

ez ötven feletti böngésző verzió szám
Drupal.hu-n megnéztem: az FF 48 különböző verziójával nézték az oldalt és még Galeonnal is rákukkantott valaki.

pp

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

Pasqualle képe

Beküldte Pasqualle - 2008. december 16. 18.15

ne modositsd a Drupal formot javascriptbol, mert csak problemad lesz belole

http://www.katbailey.net/blog/katherine/the-dual-aspect-of-drupal-forms-...

nezd meg a Quick Tabs modul 2.x verziojaban az admin formot. Az formot mindig ujraepiti amikor az Add tab, Delete tab gombra kattintasz, amikor a formot modositod.

0
0
Bálint képe

Beküldte Bálint - 2008. december 16. 18.47

Mindenképpen áttanulmányozom, köszönöm ezt is! :)

0
0
Pasqualle képe

Beküldte Pasqualle - 2008. december 24. 16.55

http://drupal.org/node/348475

0
0
nevergone képe

Beküldte nevergone - 2008. december 16. 18.49

Ha lehetséges, azért majd postold be ide a végleges megoldást, hátha mi is tanulunk belőle valamit! :)

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Bálint képe

Beküldte Bálint - 2008. december 16. 18.56

Rendben, mindenképpen, bár a pp ötletét nem olyan nehéz megvalósítani. :)

0
0
aboros képe

Beküldte aboros - 2008. december 16. 19.07

figyelek.

;)

0
0

-
clear: both;

nevergone képe

Beküldte nevergone - 2008. december 16. 19.19

Mintha ilyesmit láttam már volna valahol régebben, és akkor sem lett túl jó vége...
De ez már off... :)

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

snufkin képe

Beküldte snufkin - 2008. december 24. 17.16

En ezt igy csinaltam anno (Drupal 5-osre irtam). A trukk a form static-ba rejtese.

JS call (egy $.ajax complete reszeben volt):

$.get( 
  'http://d/5/xrt/?q=xmlrpc_method_form', 
  Drupal.settings.xmlrpctester.formAJAX
    { narg: arg.length },
    function(form) {
      $('#xmlrpctester-method-form').remove();
      $('#edit-arguments').after( form );
});

Aztan a php resze:

// Menu callback
		$items[] = array(
			'path' => 'xmlrpc_method_form',
			'title' => t('xmlprctester method form'),
			'callback' => 'xmlrpctester_method_form',
			'access' => TRUE,
			'type' => MENU_CALLBACK,
		);
 
// Maga a form felepitese:
/**
 * AJAX callback to render a form for the method call
 * $narg gives the number of arguments we need
 * a textfield for
 */
function xmlrpctester_method_form() {
	static $form;
	$narg = $_GET['narg'];
	if(isset($form)) { // meaning we have already built it
		return($form);
	}
	else { // first hit
		$form = array();
		$form['args'] = array(
			'#type' => 'fieldset',
			'#title' => t('Method arguments'),
			'#collapsible' => FALSE,
			);
		for($n=0; $n< $narg; $n++) {
			$form['args']['argument_' . $n] = array(
				'#type' => 'textfield',
				'#title' => t('Argument' . $n),
			);
		}
		print drupal_get_form('xmlrpctester_method_form');
	}
}
0
0