Как ввести передать значение поля input в функцию?

Question

[Антон]

Есть поле и кнопкой:

<input type="text" class="form-control" name="name" id="name" value="1" placeholder="Имя">
<span class="input-group-btn" id="sendbutton">
	<script type="text/javascript">
		var name = document.getElementById('name').value;
		document.getElementById("sendbutton").innerHTML = '<button type="button" class="btn btn-default" onclick="TFunction( ' + name + ' );">Отправить</button>';
	</script>
</span>

И этот код работает, но неправильно - чтобы я не вписал в поле, в функции alert всегда выводит единицу ("1"). Если убрать value или оставить его пустым (value=""), то в консоли вообще вырисовывается ошибка:

и ссылается она на строку:
</script>

Как решить данную проблему?

Answer 1

[Андрей Ежгуров]

Разумеется, у тебя будет единица. Ты в переменную name записываешь значение поля до того, как оно изменилось. Надо получать значение поля в момент клика по кнопке.

Можно так:

<input type="text" class="form-control" name="name" id="name" value="1" placeholder="Имя">
<button class="btn btn-default" onclick="TFunction(document.getElementById('name').value)">Отправить</button>

Но куда лучше:

<input type="text" class="form-control" name="name" id="name" value="1" placeholder="Имя">
<button class="btn btn-default" onclick="TFun()">Отправить</button>
<script>
  function TFun(){
    alert(document.getElementById('name').value);
  }
</script>

Comments

[Антон]

Про функцию отписал выше в комментарии. Поздно дошло до ума. Но все равно вам больше спасибо за подтверждение догадки и за оперативный точный ответ.

Answer 2

[Александр Аксентьев]

Потому что код выполняется при загрузке страницы, и значение берется начальное. Вы не бновляете переменную name

Comments

[Антон]

То есть мне нужно создать функцию, которая будет вынимать имя? И эту функцию необходимо вызывать нажатием на кнопку? А также в этой функции прописать вызов другой функции?

[Александр Аксентьев]

Антон: ну видимо вроде того) Но проще повесить событие при отправке формы https://gist.github.com/S-anasol/34ba6bf3747b480f124f у формы должно быть name="form_name"

[Антон]

Александр Аксентьев: благодарю)