Estoy usando JS y FormData para recopilar valores de un formulario html y luego crear una cadena que se guarda en localStorage. Pero estoy obteniendo "indefinido" antepuesto al primer valor.
mi formulario:
<form id="prd2"> <input type="hidden" name="product" value="et345"> <input type="hidden" name="name" value="Tshirt"> <select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br> <input type="hidden" name="img" value="img345"> <input type="hidden" name="optType" value="clothing"> <button id="btn2" class="addcart">Add to Cart</button> </form>Mi JS para tomar los valores:
var additem; var frm = document.getElementById('prd2'); var data = new FormData(frm); for (var value of data.values()) { additem += value + '|'; } También intenté configurar var additem = '';
Espero que el valor de additem sea:
et345|Tshirt|2|img345|clothing|Pero estoy terminando con:
undefinedet345|Tshirt|2|img345|clothing|Si bien puedo eliminar manualmente el "indefinido" de la cadena antes de almacenar, preferiría averiguar por qué se agrega para empezar.
Asignar la cadena de longitud cero resolverá esto.
Hacer esto:
var additem = "";En lugar de esto:
var additem; Debido a que Javascript asigna naturalmente el valor undefined a todas las variables, por lo que cuando lo agrega con otra cadena, simplemente agregará el indefinido.
Por ejemplo:
var shouldBeUndefined; var shouldBeNullString = ""; console.log(shouldBeUndefined); console.log(shouldBeNullString); shouldBeUndefined += "concat"; shouldBeNullString += "concat"; console.log(shouldBeUndefined); console.log(shouldBeNullString);Código de trabajo completo:
var additem = ""; var frm = document.getElementById('prd2'); var data = new FormData(frm); for (var value of data.values()) { additem += value + '|'; } console.log(additem); <form id="prd2"> <input type="hidden" name="product" value="et345"> <input type="hidden" name="name" value="Tshirt"> <select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br> <input type="hidden" name="img" value="img345"> <input type="hidden" name="optType" value="clothing"> <button id="btn2" type="submit" class="addcart">Add to Cart</button> </form>