Подгрузка html кода формы из отдельного файла только при клике

А почему не хотите добавить форму сразу в скрытом виде, и отображать ее при нажатии на кнопку? Это же проще.

Либо перебирайтесь с голого html на рнр

Либо пилите ajax

Так и происходит, Но при открытии страницы и просмотре исходного кода отображается

<div id="call">

<form method="post" action="" id="formname" name=" formname ">

Тут куча кода

</form>

</div>

мне нужно чтобы этого кода не было, а подгружался он только если посетитель кликнет на кнопку

<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>

А это чревато дырами в безопасности при подгрузке скриптом чего-то. Не факт, что этим обработчиком не воспользуется "доброжелатель" совсем не в тех целях для которых это создавалось

Для меня это пельменный аппарат с точки зрения амебы))

Есть кое-какие знания только в верстке.

А попроще никак?)

Это и есть очень просто.

А так - html - это язык разметки, а не программирования ))

S_A_N_T_A, для подгрузки придется овладеть таинствами javascript:

http://jsfiddle.net/h0d4u7b9/

так что подумайте над тем, чтоб скрытая форма была сразу и показывать скрытое по клику, так можно ограничиться только знаниями верстки (html/css).

Ребят я понял, что мне эти варианты не по зубам и решил пойти немного другим путем. Вместо трех форм, сделаю 1 со всеми полями, а не нужные поля скрою через display: none. То есть там где эти поля не нужны буду скрывать, а где нужны будут показываться.

Но есть одно НО

Кнопка 1:

<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>

Кнопка 2:

<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>

HTML код:

<div id="call">

<form method="post" action="" id="formname" name=" formname ">

Тут куча кода

</form>

</div>

Было бы круто использовать несколько id для div, но я так понимаю, что так нельзя. Как при нажатии кнопки заставить присвоить уникальный класс? Чтобы потом скрыть не нужные поля в разных формах.

Это бы в корне решило вопрос

S_A_N_T_A, так вам не нужен уникальный:

https://jsfiddle.net/4p6wc7m8/

Не совсем оно.

Как полностью спрятать поле "No Secret" в одной форме и показать "No Secret"?

Если формы используют один и тот же <form></form>

А так же используют один и тот же Id.

Кнопка 1:

<a class="call-f" data-toggle="modal" data-target="#call" title="название" data-innerhtml=" название"> название </a>

Кнопка 2:

<a class="call-f" data-toggle="modal" data-target="#call" title="название 2" data-innerhtml=" название 2"> название 2</a>

HTML код:

<div id="call">

<form method="post" action="" id="formname" name=" formname ">

Тут куча кода

</form>

</div>

У кнопок одинаковые ID, а поля в форме они должны одни скрыть, а другие показать.

Вот нарисовал - https://ibb.co/jG2bGV