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

时间:2017-09-08 08:59:55

标签: javascript jquery html reset

我有以下表格:

<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>

我想通过点击&#34;重置为默认设置&#34;将整个表单值重置为默认值。按钮。我在jQuqery中尝试了触发器功能:

$(document).on( 'click', '.anyicon_reset_button', function() {
         $('#anyicon_live_style_form').trigger('reset');
        });

但刷新页面后它无法正常工作,也没有重置拾色器。任何想法有什么其他方法吗?我想获取表单ID,然后处理到重置按钮。

1 个答案:

答案 0 :(得分:1)

您可以使用$('#anyicon_live_style_form').get(0).reset();
检查下面的更新代码段

&#13;
&#13;
$(document).on( 'click', '.anyicon_reset_button', function() {
    $('#anyicon_live_style_form').get(0).reset();
});
&#13;
<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>
&#13;
&#13;
&#13;