ugrás a tartalomhoz

Form adatainak másik divbe írása post nélkül

Creative · 2010. Okt. 6. (Sze), 12.40
Hali

A következő gonddal akadtam el most: adott egy oldal, benne egy űrlap, ami egy linkre kattintáskor jelenik meg. Az alján egy küldő gombot helyeztem el. A célom az lenne, hogy miután rákattintok, a formból kiválasztott 2 érték (egyik select, másik text; mindkettő egyedi id és name értékekkel) a másik divbe íródjon ki, egyfajta táblázatos elrendezést létrehozva. Mivel nem kellene hozzá az oldal újratöltése, így gondolom ajax, vagy js a megoldás. Ami bonyolítja a dolgot, hogy onclick eseménynek szeretném, ha ez az előtűnt form ismét elrejtőzne. Viszont se ajax -al se javascript -el nem igazán dolgoztam ilyen komolyan, úgyhogy ha valaki konkrét megoldással támogatna, annak nagyon örülnék ^^

C.
‹ Fura dolog a doctype-val Javascript tömb random ›
 ■
1

Munkamenet

Poetro · 2010. Okt. 6. (Sze), 13.47
A link (getElementById, getElementsByTagName) click eseményére feliratkozol (addEventListener, attachEvent), megakadályozod az alapértelmezett eseményt (preventDefault, returnValue), és megjeleníted a formot, mondjuk úgy, hogy egy CSS osztályt (className), ami
  1. display: none  
eltávolítasz a formról (replace).

A form (getElementById, getElementsByTagName) submit eseményére feliratkozol (addEventListener, attachEvent). Amikor megtörténik, megakadályozod az alapértelmezett eseményt (preventDefault, returnValue), kimásolod a neked kellő form mezőket egy JavaScript változóba (getElementById, value, getElementsByTagName). Elrejted a formot, mondjuk úgy, hogy hozzáadsz egy CSS osztályt (className), ami
  1. display: none  
Beleírod a kimásolt változókat egy másik div-be (getElementById) írod (innerHTML).

Az összes kulcsszó zárójelben van, ezekre kell keresni a megvalósítás érdekében. És az AJAX is JavaScript. Teljesen.
2

Működő

mortein79 · 2010. Okt. 6. (Sze), 14.04
Poetro remekül leírta, ezt kellene csinálnod ha értenél hozzá. :) De mivel le is írtad, hogy nem értesz, próbáld ezt pl.: (nem a fenti módszer implementálás, jóval ódivatúbb csúf vegyessaláta, de kiindulhatsz belőle)
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <style>  
  6.   #formKont {display: none}  
  7.   #responseKont, #leftKont {float: left; margin: 10px}  
  8.   #responseKont div {border: 1px solid black; padding: 5px;height: 1em;}  
  9. </style>  
  10. <script>  
  11. function mutat() {  
  12.   if (document.getElementById("formKont").style.display == "block")  
  13.   {  
  14.     document.getElementById("formKont").style.display = "none";  
  15.   } else {  
  16.     document.getElementById("formKont").style.display = "block";  
  17.   }  
  18. }  
  19.   
  20. function masol()  
  21. {  
  22.   var input = document.getElementById("input01");  
  23.   var select = document.getElementById("select01");  
  24.     
  25.   document.getElementById("input01K").innerHTML = input.value;  
  26.   document.getElementById("select01K").innerHTML = select.value;  
  27. }  
  28. </script>  
  29. </head>  
  30. <body>  
  31.   <a href="#" onclick="mutat()" alt="Mutat">Form</a>  
  32.     
  33.   <div id="formKont">  
  34.     <div id="leftKont">  
  35.       <form id="form" onsubmit="masol();return false">  
  36.       Input: <input type="text" id="input01" /><br />  
  37.       Select: <select id="select01">  
  38.       <option value=""></option>  
  39.       <option value="ertek1">ertek1</option>  
  40.       <option value="ertek2">ertek2</option>  
  41.       <option value="ertek3">ertek3</option>  
  42.       </select><br />  
  43.       <input type="submit" value="Küld" />   
  44.       </form>  
  45.     </div>  
  46.     <div id="responseKont">  
  47.       <div id="input01K"></div>  
  48.       <div id="select01K"></div>  
  49.     </div>  
  50.   
  51.   </div>  
  52.     
  53. </body>  
  54. </html>​  
Kipróbálás ITT
3

Kifejtett megoldás

