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

您可以使用确认框：

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

Updated Fiddle

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

Answer 2

请尝试以下操作：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;
});

在选择的选项上发出警报

2 个答案: