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 ?

Improve this question
3
  • 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 How to Ask. Then edit with a minimal reproducible example. Commented Jun 8, 2022 at 11:21
  • 1
    PS: you have a misplaced " in name="sugg_weight[] required" ... should be name="sugg_weight[]" required Commented Jun 8, 2022 at 11:23
  • If im understanding you, you want to check this out JQuery: Selecting dynamically created elements Commented Jun 8, 2022 at 11:24

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much for your answer Mr.Roko C. Buljan, it solved my problem
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 />

Improve this answer

5 Comments

Stop using inline on* JS handlers. JS should be in one place only and that's the respective tag or file.
@RokoC.Buljan unless it's some framework that changes the syntax every so slightly to @input?
: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. ;)
@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. :)
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.