通过获取表单ID重置表单字段
[英]Reset form fields by getting the form id
问题描述
我有以下表格：
<form action='javascript:void();' class='formwrap' id='anyicon_live_style_form'>
<table border=0 class=''>
<tr class='trspacer'>
<td colspan=5></td>
</tr>
<tr>
<td colspan=5>
<div class='int_label_wrap'>
<div class='setval label'>
<span class='inlabel'>Load Style:</span>
</div>
<div class='setval'>
<select name='anyicon_styles' id='anyicon_styles'>
<option value='0'>Load Style</option>
<option value='1' >Bold</option>
<option value='2' >Flat</option>
</select>
</div>
<span class='description'>Select preset styles. If you want to add new style for future usage, select "Load Style" and give it a name.</span>
</div>
<div class='int_label_wrap'>
<div class='setval label'>
<span class='inlabel'>Style Name:</span>
</div>
<div class=''>
<input type='text' value='' name='anyicon_stylename' id='anyicon_stylename'>
<span class='description'>Give your new style a unique name for future usage. This is required when you save new style.</span>
</div>
</div>
</td>
</tr>
<tr data-multi-dependent-on='' class=' fieldset '>
<td class='rowstart'>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Font:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyfontsize' name='anyicon_anyfontsize' id='anyicon_anyfontsize' value='34' class='anyicon_anyfontsize liveany anyicon_3_field anyicon-spinner intlabel'><span>Size</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anylineheight' name='anyicon_anylineheight' id='anyicon_anylineheight' value='34' class='anyicon_anylineheight liveany anyicon_3_field anyicon-spinner intlabel'><span>Line Height</span></div>
</div>
<div class='clearboth spacer1x'></div>
<div class='setval'><span class='incolor'>Color:</span><input type='text' name='anyicon_anycolor' id='anyicon_anycolor' value='#ffffff' data-oftype='liveany' class='my-color-field anyicon_anycolor liveany anyicon_3_field '></div>
<div class='clearboth spacer1x'></div>
<div class='setval'><span class='incolor'>Background:</span><input type='text' name='anyicon_anybgcolor' id='anyicon_anybgcolor' value='#555555' data-oftype='liveany' class='my-color-field anyicon_anybgcolor liveany anyicon_3_field '></div>
<div class='setval'><span class='inlabel'>Background Opacity:</span><input data-fieldid='anyopacity' type='text' name='anyicon_anyopacity' id='anyicon_anyopacity' value='1' class='anyicon_anyopacity liveany anyicon_3_field anyicon-spinner-opacity '></div>
<div class='clearboth spacer1x'></div>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Margin:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anymargintop' name='anyicon_anymargintop' id='anyicon_anymargintop' value='21' class='anyicon_anymargintop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anymarginright' name='anyicon_anymarginright' id='anyicon_anymarginright' value='21' class='anyicon_anymarginright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anymarginbottom' name='anyicon_anymarginbottom' id='anyicon_anymarginbottom' value='0' class='anyicon_anymarginbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anymarginleft' name='anyicon_anymarginleft' id='anyicon_anymarginleft' value='0' class='anyicon_anymarginleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div>
</div>
<div class='clearboth spacer1x'></div>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Padding:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anypaddingtop' name='anyicon_anypaddingtop' id='anyicon_anypaddingtop' value='21' class='anyicon_anypaddingtop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anypaddingright' name='anyicon_anypaddingright' id='anyicon_anypaddingright' value='21' class='anyicon_anypaddingright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anypaddingbottom' name='anyicon_anypaddingbottom' id='anyicon_anypaddingbottom' value='21' class='anyicon_anypaddingbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anypaddingleft' name='anyicon_anypaddingleft' id='anyicon_anypaddingleft' value='21' class='anyicon_anypaddingleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div>
</div>
<div class='clearboth spacer1x'></div>
<div class='setval'><span class='incolor'>Border Color:</span><input type='text' name='anyicon_anybordercolor' id='anyicon_anybordercolor' value='555555' data-oftype='liveany' class='my-color-field anyicon_anybordercolor liveany anyicon_3_field '></div>
<div class='setval'><span class='inlabel'>Border Radius:</span><input data-fieldid='anyborderradius' type='text' name='anyicon_anyborderradius' id='anyicon_anyborderradius' value='50%' class='anyicon_anyborderradius liveany anyicon_3_field anyicon-spinner '></div>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Border Width:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthtop' name='anyicon_anyborderwidthtop' id='anyicon_anyborderwidthtop' value='1' class='anyicon_anyborderwidthtop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthright' name='anyicon_anyborderwidthright' id='anyicon_anyborderwidthright' value='1' class='anyicon_anyborderwidthright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthbottom' name='anyicon_anyborderwidthbottom' id='anyicon_anyborderwidthbottom' value='1' class='anyicon_anyborderwidthbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthleft' name='anyicon_anyborderwidthleft' id='anyicon_anyborderwidthleft' value='1' class='anyicon_anyborderwidthleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div>
</div>
<div class='clearboth spacer1x'></div>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Shadow:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyhshadow' name='anyicon_anyhshadow' id='anyicon_anyhshadow' value='0' class='anyicon_anyhshadow liveany anyicon_3_field anyicon-spinner intlabel'><span>Horizontal</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyvshadow' name='anyicon_anyvshadow' id='anyicon_anyvshadow' value='0' class='anyicon_anyvshadow liveany anyicon_3_field anyicon-spinner intlabel'><span>Vertical</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyshadowblur' name='anyicon_anyshadowblur' id='anyicon_anyshadowblur' value='0' class='anyicon_anyshadowblur liveany anyicon_3_field anyicon-spinner intlabel'><span>Blur</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyshadowspread' name='anyicon_anyshadowspread' id='anyicon_anyshadowspread' value='0' class='anyicon_anyshadowspread liveany anyicon_3_field anyicon-spinner intlabel'><span>Spread</span></div>
</div>
<div class='setval'><span class='incolor'>Shadow Color:</span><input type='text' name='anyicon_anyshadowcolor' id='anyicon_anyshadowcolor' value='' data-oftype='liveany' class='my-color-field anyicon_anyshadowcolor liveany anyicon_3_field '></div>
<div class='setval'>
<span class='inlabel'>Shadow Position:</span>
<select name='anyicon_anyshadowpos' id='anyicon_anyshadowpos' data-fieldid='anyshadowpos' class='anyicon_anyshadowpos liveany anyicon_3_field '>
<option value='inset'>Inset</option>
<option selected value='outset'>Outset</option>
</select>
</div>
<div class='clearboth spacer1x'></div>
<div class='int_label_wrap'>
<div class='setval label'><span class='inlabel'>Dimension:</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anywidth' name='anyicon_anywidth' id='anyicon_anywidth' value='76' class='anyicon_anywidth liveany anyicon_3_field anyicon-spinner intlabel'><span>Width</span></div>
<div class='setval intlabel'><input type='text' data-fieldid='anyheight' name='anyicon_anyheight' id='anyicon_anyheight' value='76' class='anyicon_anyheight liveany anyicon_3_field anyicon-spinner intlabel'><span>Height</span></div>
</div>
<div class='clearboth spacer1x'></div>
<div class='descinfo ' style='clear:both;padding-left: 0px;'>All numeric values in pixels Eg: 5 will be treated as 5px. You can enter values in %,em too. <strong>Eg: 1em, 5%, 10px, 10</strong></div>
</div>
</td>
</tr>
</table>
<div style='clear:both;width:100%;height:0px;'></div>
<table border=0 class='' style='width:100%'>
<tr class='trspacer'>
<td colspan=5></td>
</tr>
<tr>
<td colspan=2 class='savedatabut1'>
<input type="button" name="anyicon_submitstep3" id="anyicon_submitstep3" value="Save" class="savebut"><input type="button" id="anyicon_submitstepall" class="anyicon_submitstepall" value="Save New" class="savebut savebutall"><input type="button" class="anyicon_reset_button" value="Reset To Default Settings" class="savebut">
<div id='anyicon_save_step3_result' style='display:none;' class='anyicon_savetxt'></div>
<div id='anyicon_save_stepall_result' style='display:none;' class='anyicon_savetxt anyicon_savetxtall'></div>
</td>
</tr>
</table>
</form>
我想通过单击“重置为默认设置”按钮将整个表单值重置为默认值。 我已经在jQuqery中尝试了触发函数：
$(document).on( 'click', '.anyicon_reset_button', function() {
$('#anyicon_live_style_form').trigger('reset');
});
但是刷新页面后它不起作用，并且颜色选择器也没有重置。 有什么想法还有其他方法吗？ 我想获取表单ID，然后处理重置按钮。
1 个解决方案
解决方案1
1 2017-09-08 09:00:48
您可以使用$('#anyicon_live_style_form').get(0).reset();
检查下面的更新的片段
$(document).on( 'click', '.anyicon_reset_button', function() { $('#anyicon_live_style_form').get(0).reset(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action='javascript:void();' class='formwrap' id='anyicon_live_style_form'> <table border=0 class=''> <tr class='trspacer'> <td colspan=5></td> </tr> <tr> <td colspan=5> <div class='int_label_wrap'> <div class='setval label'> <span class='inlabel'>Load Style:</span> </div> <div class='setval'> <select name='anyicon_styles' id='anyicon_styles'> <option value='0'>Load Style</option> <option value='1' >Bold</option> <option value='2' >Flat</option> </select> </div> <span class='description'>Select preset styles. If you want to add new style for future usage, select "Load Style" and give it a name.</span> </div> <div class='int_label_wrap'> <div class='setval label'> <span class='inlabel'>Style Name:</span> </div> <div class=''> <input type='text' value='' name='anyicon_stylename' id='anyicon_stylename'> <span class='description'>Give your new style a unique name for future usage. This is required when you save new style.</span> </div> </div> </td> </tr> <tr data-multi-dependent-on='' class=' fieldset '> <td class='rowstart'> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Font:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyfontsize' name='anyicon_anyfontsize' id='anyicon_anyfontsize' value='34' class='anyicon_anyfontsize liveany anyicon_3_field anyicon-spinner intlabel'><span>Size</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anylineheight' name='anyicon_anylineheight' id='anyicon_anylineheight' value='34' class='anyicon_anylineheight liveany anyicon_3_field anyicon-spinner intlabel'><span>Line Height</span></div> </div> <div class='clearboth spacer1x'></div> <div class='setval'><span class='incolor'>Color:</span><input type='text' name='anyicon_anycolor' id='anyicon_anycolor' value='#ffffff' data-oftype='liveany' class='my-color-field anyicon_anycolor liveany anyicon_3_field '></div> <div class='clearboth spacer1x'></div> <div class='setval'><span class='incolor'>Background:</span><input type='text' name='anyicon_anybgcolor' id='anyicon_anybgcolor' value='#555555' data-oftype='liveany' class='my-color-field anyicon_anybgcolor liveany anyicon_3_field '></div> <div class='setval'><span class='inlabel'>Background Opacity:</span><input data-fieldid='anyopacity' type='text' name='anyicon_anyopacity' id='anyicon_anyopacity' value='1' class='anyicon_anyopacity liveany anyicon_3_field anyicon-spinner-opacity '></div> <div class='clearboth spacer1x'></div> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Margin:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anymargintop' name='anyicon_anymargintop' id='anyicon_anymargintop' value='21' class='anyicon_anymargintop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anymarginright' name='anyicon_anymarginright' id='anyicon_anymarginright' value='21' class='anyicon_anymarginright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anymarginbottom' name='anyicon_anymarginbottom' id='anyicon_anymarginbottom' value='0' class='anyicon_anymarginbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anymarginleft' name='anyicon_anymarginleft' id='anyicon_anymarginleft' value='0' class='anyicon_anymarginleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div> </div> <div class='clearboth spacer1x'></div> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Padding:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anypaddingtop' name='anyicon_anypaddingtop' id='anyicon_anypaddingtop' value='21' class='anyicon_anypaddingtop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anypaddingright' name='anyicon_anypaddingright' id='anyicon_anypaddingright' value='21' class='anyicon_anypaddingright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anypaddingbottom' name='anyicon_anypaddingbottom' id='anyicon_anypaddingbottom' value='21' class='anyicon_anypaddingbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anypaddingleft' name='anyicon_anypaddingleft' id='anyicon_anypaddingleft' value='21' class='anyicon_anypaddingleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div> </div> <div class='clearboth spacer1x'></div> <div class='setval'><span class='incolor'>Border Color:</span><input type='text' name='anyicon_anybordercolor' id='anyicon_anybordercolor' value='555555' data-oftype='liveany' class='my-color-field anyicon_anybordercolor liveany anyicon_3_field '></div> <div class='setval'><span class='inlabel'>Border Radius:</span><input data-fieldid='anyborderradius' type='text' name='anyicon_anyborderradius' id='anyicon_anyborderradius' value='50%' class='anyicon_anyborderradius liveany anyicon_3_field anyicon-spinner '></div> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Border Width:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthtop' name='anyicon_anyborderwidthtop' id='anyicon_anyborderwidthtop' value='1' class='anyicon_anyborderwidthtop liveany anyicon_3_field anyicon-spinner intlabel'><span>Top</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthright' name='anyicon_anyborderwidthright' id='anyicon_anyborderwidthright' value='1' class='anyicon_anyborderwidthright liveany anyicon_3_field anyicon-spinner intlabel'><span>Right</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthbottom' name='anyicon_anyborderwidthbottom' id='anyicon_anyborderwidthbottom' value='1' class='anyicon_anyborderwidthbottom liveany anyicon_3_field anyicon-spinner intlabel'><span>Bottom</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyborderwidthleft' name='anyicon_anyborderwidthleft' id='anyicon_anyborderwidthleft' value='1' class='anyicon_anyborderwidthleft liveany anyicon_3_field anyicon-spinner intlabel'><span>Left</span></div> </div> <div class='clearboth spacer1x'></div> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Shadow:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyhshadow' name='anyicon_anyhshadow' id='anyicon_anyhshadow' value='0' class='anyicon_anyhshadow liveany anyicon_3_field anyicon-spinner intlabel'><span>Horizontal</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyvshadow' name='anyicon_anyvshadow' id='anyicon_anyvshadow' value='0' class='anyicon_anyvshadow liveany anyicon_3_field anyicon-spinner intlabel'><span>Vertical</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyshadowblur' name='anyicon_anyshadowblur' id='anyicon_anyshadowblur' value='0' class='anyicon_anyshadowblur liveany anyicon_3_field anyicon-spinner intlabel'><span>Blur</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyshadowspread' name='anyicon_anyshadowspread' id='anyicon_anyshadowspread' value='0' class='anyicon_anyshadowspread liveany anyicon_3_field anyicon-spinner intlabel'><span>Spread</span></div> </div> <div class='setval'><span class='incolor'>Shadow Color:</span><input type='text' name='anyicon_anyshadowcolor' id='anyicon_anyshadowcolor' value='' data-oftype='liveany' class='my-color-field anyicon_anyshadowcolor liveany anyicon_3_field '></div> <div class='setval'> <span class='inlabel'>Shadow Position:</span> <select name='anyicon_anyshadowpos' id='anyicon_anyshadowpos' data-fieldid='anyshadowpos' class='anyicon_anyshadowpos liveany anyicon_3_field '> <option value='inset'>Inset</option> <option selected value='outset'>Outset</option> </select> </div> <div class='clearboth spacer1x'></div> <div class='int_label_wrap'> <div class='setval label'><span class='inlabel'>Dimension:</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anywidth' name='anyicon_anywidth' id='anyicon_anywidth' value='76' class='anyicon_anywidth liveany anyicon_3_field anyicon-spinner intlabel'><span>Width</span></div> <div class='setval intlabel'><input type='text' data-fieldid='anyheight' name='anyicon_anyheight' id='anyicon_anyheight' value='76' class='anyicon_anyheight liveany anyicon_3_field anyicon-spinner intlabel'><span>Height</span></div> </div> <div class='clearboth spacer1x'></div> <div class='descinfo ' style='clear:both;padding-left: 0px;'>All numeric values in pixels Eg: 5 will be treated as 5px. You can enter values in %,em too. <strong>Eg: 1em, 5%, 10px, 10</strong></div> </div> </td> </tr> </table> <div style='clear:both;width:100%;height:0px;'></div> <table border=0 class='' style='width:100%'> <tr class='trspacer'> <td colspan=5></td> </tr> <tr> <td colspan=2 class='savedatabut1'> <input type="button" name="anyicon_submitstep3" id="anyicon_submitstep3" value="Save" class="savebut"><input type="button" id="anyicon_submitstepall" class="anyicon_submitstepall" value="Save New" class="savebut savebutall"><input type="button" class="anyicon_reset_button" value="Reset To Default Settings" class="savebut"> <div id='anyicon_save_step3_result' style='display:none;' class='anyicon_savetxt'></div> <div id='anyicon_save_stepall_result' style='display:none;' class='anyicon_savetxt anyicon_savetxtall'></div> </td> </tr> </table> </form>
当我们在表单外单击时，表单字段不会变空/重置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.