Form elemek létrehozása Javascripttel

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ó: 
LaciApu képe

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

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

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

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

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

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

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

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
Bálint képe

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

0
0
aboros képe

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

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
Bálint képe

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

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
pp képe

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
Pasqualle képe

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

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

0
0
Pasqualle képe

nevergone képe

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

0
0
Bálint képe

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

0
0
aboros képe

figyelek.

;)

0
0

-
clear: both;

nevergone képe

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
snufkin képe

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