Poetro · 2010. Okt. 6. (Sze), 19.08
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>Form</title>  
  6.   <style type="text/css">  
  7.     .hide {  
  8.       display: none;  
  9.     }  
  10.   </style>  
  11. </head>  
  12. <body>  
  13.   <a href="#" id="show-form">Show form</a>  
  14.     <form action="#" class="hide" id="form">  
  15.     <label for="name">  
  16.       Name:  
  17.       <input type="text" name="name" id="name" />  
  18.     </label>  
  19.     <label for="type">  
  20.       Type:  
  21.       <select name="type" id="type">  
  22.           <option value="A">a</option>  
  23.           <option value="B">b</option>  
  24.           <option value="C">c</option>  
  25.           <option value="D">d</option>  
  26.       </select>  
  27.     </label>  
  28.     <input type="submit" />  
  29.   </form>  
  30.   <div id="form-values"></div>  
  31.   <script type="text/javascript">  
  32. (function (window, document, linkId, formId, textId, selectId, hideClass, divId) {  
  33.   var form = document.getElementById(formId),  
  34.       link = document.getElementById(linkId),  
  35.       rhide = new RegExp('(?:^|\\s+)'+ hideClass +'(?:$|\\s+)'),  
  36.       // Böngésző független esemény hozzácsatolás (messze nem tökéletes)  
  37.       addEvent = function (elm, evt, func) {  
  38.         // Olyan függvényt állítunk elő amiben a this már az esemény célpontja.  
  39.         var f = function (event) {  
  40.                   var target,  
  41.                       returnValue; // Az esemény célpontja  
  42.   
  43.                   if (!event) event = window.event;  
  44.                   if (event.target) target = event.target;  
  45.                   else if (event.srcElement) target = event.srcElement;  
  46.                   if (target && target.nodeType == 3) targettarget = target.parentNode;  
  47.                   eventevent.preventDefault = event.preventDefault || function () {  
  48.                     this.returnValue = false;  
  49.                   }  
  50.   
  51.                   return func.call(target, event);  
  52.                 };  
  53.   
  54.         if (elm.addEventListener) {  
  55.           elm.addEventListener(evt, f, false);  
  56.         }  
  57.         else if (elm.attachEvent) {  
  58.           elm.attachEvent(('on' + evt), f);  
  59.         }  
  60.         else {  
  61.           elm['on' + evt] = f;  
  62.         }  
  63.       },  
  64.       trim = function (text) {  
  65.         return (text || "").replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );  
  66.       };  
  67.   
  68.   // Click esemény hozzáadása a linkhez, és kezelése.  
  69.   addEvent(link, 'click', function (event) {  
  70.     // Eltávolítjuk az elrejtést végző osztályt a formról  
  71.     if (form.className) {  
  72.       form.className = trim(form.className.replace(rhide, ' '));  
  73.     }  
  74.   
  75.     // Nem kell az alapértelmezett eseménykezelés.  
  76.     event.preventDefault();  
  77.   });  
  78.   
  79.   // Submit esemény hozzáadása a form-hoz.  
  80.   addEvent(form, 'submit', function (event) {  
  81.     var textField = document.getElementById(textId),  
  82.         selectField = document.getElementById(selectId),  
  83.         div = document.getElementById(divId),  
  84.         textValue = (textField && textField.value) || '',  
  85.         selectValues = [],  
  86.         options = selectField && selectField.options,  
  87.         ol = options && options.length,  
  88.         option,  
  89.         i = 0;  
  90.   
  91.     // Megnézzük mely elemek lettek a form-ban kiválasztva  
  92.     for (; i < ol; i++) {  
  93.       option = options[i];  
  94.       if (option.selected) {  
  95.         selectValues.push(option.value);  
  96.       }  
  97.     }  
  98.     // Elrejtjük a form-ot, úgy, hogy hozzáadjuk az osztályt  
  99.     if (!rhide.test(form.className)) {  
  100.       form.className = trim(trim(form.className) + ' ' + hideClass);  
  101.     }  
  102.   
  103.     // A div-et feltöltjük a mezők értékével  
  104.     if (div) {  
  105.       div.innerHTML = textId + ': ' + textValue + '<br />' +  
  106.         selectId + ': [' + selectValues.join(', ') + ']'  
  107.     }  
  108.   
  109.     // Nem kell az alapértelmezett esemény kezelés.  
  110.     event.preventDefault();  
  111.   });  
  112. }(this, document, 'show-form', 'form', 'name', 'type', 'hide', 'form-values'));  
  113.   </script>  
  114. </body>  
  115. </html>