Добавление инпута через js?

Question

[Денис]

Пытаюсь добавить в форму инпут через js, но не работает не пойму что не так? Форма динамически через php отрисовывается
вот форма

<form id='Form' action='/callback2.php' method='POST' class='site-form callback-form'>
    <h3 class='text-center'>Обратная связь</h3>
    <p class='text-center'>Заполните форму и менеджер свяжется с вами в ближайшее время</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'>Имя</div>
            </div>
            
                                <div class='col-12 form-group my-input error'>
                <input type='text' name='PHONE' class='form-control' value=''>
                <div class='placeholder'>Телефон</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'>Сообщение</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'>
                    Согласие на <a href='/consent/' target='_blank'>обработку</a> персональный данных                </label>
            </div>
       


    </div>
    <div class='item submit text-center'>
        <input class='btn btn-red' type='submit' value='Отправить заявку'>
    </div>
</form>

вот код js Для добавления инпута

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

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

не понимаю почему не добавляется инпут?

Answer 1

[Dima Polos]

Если на стороне сервера формируете тег скрипт, и хотите, чтобы он добавил инпут когда на клиент придет, то:
1. var inp = '' - это просто строка, надо бы заставить js из нее сделать объект DOM, можно это сделать так - $(inp), получим объект DOM в обертке jq; или $('#form').html( inp ); - тогда строка Вашей разметки будет встроена в DOM как просто строка и после этого уже будет добавлена в DOM как надо.
2. Скрипт рискует запуститься до того, как будет построен DOM, так что оберните его еще в window.onload, только желательно через addEventListener.
PS: если на стороне сервера формируете форму, зачем эти танцы с js? Не проще просто echo '<input ....'?

Comments

[fallus]

Согласен. Скрипт, скорее всего, применяется до того как форма была отрендерена.
Либо этот скрипт должен быть расположен строго после формы, либо так:

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

Или так:

window.onload = function(){
  $("#Form").append(inp);
};

[Dima Polos]

fallus, eventListener лучше, так как onload это ключ, на который другой скрипт может повесить свою обработку, и если пользоваться onload можно перезаписать обработчики, а eventListener просто добавит еще один обработчик и НЕ перезапишет все обработчики предыдущие.