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 
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 
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)

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
  #formKont {display: none}
  #responseKont, #leftKont {float: left; margin: 10px}
  #responseKont div {border: 1px solid black; padding: 5px;height: 1em;}
</style>
<script>
function mutat() {
  if (document.getElementById("formKont").style.display == "block")
  {
    document.getElementById("formKont").style.display = "none";
  } else {
    document.getElementById("formKont").style.display = "block";
  }
}

function masol()
{
  var input = document.getElementById("input01");
  var select = document.getElementById("select01");
  
  document.getElementById("input01K").innerHTML = input.value;
  document.getElementById("select01K").innerHTML = select.value;
}
</script>
</head>
<body>
  <a href="#" onclick="mutat()" alt="Mutat">Form</a>
  
  <div id="formKont">
    <div id="leftKont">
      <form id="form" onsubmit="masol();return false">
      Input: <input type="text" id="input01" /><br />
      Select: <select id="select01">
      <option value=""></option>
      <option value="ertek1">ertek1</option>
      <option value="ertek2">ertek2</option>
      <option value="ertek3">ertek3</option>
      </select><br />
      <input type="submit" value="Küld" /> 
      </form>
    </div>
    <div id="responseKont">
      <div id="input01K"></div>
      <div id="select01K"></div>
    </div>

  </div>
  
</body>
</html>​
Kipróbálás ITT
3

Kifejtett megoldás

Poetro · 2010. Okt. 6. (Sze), 19.08
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Form</title>
  <style type="text/css">
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <a href="#" id="show-form">Show form</a>
	<form action="#" class="hide" id="form">
    <label for="name">
      Name:
      <input type="text" name="name" id="name" />
    </label>
    <label for="type">
      Type:
      <select name="type" id="type">
	      <option value="A">a</option>
	      <option value="B">b</option>
	      <option value="C">c</option>
	      <option value="D">d</option>
      </select>
    </label>
    <input type="submit" />
  </form>
  <div id="form-values"></div>
  <script type="text/javascript">
(function (window, document, linkId, formId, textId, selectId, hideClass, divId) {
  var form = document.getElementById(formId),
      link = document.getElementById(linkId),
      rhide = new RegExp('(?:^|\\s+)'+ hideClass +'(?:$|\\s+)'),
      // Böngésző független esemény hozzácsatolás (messze nem tökéletes)
      addEvent = function (elm, evt, func) {
        // Olyan függvényt állítunk elő amiben a this már az esemény célpontja.
        var f = function (event) {
                  var target,
                      returnValue; // Az esemény célpontja

                  if (!event) event = window.event;
                  if (event.target) target = event.target;
                  else if (event.srcElement) target = event.srcElement;
                  if (target && target.nodeType == 3) target = target.parentNode;
                  event.preventDefault = event.preventDefault || function () {
                    this.returnValue = false;
                  }

                  return func.call(target, event);
                };

        if (elm.addEventListener) {
          elm.addEventListener(evt, f, false);
        }
        else if (elm.attachEvent) {
          elm.attachEvent(('on' + evt), f);
        }
        else {
          elm['on' + evt] = f;
        }
      },
      trim = function (text) {
        return (text || "").replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );
      };

  // Click esemény hozzáadása a linkhez, és kezelése.
  addEvent(link, 'click', function (event) {
    // Eltávolítjuk az elrejtést végző osztályt a formról
    if (form.className) {
      form.className = trim(form.className.replace(rhide, ' '));
    }

    // Nem kell az alapértelmezett eseménykezelés.
    event.preventDefault();
  });

  // Submit esemény hozzáadása a form-hoz.
  addEvent(form, 'submit', function (event) {
    var textField = document.getElementById(textId),
        selectField = document.getElementById(selectId),
        div = document.getElementById(divId),
        textValue = (textField && textField.value) || '',
        selectValues = [],
        options = selectField && selectField.options,
        ol = options && options.length,
        option,
        i = 0;

    // Megnézzük mely elemek lettek a form-ban kiválasztva
    for (; i < ol; i++) {
      option = options[i];
      if (option.selected) {
        selectValues.push(option.value);
      }
    }
    // Elrejtjük a form-ot, úgy, hogy hozzáadjuk az osztályt
    if (!rhide.test(form.className)) {
      form.className = trim(trim(form.className) + ' ' + hideClass);
    }

    // A div-et feltöltjük a mezők értékével
    if (div) {
      div.innerHTML = textId + ': ' + textValue + '<br />' +
        selectId + ': [' + selectValues.join(', ') + ']'
    }

    // Nem kell az alapértelmezett esemény kezelés.
    event.preventDefault();
  });
}(this, document, 'show-form', 'form', 'name', 'type', 'hide', 'form-values'));
  </script>
</body>
</html>