Javascript 在“选择选项”上放置警报

我有一个带有select和许多选项的表单。在选项中，根据您选择的选项，它将显示不同的窗体

我的问题是，如果用户开始填写表单，然后选择另一个表单，我需要在选择另一个选项时添加警报，如果他们说是，则清除他们已开始填写的表单

这可能吗

$("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>

$（“选择”）.change（函数（）{
$（'div.box'）.hide（）；
$（'div.box.'+$（this.val（））.show（）；
});
选择你的测试！
化学分析测试申请表
疲劳测试申请表
硬度测试申请表
中性盐雾测试申请表
应力腐蚀测试申请表
拉伸试验申请表
化学分析测试申请表
需要认证/批准：

ISO17025/UKAS

Nacap

其他






材料/允许类型：






能否提供图纸：

对
不


图像上传：

如果没有，您可以指定形式和尺寸：

---

这是一个演示：

您可以使用确认框：

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

如果您不想使用内置确认，那么您需要设计自己的弹出窗口，或者使用类似于jQuery UI对话框的东西。

尝试以下方法：使用清晰的表单和示例

---

我并不担心可以处理的警报的外观，但是您的示例给出了确认框，即使我第一次选择表单？您可以添加一个变量来跟踪类似的内容。我会更新提琴。警告效果很好，但是如果你回到你填写的表格，信息仍然存在？检查这个提琴。在活动窗体上添加类active，在窗体隐藏之前，它会清除输入类型文本，并重置收音机和复选框。当窗体被隐藏时，类将再次被删除。

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;
});