1

I have this form here

enter image description here

and I want to prevent submit the form as long as the inputs value is not equal to 100, In other words, to complete and save, the values of all inputs must be equal to 100

How to do this given that the inputs are created by DOM as the following picture :

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>'
                );

            });

});

how to get all the inputs value on submit and validate that they are equal to 100 ?

Div.A
  • 27
  • 7
  • 1
    Why cutting a screenshot, draw into it, uploading it and waste world-wide silica instead of simply copy/pasting the actual code? Please read [ask]. Then [edit] with a [mcve]. – Roko C. Buljan Jun 08 '22 at 11:21
  • 1
    PS: you have a misplaced `"` in `name="sugg_weight[] required"` ... should be `name="sugg_weight[]" required` – Roko C. Buljan Jun 08 '22 at 11:23
  • If im understanding you, you want to check this out [JQuery: Selecting dynamically created elements](https://stackoverflow.com/questions/17561243/jquery-selecting-dynamically-created-elements-and-pushing-to-firebase) – akaBase Jun 08 '22 at 11:24

2 Answers2

2
  • Fix your name values.
    Should be name="sugg_weight[]", not name="sugg_weight[] required"
  • Use event delegation with the .on() Method $staticParent.on("eventname", "dynamicChild", fn)
  • Anternatively use just $staticParent.on("eventname", fn) considering Event propagation (meaning that a static parent can be notified of any events propagated from any static or dynamic child element).
  • Use Array.prototype.reduce to reduce your dynamic input's values to a Number

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>

or you could also use simply $innerSugg.on("input", toggleSubmit); exploiting event propagation.

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>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
1

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 />
online Thomas
  • 8,864
  • 6
  • 44
  • 85
  • Stop using inline `on*` JS handlers. JS should be in one place only and that's the respective tag or file. – Roko C. Buljan Jun 08 '22 at 11:40
  • @RokoC.Buljan unless it's some framework that changes the syntax every so slightly to [`@input`](https://vuejs.org/guide/essentials/forms.html)? – online Thomas Jun 08 '22 at 11:42
  • :D If I got your parallelism correctly, you're *not* using a framework here — where usually it's all inside a single component file (markup, styles, js/x). You're suggesting to use (often referred as *unsafe*) inline `on*` JS attribute handlers disseminated in HTML files. Maybe not that "XSS unsafe", but amongst many disadvantages makes JS hard to debug first and foremost. ;) – Roko C. Buljan Jun 08 '22 at 12:01
  • @RokoC.Buljan You understood correctly, now I would also use selectors in a real world js app that has no framework. Also, I feel the same way about still using jQuery: stop using it. I guess we should pick our battles. :) – online Thomas Jun 08 '22 at 12:20
  • Great argument regarding selectors. But anyways a selector is language agnostic. And if done properly can relate to your component Class/name. `onclick` will pause parsing to invoke the JS interpreter and assign listeners to it. Clearly not something you would want to expose to an attacker or lose time debugging your JS errors. – Roko C. Buljan Jun 08 '22 at 12:29