gpt4 book ai didi

javascript - 通过获取表单 ID 重置表单字段

转载 作者:行者123 更新时间:2023-12-03 03:30:47 26 4
gpt4 key购买 nike

我有以下表格:

<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&nbsp;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,然后处理重置按钮。

最佳答案

您可以使用$('#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&nbsp;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>

关于javascript - 通过获取表单 ID 重置表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46112583/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com