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

Question

[Антон Вебсайтовский]

Всем привет.

Radio кнопки, при выборе одного пункта, я показываю див блок в котором импут поля, как при выборе других пунктов radio кнопок, блок скрывается, все верно, но как чистить импут поля, если их заполнили во вскрытом блоке.

Рабочая схема тут:
https://jsfiddle.net/vlit/ag14ju8s/336/

Answer 1

[Sergio Kuspekov]

<input type="text" name="cartgorod" id="clear_input" placeholder="Владивосток">

сюда добавляем ID, строка 25 HTML в твоей ссылке

//при выборе 22222, показываем блок
$(document).ready(function() {
  $(".sdecb").change(function() {
    if ($('#radio2').prop("checked")) {
    $('#clear_input').val('');  // Добавил эту строку
    $('#cartadres').val('');  // one more
      $('.sdec').show(100);
    } else {
      $('.sdec').hide(100);
    }
  });
});

копируем и вставляем код

Comments

[Sergio Kuspekov]

не идеальное решение, но работает

[Антон Вебсайтовский]

Так тыж сделал, когда я выбираю вариант где id radio2, то идет чистка полей в блоке который показываем.
А если я выберу другие варианты, то данные в полях они останутся, ведь чистка идет когда мы выбираем radio2.

Все верно я понял, ты так сделал?

Значит при выборе любого радио, кроме radio2, у меня будет оставаться данные в полях.

[Sergio Kuspekov]

Антон Вебсайтовский, можно написать отдельную функцию, которая будет затирать инпут после выбора другого, или ставить эту строку в каждый обработчик радио. В вопросе было сказано только про радио2, вот ты и получил радио2)

[Антон Вебсайтовский]

Sergio Kuspekov, это не т3, спрашивал как сделать ))
А спрашивал я, как при выборе radio кнопок, кроме radio2, чистить импут поля.

Answer 2

[betterthanyouthink]

Если я корректно понял ваш вопрос, то просто добавьте $('input[type=text]').val('') внутрь обработчика change(), перед условием (4я строка)

Comments

[Антон Вебсайтовский]

То есть так.

$(document).ready(function() {
  $(".sdecb").change(function() {
  $('input[type=text]').val('');
    if ($('#radio2').prop("checked")) {
      $('.sdec').show(100);
    } else {
      $('.sdec').hide(100);
    }
  });
});

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

[betterthanyouthink]

все верно, вам необходимо сделать это "закрепление". я дал идею)
у вас же это будет происходить внутри формы, выбирайте инпуты в ее контексте, например
$('input[type=text]', $('#delivery-form')).val('')
или $('#delivery-form input[type=text]').val('')
можете обернуть код, который будет содержать инпуты, в отдельный див, задать ему data-attribute, либо ID, и уже его использовать в качестве контекста.
еще можете накинуть одинаковые классы/дата атрибуты на сам input и делать выборку по нему, без контекста, например: $('input[type=text].reset-on-change') или просто $('.reset-on-change').
можете даже к атрибуту name дописывать некий модификатор и выбирать по нему, например:

<input type="text" name="delivery-cartgorod" placeholder="Владивосток">
<input type="text" name="delivery-cartadres" id="cartadres" placeholder="Ивановская 15, к123">

и выбирать вот так $('input[name^=delivery-]')
можете даже вспомогательную функцию написать конкретно для вашей задачи, которая будет выбирать и очищать нужные инпуты.