0
397
ViewsObtenga una matriz de valores de entrada creados usando DOM en jQuery
aqui tengo este formulario
y quiero evitar enviar el formulario siempre que el valor de las entradas no sea igual a 100, en otras palabras, para completar y guardar, los valores de todas las entradas deben ser iguales a 100
Cómo hacer esto dado que las entradas son creadas por DOM como la siguiente imagen:
url: '/getProjectStandards/' + standid, type: "get", async: true, dataType: "json", success: function (data2) { console.log(data2); $.each(data2, function (key, value) { $('#inner_sugg').append('<div class="row mt-1">' + '<div class="col-6">' + '<p class="">' + value['stand_name'] + '</p>' + '</div>' + '<div class="col-6">' + '<input type="hidden" class="form-control col-3" name="stand_id[]" value="' + value['id'] + '">' + '<input type="number" min="0" class="form-control col-3 sugg_weight" name="sugg_weight[]" required">' + '</div>' + '</div>' ); });});
¿Cómo obtener todos los valores de entrada al enviar y validar que son iguales a 100?
·
Juan Pablo Isaza
2 answers
Answer question0
- Corrija los valores de su
name.
Debería sername="sugg_weight[]", noname="sugg_weight[] required" - Utilice la delegación de eventos con el método .on()
$staticParent.on("eventname", "dynamicChild", fn) - Alternativamente, use solo
$staticParent.on("eventname", fn)teniendo en cuenta la propagación de eventos (lo que significa que se puede notificar a un padre estático sobre cualquier evento propagado desde cualquier elemento secundario estático o dinámico). - Use Array.prototype.reduce para reducir los valores de su entrada dinámica a un número
const $innerSugg = $("#inner_sugg"); const toggleSuggSubmit = () => { const $inputs = $("[name='sugg_weight[]']", $innerSugg); const $submit = $("[type='submit']", $innerSugg); const total = $inputs.get().reduce((tot, el) => tot += parseFloat(el.value??0), 0); $submit.prop({disabled: total !== 100}); }; $innerSugg.on("input", "[name='sugg_weight[]']", toggleSuggSubmit); // Just to fake "AJAX generated" inputs at a later time... $innerSugg.prepend(` <input type="number" name="sugg_weight[]" required> <input type="number" name="sugg_weight[]" required> <input type="number" name="sugg_weight[]" required> `); <form id="inner_sugg"> = 100 <button type="submit" disabled>SUBMIT</button> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> o también puede usar simplemente $innerSugg.on("input", toggleSubmit); Explotación de la propagación de eventos.
const $innerSugg = $("#inner_sugg"); const toggleSuggSubmit = () => { const $inputs = $("[name='sugg_weight[]']", $innerSugg); const $submit = $("[type='submit']", $innerSugg); const total = $inputs.get().reduce((tot, el) => tot += parseFloat(el.value??0), 0); $submit.prop({disabled: total !== 100}); }; $innerSugg.on("input", toggleSuggSubmit); // Just to fake "AJAX generated" inputs at a later time... $innerSugg.prepend(` <input type="number" name="sugg_weight[]" required> <input type="number" name="sugg_weight[]" required> <input type="number" name="sugg_weight[]" required> `); <form id="inner_sugg"> = 100 <button type="submit" disabled>SUBMIT</button> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
·
Juan Pablo Isaza
Report
0
function canISave() { const inputs = document.querySelectorAll("input[name='sugg_weight[]']"); let total = 0; inputs.forEach((i) => total += (parseInt(i.value) || 0)); // console.log(total); document.querySelector('#submit').disabled = total !== 100; } input { display: block; } <input type="number" name="sugg_weight[]" oninput="canISave()" /> <input type="number" name="sugg_weight[]" oninput="canISave()" /> <input type="number" name="sugg_weight[]" oninput="canISave()" /> <br> <input id="submit" type="submit" disabled />
·
Juan Pablo Isaza
Report
Answer question