Удалить значения для скрытых DIVs

Question

У меня есть скрытые DIVS, которые отображают элементы формы, зависящие от того, какой щелчок переключателя. Я вижу много способов сделать это, и я реализовал один из них, и он работает. Проблема в том, что кто-то меняет свое мнение и нажимает на одну радиокнопку, а затем на другую. Все, что было заполнено в DIV, связанное с их первой нажатой кнопкой, теперь скрыто, но значение все еще присутствует и отправляется с формой. Мне нужен способ удалить или удалить значения элемента формы, которые они изначально заполняли, если кто-то заканчивает нажатием другой кнопки.

Я попытался добавить эту строку в свой рабочий код, но, похоже, ничего:

$("#dvCanDentalDate, #dvCanDentalDep, #dvDHMO").val('') 

Полный блок сценария. За исключением строки кода выше, которую я добавил в 2-х местах, остальное работает просто отлично.

$('input[name=dental]').click(function() { 
    if (this.id == "dental1") { 
     $("#dvChooseDental").show('slow'); 
     $("#dvDentalWaive, #dvCanDentalDate, #dvCanDentalDep, #dvDHMO").hide('slow'); 
    } else if (this.id == "dental2") { 
     $("#dvDentalWaive").show('slow'); 
     $("#dvChooseDental, #dvCanDentalDate, #dvCanDentalDep, #dvDHMO").hide('slow'); 
     $("#dvCanDentalDate, #dvCanDentalDep, #dvDHMO").val('') 
    } else if (this.id == "dental3") { 
     $("#dvDentalWaive").show('slow'); 
     $("#dvChooseDental, #dvCanDentalDate, #dvCanDentalDep, #dvDHMO").hide('slow'); 
     $("#dvCanDentalDate, #dvCanDentalDep, #dvDHMO").val('') 
    } else if (this.id == "dental4") { 
     $("#dvCanDentalDate, #dvDentalWaive").show('slow'); 
     $("#dvChooseDental, #dvCanDentalDep, #dvDHMO").hide('slow'); 
    } else if (this.id == "dental5") { 
     $("#dvCanDentalDate, #dvCanDentalDep, #dvDentalWaive").show('slow'); 
     $("#dvChooseDental, #dvDHMO").hide('slow');  
    } else { 
     $("#dvChooseDental, #dvCanDentalDate, #dvCanDentalDep, #dvDentalWaive, #dvDHMO").hide('slow'); 
    } 
}) 

Answer 1

Использование .html('') опустошить DIVS

$("#dvCanDentalDate, #dvCanDentalDep, #dvDHMO").html('')

или

$("#dvCanDentalDate, #dvCanDentalDep, #dvDHMO").empty()

Answer 2

Другой вариант, кроме тонкого раствора из @Krishna, было бы отключить элементы; отключенные элементы формы не отправляются с формой. Так, что-то вроде:

$("#dvChooseDental").show('slow').find(':input').prop('disabled', false); 
$("#dvDentalWaive, #dvCanDentalDate, #dvCanDentalDep, #dvDHMO").hide('slow').find(':input').prop('disabled', true); 

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