Как при клике добавить поле?

Question

[EVGenyK_ch]

Допустим есть вызов fancybox по клику ( см. спойлер 1 ) и соответственно, то что вызываем ( см. спойлер 2 ), вопрос таков, как сделать так чтобы по клику добавлялось поле в форму из спойлер 2 форматом input type="hidden" используя jquery

спойлер 1

<a data-fancybox data-src="#modal_pu" href="javascript:;" class="cart-price-btn">Текст ссылки</a>

спойлер 2

<div class="form_head-style" style="display: none;" id="modal_pu">
<form class="mailsend ajax-contact-form" action="путь к обработчику" method="POST">
<input type="text" name="Имя" value="" placeholder="Имя" required type="" required >
<input type="tel" name="Номер" value="" placeholder="Телефон" required>
<input type="email" name="email" value="" placeholder="E-mail">
<input type="submit" name="submit" value="Отправить">
</form>
</div>

Answer 1

[origami1024]

onclick на этой a, добавь событие

$('.mailsend').addEventListener("click", e =>{
  $('.mailsend').append('<input type="text" hidden>')
})

https://jsfiddle.net/Ldy6oe7x/

Comments

[EVGenyK_ch]

Можешь подсказать пожалуйста, что не так ? https://jsfiddle.net/EvgenyKa/24cz9f70/2/

[origami1024]

EVGenyK_ch, вот, поправил
https://jsfiddle.net/rxvt7k3p/

чуть подправил - добавил проверку, существует ли уже один такой инпут, а то при каждом повторном открытии еще один добавляется

[EVGenyK_ch]

origami1024, от души

[EVGenyK_ch]

origami1024, можешь еще подсказать , а как передать текст кнопки в это поле допустим в value, нашел решение, но оно мне кажется достаточно громоздким https://ruseller.com/jquery?id=31

[origami1024]

EVGenyK_ch,
https://jsfiddle.net/qsLz9fpx/

[EVGenyK_ch]

origami1024, извини я не так сформулировал вопрос, нужно передать текстовое содержимое, то что внутри тега <a>сейчас там"текст ссылки"

[origami1024]

легко
https://jsfiddle.net/3gp8vbfa/

[EVGenyK_ch]

origami1024, хех действительно, я вставлял там a.thelink и не выводило, понял ошибку, спасибо за помощь

[EVGenyK_ch]

origami1024, я конечно извиняюсь, по идее это все доп вопросы, по хорошему которые нужно бы создавать, сейчас пытаюсь понять jquery, если не сложно ответь на последний вопрос, а что если несколько ссылок на странице как передать текстовое значение с той на которую кликнул а не со всех

[origami1024]

EVGenyK_ch,

вставлял там a.thelink и не выводило, понял ошибку

можно было почти так, только с запятой
$('a, .theLink').text()

а что если несколько ссылок на странице как передать текстовое значение с той на которую кликнул а не со всех

есть параметр event, который создается при клике, из него берешь event.target - это элемент, на который был клик
https://jsfiddle.net/bLq29nf3/

я конечно извиняюсь, по идее это все доп вопросы, по хорошему которые нужно бы создавать

да все ок

[EVGenyK_ch]

origami1024, окей а как очистить поле, там остается текст, и при клике на другую ссылку не меняется

[origami1024]

вот, лучше элемент этот заранее создать, чтобы не возиться с проверками существует ли он, при повторных открытиях модального окна

https://jsfiddle.net/noua1bq6/

Answer 2

[lukoie]

делайте на кнопку жаваскрипт событие, которое добавляет/удаляет класс hidden.
У инпута изначально класс hidden, у которого в цсс display: none