The addition of a input using js?

Trying to add to the form input via js, but does not understand what is wrong? The form is rendered dynamically via php
here is the form
<form id='Form' action='/callback2.php' method='POST' class='site-form callback-form'>
 <h3 class='text-center'>feedback</h3>
 <p class='text-center'>Fill out the form and Manager will contact you shortly</p>
 <div class='row'>
 <div class='col-12 form-group my-input error'>
 <input type='text' name='NAME' class='form-control' value=">
 <div class='placeholder'>Name</div>
</div>

 <div class='col-12 form-group my-input error'>
 <input type='text' name='PHONE' class='form-control' value=">
 <div class='placeholder'>Phone</div>
</div>

 <div class='col-12 form-group my-input error'>
 <input type='text' name='EMAIL' class='form-control' value=">
 <div class='placeholder'>Email</div>
</div>

 <div class='col-12 form-group my-input error'>
 <input type='textarea' name='MYTEXT' class='form-control my-text-area' value=">
 <div class='placeholder'>Message</div>
</div>


 <div class='col-12 form-group my-input error'>
 <input type='checkbox' name='CONSENT' value='1' id='field_CONSENT' checked readonly>
 <label class='form-check-label' for='field_CONSENT'>
 Consent to <a href='/consent/' target='_blank'>processing</a> personal data </label>
</div>



</div>
 <div class='item submit text-center'>
 <input class='btn btn-red' type='submit' value='Send request'>
</div>
</form>


here is the js code For adding the input

the <script>
var inp = '< input type="hidden" name="ncapt" value="< ?echo md5(date('Y-m-d'));? >" >';

$("#Form").append(inp);
</script>

don't know why is not added input?
March 25th 20 at 13:46
1 answer
March 25th 20 at 13:48
If server-side form tag the script, and want it added input when a customer comes in, then:
1. var inp = " is just a string, it would be necessary to force js to do DOM object, you can do so - $(inp), will receive a DOM object wrapper jq; or $('#form').html( inp ); - string then Your markup will be built into the DOM as a string and after that will be added to the DOM as necessary.
2. The script runs the risk to start before the DOM is built, so wrap it in window.onload only desirable via addEventListener.
PS: if server-side form the form why these dances with js? Not just easier echo '<input ....'?
I agree. The script is likely used before the form was rendered.
Either this script must be placed strictly after the mold or so:

window.addEventListener('load', function(){
$("#Form").append(inp);
})


Or this:

window.onload = function(){
$("#Form").append(inp);
};
- Rud commented on March 25th 20 at 13:51
@Rud, eventListener better as the onload is the key, which another script can hang its treatment, and if you use the onload can overwrite the handlers, and the eventListener just add another processor, and will NOT overwrite any previous handlers. - earnestine.Rolfson commented on March 25th 20 at 13:54

Find more questions by tags JavaScript