复制html表单以打开jquery对话框

我有几个按钮，希望在jquery模式对话框中显示html表单：

<button class="add1">Add1</button>
<button class="add2">Add2</button>


<div id="form1">
<form id='AddForm1' name='' method='post' action='<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>'>
    <label for="Name">Name:&nbsp;</label>
    <input id="Name" name="camera_name" size="24" maxlength="36" value="Enter label for camera" onclick="this.select()" />
    <label for='Quality'>Quality:&nbsp;</label>
    <select id='Quality' name='quality'>
        <option value='HIGH' selected='selected'>High</option>
        <option value='MEDIUM'>Medium</option>
        <option value='LOW'>Low</option>
    </select>
    <label for='Status'>Status:&nbsp;</label>
    <select id='Status' name='status'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='EmailNotice'>Email notice:&nbsp;</label>
    <select id='EmailNotice' name='email_notice'>
        <option value='ENABLED' selected='selected'>On</option>
        <option value='DISABLED'>Off</option>
    </select>
    <label for='Sensitivity'>Sensitivity:&nbsp;</label>
       <select id='Sensitivity' name='sensitivity'>
        <option value='HIGH'>High</option>
        <option value='AVERAGE' selected='selected'>Average</option>
        <option value='LOW'>Low</option>
    </select>
    <input type='hidden' name='type' value='TYPE1' />
    <button type='submit' class='submitme' name='add' value='Add'>Add</button>
    <button type='button' class='cancel_changes' name='cancel_changes' value='Cancel'>Cancel</button>
</form>
</div>

---

最后是我的问题，这打开了具有适当形式的对话框，但我开始在这里复制很多东西。一旦我在提交中得到了验证内容，它就开始疯狂地重复。我的表单需要清理，因为我有同名的ID。我在想，一定有比复制所有东西更好的方法。也许只有一个表单？

当为插件创建选项对象时，还可以将现有对象作为变量传递给插件，而不是在代码中再次复制同一对象

对于表单，您可以创建一个包含所有重复规则的对象，然后使用特定于每个表单的规则扩展该对象

虽然在这种情况下代码没有大的节省，但向元素添加数据属性也有助于减少代码。一般来说，最好不要对相同的样式和元素使用唯一类，例如

add1、add2

vs

add\u btn

。然后，代码中的css选择器更容易在一个选择器中聚合多个元素

使用遍历技术，而不是担心ID，因此过度复杂化或复制代码是非常有帮助的

简单html模块-通用类和数据属性：

  <button class="add1 add_btn" data-form_num="1">Add1</button>

---

您可以根据用户的输入使用CSS/JS隐藏一个表单中的某些元素

var $dialog1 = $('#form1').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}); //init dialog

var $dialog2 = $('#form2').dialog({
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}); //init dialog

//events
$('.add1').click(function(e) {
    $dialog1.dialog('open');
});

$('.add2').click(function(e) {
    $dialog1.dialog('open');
});

$(".cancel_changes").click(function() {
    $dialog1.dialog('close');
    $dialog2.dialog('close');
});

$(".submit_camera").click(function() {
    $("#AddForm1").validate({
    //all validation stuff
});

  <button class="add1 add_btn" data-form_num="1">Add1</button>

/* store dialog options for numerous dialogs*/
var dialogOpts={
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 625
}
/* combine selectors for dialogs - one common class would simplify further*/
$('#form1,#form2 ').dialog(dialogOpts); //init dialog


/* combine selectors by using common class*/
$('.add_btn').click(function(e) {
        /* use attributes to determine which to open */                      
    $('#form'+ $(this).data('form_num') ).dialog('open');
});



$(".cancel_changes").click(function() {
    /* tarverse rather than worry about specific ID's*/                             
    $(this).closest('form').parent().dialog('close');   
});


/*  rules for all forms */
var all_forms_rules={
    'camera_name': 'required',
    'email_notice': 'required'  
}

var form_1_rules={
    'sensitivity': 'required'   
}
/* extend form_1_rules by merging "rules" */
form_1_rules= $.extend({}, form_1_rules,all_forms_rules)

$(".submit_camera").click(function() {
    $("#AddForm1").validate({
            /* pass rules object as variable */             
          rules: form_1_rules

    })
});