Размещение предупреждения по выбору параметров

Question

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

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

Возможно ли это?

$("select").change(function() { 
$('div.box').hide(); 
    $('div.box.'+$(this).val()).show(); 
}); 


<h2>SELECT YOUR TEST!</h2> 

       <select id=a> 
        <option value="chem">Chemical Analysis Testing Request Form</option> 
        <option value="fat">Fatigue Testing Request Form</option> 
        <option value="hard">Hardness Testing Request Form</option> 
        <option value="neutral">Neutral Salt Spray Testing Request Form</option> 
        <option value="stress">Stress Corrosion Testing Request Form</option> 
        <option value="tensile">Tensile Testing Request Form</option> 
       </select>        





       <!-- Test One --> 


       <div class="chem box"> 

       <h2>Chemical Analysis Testing Request Form</h2> 


       <label>Accreditation/Approval required:</label><br> 
       <input type="checkbox" value="ISO17025/UKAS">ISO17025/UKAS<br> 
       <input type="checkbox" value="Nacap">Nacap <br> 
       <input type="checkbox" value="other">Other 
       <br> 
       <br> 
       <br> 
       <label>Material/Allow type:</label> 
       <input type="text"> 
       <br> 
       <br> 
       <br>     
       <label>Can a Drawing be Supplied:</label><br> 


       Yes<input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> 
       No<input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"> 

       <br>  

       <div id="ifYes" style="display:none">    
       Image upload: <input type='file' id='yes' name='yes'><br> 
       </div> 

       <div id="ifNo" style="display:none"> 
       If no can you sepcify form and dimensions:<br> 
       <textarea type='text' id='other3' name='other3'></textarea><br> 






       </div> 

Вот демо: Demo fiddle

Answer 1

Попробуйте это: example и пример с ясной формой here

var isFormChanged = false; 
$("select").change(function() { 
    var type = $(this).val(); 
if(isFormChanged) 
{ 
var sure= confirm ('Your changes will be lost, proceed?'); 
    if(sure) 
    { 
     $('div.box.active').find('input[type=text]').val(''); 
     $('div.box.active').find('input[type=radio],[type=checkbox]').prop('checked',false); 
     showForm(type); 

    }else 
    { 
     return false; 
    } 
} 
    showForm(type); 

}); 

function showForm(type) 
{ 
    $('div.box').removeClass('active').hide(); 

    $('div.box.'+type).show().addClass('active'); 
    isFormChanged = false; 
} 

$('div.box').find('input').on('change',function(){ 
isFormChanged = true; 
}); 

Answer 2

Вы можете использовать окно подтверждения:

if (confirm("Do you want to clear the form")) { 
    // process logic for hiding and showing new forms 
} 

Updated Fiddle

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