Помогите, пожалуйста, реализовать задачку.
Есть форма, в которой две радио кнопки, которые должны по выбору генерировать разный html-код. При этом, если пользователь начинает играться с переключением кнопок, должен оставаться только код соответствующего контейнера, а код ненужного - удалятся.
По сути нет разницы: будет решение реализовано на JS
или jQuery
.
Нужен тупо без ошибок рабочий вариант.
function requestNumber(a) {
var customData = a.value;
if (customData == "firstRequest") {
document.getElementById("customerRequest").removeChild('div');
document.createElement('div').addClass('firstRequest').innerHTML =
'
"\n\n" +
"<div id='firstTimeRequest'>\n" +
"<legend>Информация</legend>\n" +
"<div class='form-group'>\n" +
"<label for='' class='col-sm-3 control-label'>Ваш возраст *</label>\n" +
"<div class='col-sm-9'>\n" +
"<input type='text' class='form-control' name='' value=''>\n" +
"<p class='help-block'>Укажите цифрой количество полных лет</p>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n";
} else if (customData == "notFirstRequest") {
document.getElementById("customerRequest").removeChild('div');
document.createElement("div").addClass("notFirstRequest").innerHTML = "\n\n" +
"<div id='notFirstRequest'>\n" +
"<legend>Информация</legend>\n" +
"<div class='form-group'>\n" +
"<label class='col-sm-3 control-label'>Выберите производителя *</label>\n" +
"<div class='col-sm-9'>\n" +
"<select type='text' class='form-control' name='' value=''>\n" +
"<option value='0' disabled selected>Выбрать..</option>\n" +
"<option value='1'>Вариант 1</option>\n" +
"<option value='2'>Вариант 2</option>\n" +
"<option value='3'>Затрудняюсь с ответом</option>\n" +
"</select>\n" +
"<p class='help-block'>Выберите вариант ответа из списка</p>\n" +
"</div>\n" +
"</div>\n" +
"</div>\n";
}
}
<form action="" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Вы обращаетесь *</label>
<div class="col-sm-9">
<div class="radio">
<label><input type="radio" name="requestType" id="requestType1" value="firstRequest" onChange="requestNumber(this)">Обращаюсь первично</label>
</div>
<div class="radio">
<label><input type="radio" name="requestType" id="requestType2" value="notFirstRequest" onChange="requestNumber(this)">Обращаюсь не в первый раз</label>
</div>
</div>
</div>
<div id="customerRequest">
<div class="firstRequest"></div>
<div class="notFirstRequest"></div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button class="btn btn-warning btn-lg" type="submit">Отправить</button>
</div>
</div>
</form>