Question

我需要重置字段onclick of reset按钮

但我无法做到。

这是我的HTML代码

 <table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1" >
<tbody>
    <tr class="form-field1">
        <th valign="top" scope="row">
        <label for="approved_mailCc"><?php _e('OpenLab Cc', 'custom_table_example')?></label>
        </th>
        <td>
             <input id="approved_mailCc" name="approved_mailCc" type="email" value="<?php echo isset($item['approved_mailCc']) ? $item['approved_mailCc'] : ''; ?>"
                size="50" class="code" placeholder="<?php _e('OpenLab Cc', 'custom_table_example')?>"  required /> 
             <input   type="button" value="Reset" id="approved_mailCc" name="openLab"/>
        </td>
    </tr>

jQuery代码

jQuery(document).ready(function($){
    console.log("plugin script loaded2");
    $('#approved_mailCc').click(function(){
        $(this).val('');
});

}）;

1我正在获取控制台日志。

2警报不会进入onclick

3我也使用了重置功能。</ p>

Answer 1

你有两个具有相同ID“approved_mailCc”的输入，你不能拥有多个具有相同ID的项目，它会混淆jQuery。给他们提供如下的唯一ID：

<table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1" >
    <tbody>
        <tr class="form-field1">
             <th valign="top" scope="row">
                 <label for="approved_mailCc"><?php _e('OpenLab Cc', 'custom_table_example')?></label>
             </th>
             <td>
                 <input id="approved_mailCc_email" name="approved_mailCc" type="email" value="<?php echo isset($item['approved_mailCc']) ? $item['approved_mailCc'] : ''; ?>"
                size="50" class="code" placeholder="<?php _e('OpenLab Cc', 'custom_table_example')?>"  required /> 
                 <input   type="button" value="Reset" id="approved_mailCc_button" name="openLab"/>
             </td>
        </tr>

然后使用这个jQuery代码：

jQuery(document).ready(function(){
    console.log("plugin script loaded2");
        jQuery('#approved_mailCc_button').click(function(){
        jQuery('#approved_mailCc_button_email').val('');
});

Answer 2

首先，您不应该需要Javascript来重置表单（但是您需要标记）：

https://jsfiddle.net/9xfonyou/

其次，您的代码双ID存在错误。

此处＆＃34; approved_mailCc＆＃34;既是您的输入文件又是您的按钮。然后，您可以在Javascript中执行此操作以使其正常工作。

HTML：

 <form>

  <table cellspacing="2" cellpadding="5" style="width: 100%;" class="form-table1" id="form-table1">
    <tbody>
      <tr class="form-field1">
        <th valign="top" scope="row">
          <label for="approved_mailCc"></label>
        </th>
        <td>
          <input id="input_field" name="approved_mailCc" type="email" value="" size="50" class="code" placeholder="test" required />
          <input type="reset" id="reset_button" name="openLab" />
        </td>
      </tr>
    </tbody>
  </table>

</form>

JS：

jQuery(document).ready(function($) {

  console.log("plugin script loaded2");
  $('#reset_button').click(function(e) {

      e.preventDefault();

    $('#input_field').val('');

  });

});

https://jsfiddle.net/9xfonyou/1/

无法重置输入字段jquery php wordpress

2 个答案: