3

hola tengo el siguiente código hasta el momento tratando de iterar X formulario para posterior mente llenar ese formulario con datos que ya obtengo de mi base de datos con el siguiente formato '41||ESTO ES CON PROVEDOR Y CON IMAGEN||10||1||10||||'

const forms = document.getElementById(nombredelformulario).elements;
console.log(forms)
const form = forms[0];
[...form].forEach((input) => {
  console.log(input);
});

pero no logro conseguirlo en consola me arroja el siguiente error

funciojes.js:580 Uncaught TypeError: form is not iterable

dejo aquí el formulario:

<form id="form_para_editar_productos" enctype="multipart/form-data">
      <input type="hidden" name="id_de_producto" id="id_de_producto">
      <label>Nombre Del Producto</label>
      <input type="text" name="nombre_producto_editar" id="nombre_producto_editar" class="form-control input-sm modales" onkeypress="return validar(event)">
      <label>Existencias Del Producto</label>
      <input type="number" name="cantidad_producto_editar" id="cantidad_producto_editar" class="form-control input-sm modales" onkeypress="return validar(event)">
      <label>Unidad De Medida</label>
      <select id="unidadmedida_editar" name="unidadmedida_editar" class="form-control form-select form-select-sm input-sm">
        <?php 
          $sql="SELECT * FROM `unidadmedida`";
          $result=mysqli_query($conexion,$sql);
          while($ver=mysqli_fetch_row($result)):
        ?>
          <option value="<?php echo $ver[0]?>">
            <?php echo $ver[1];?>
          </option>
        <?php endwhile;?>
      </select>
      <label>Precio Del Producto</label>
      <input type="number" name="precio_producto_editar" id="precio_producto_editar" class="form-control input-sm " onkeypress="return validar(event)">
      <label>Proveedor</label>
      <select name="provedor_editar" id="provedor_editar" class="form-control form-select form-select-sm input-sm">
        <?php 
          $sqlproveU="SELECT * FROM `alma2`.`provedores`";
          $resulU=mysqli_query($conexion,$sqlproveU);
          while($ver2=mysqli_fetch_row($resulU)):
        ?>
            <option value="<?php echo $ver2[0]?>">
              <?php echo $ver2[1];?>
            </option>
          <?php endwhile;?>
      </select>
      <label>Imagen Del Producto</label>
      <input type="file"  id="img_producto_editar" name="img_producto_editar"  class="form-control">
    </form>

1 respuesta 1

4

Si lo que quieres es capturar los nodos del formulario puedes usar document.querySelectorAll y algún atributo CSS que te sirva como selector en común para todos los campos, por ejemplo usando el atributo name:

(function() {
  // 2. selecciona los nodos dentro del form que usen el atributo "name":
  var controls = document.querySelectorAll('form [name]');

  // 3. recorre los nodos encontrados:
  controls.forEach(function(control) {
    console.log(control);
    control.value = Math.random();
  });
})();
<form id="form">
  <!-- 1. agrega el atributo "name" a cada campo que deseas seleccionar -->
  <input type="text" name="firstName" placeholder="Nombre" />
  <input type="text" name="lastName" placeholder="Apellido" />
  <input type="submit" value="Enviar" />
</form>

O usando una clase CSS:

(function() {
  // 2. selecciona los nodos dentro del form que usen la clase "form-control":
  var controls = document.querySelectorAll('form .form-control');

  // 3. recorre los nodos encontrados:
  controls.forEach(function(control) {
    console.log(control);
    control.value = Math.random();
  });
})();
<form id="form">
  <!-- 1. agrega la clase "form-control" a cada campo que deseas seleccionar -->
  <input type="text" class="form-control" placeholder="Nombre" />
  <input type="text" class="form-control" placeholder="Apellido" />
  <input type="submit" value="Enviar" />
</form>

[OLD]

Si te refieres a sacar el valor de los datos que se ingresan en el formulario, una de las opciones más fáciles es usando FormData:

(function() {
  // 3. seleccionas el nodo del form:
  var form = document.getElementById('form');
  
  // 4. agregas un handler al evento "submit" del form
  // el cual se ejecutará al enviar el formulario
  form.addEventListener('submit', function(e) {
    // 5. con esto evitas que se recargue la página al enviar la información:
    e.preventDefault();

    // 6. extraes la información ingresada usando FormData y Object.fromEntries:
    var data = new FormData(form);
    var info = Object.fromEntries(data.entries());

    // 7. aquí ya tienes acceso a la información, en este caso solo la imprimo:
    console.log(info);
  });
})();
<!-- 1. le asignas el id al form -->
<form id="form">
  <!-- 2. defines los campos, cada campo debe tener el atributo "name" -->
  <input type="text" name="firstName" placeholder="Nombre" />
  <input type="text" name="lastName" placeholder="Apellido" />
  <input type="submit" value="Enviar" />
</form>

4
  • una disculpa creo no me explique bien quiero recorrer el formulario no con el fin de obtener sus datos si no para poder llenar el formulario
    – Gomaru
    el 17 ago. 2022 a las 21:15
  • ok, en ese caso permíteme editar la respuesta... el 17 ago. 2022 a las 21:17
  • @Gomaru edité la respuesta, revisa si esa estrategia te sirve en tu caso y me comentas el 17 ago. 2022 a las 21:30
  • muchas gracias me salvaste de un apuro gracias !!!
    – Gomaru
    el 17 ago. 2022 a las 21:35

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.