[SOLUCIONADO] ¿Cómo puedo enlistar todos los campos de un formulario?

[dfmex]

Hola !!!

deseo enlistar todos los campos existentes en un formulario y sus valores (que hayan sido escritos por el usuario), por ejemplo para el formulario:

Código:

<form id="formulario" name="formulario">

<input type="text" name="Nombre" id="Nombre"  />
<input type="text" name="Apellido" id="Apellido"  />
<input type="text" name="Ciudad" id="Ciudad"  />

<select name="Promocion" id="Promocion">
<option value="1">Promo 1</option>
<option value="2">Promo 2</option>
<option value="3">Promo 3</option>
</select>


</form>

Debería devolverme:

Nombre : Juan
Apellido : Zaragoza
Ciudad : Madrid
Promocion : 3

*** Suponiendo que el usuario haya escrito Juan, Zaragoza, Madrid y haya seleccionado PROMO 3 en el combobox...

¿Alguien podría darme una ayudadita?, he intentado con el siguiente código pero no se que hacer para formar la lista e identificar si es checkbox o input... o estoy muy perdido la verdad...:

Código:

  var campos = document.forms["formulario"].elements;
  for (i=0; i<elementos.length; i++){

aqui codigo para formar lista (Según)

  }
}

[Alexis88]

Ya tienes la idea, solamente te faltó recorrer al conjunto de elementos que contiene el formulario y en cada iteración, ir imprimiendo el Id y valor de cada uno de ellos.

Código Javascript:

var form = document.getElementById("formulario"),
    elementos = form.elements,
    total = elementos.length;
 
form.addEventListener("submit", function(e){
    e.preventDefault();
    for (i = 0; i < total; i++)
        if (elementos[i].getAttribute("type") != "submit")
            document.body.innerHTML += elementos[i].id + ": " + elementos[i].value + "<br />";
}, false);
 

Esto sucederá cuando se haya mandado a procesar el formulario (evento submit), para lo cual, evito que se ejecute esta acción mediante el método preventDefault. Ya controlado dicho evento, proceso a recorrer al conjunto de elementos del formulario con ayuda de un bucle. En cada iteración, imprimiré los datos que deseo mostrar siempre y cuando no se trate del botón de tipo "submit" que es el que utilizo para el envío de los datos del formulario para su procesamiento.

DEMO

Saludos

[dfmex]

Iniciado por Alexis88

Ya tienes la idea, solamente te faltó recorrer al conjunto de elementos que contiene el formulario y en cada iteración, ir imprimiendo el Id y valor de cada uno de ellos.

Código Javascript:

var form = document.getElementById("formulario"),
    elementos = form.elements,
    total = elementos.length;
 
form.addEventListener("submit", function(e){
    e.preventDefault();
    for (i = 0; i < total; i++)
        if (elementos[i].getAttribute("type") != "submit")
            document.body.innerHTML += elementos[i].id + ": " + elementos[i].value + "<br />";
}, false);
 

Esto sucederá cuando se haya mandado a procesar el formulario (evento submit), para lo cual, evito que se ejecute esta acción mediante el método preventDefault. Ya controlado dicho evento, proceso a recorrer al conjunto de elementos del formulario con ayuda de un bucle. En cada iteración, imprimiré los datos que deseo mostrar siempre y cuando no se trate del botón de tipo "submit" que es el que utilizo para el envío de los datos del formulario para su procesamiento.

DEMO

Saludos

Funcionó fenomenal, lo adapté a mis necesidades y todo bien, te agradezco mucho por responder a mi pregunta!