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
    Commented el 17 ago. 2022 a las 21:15
  • ok, en ese caso permíteme editar la respuesta... Commented el 17 ago. 2022 a las 21:17
  • @Gomaru edité la respuesta, revisa si esa estrategia te sirve en tu caso y me comentas Commented el 17 ago. 2022 a las 21:30
  • muchas gracias me salvaste de un apuro gracias !!!
    – Gomaru
    Commented el 17 ago. 2022 a las 21:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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