JMR JMR - 3 months ago 16
PHP Question

Not able to reset the input field jquery php wordpress

I need to reset the field onclick of reset button

But I am not able to do that.

Here is my html code

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

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


});

1 I am getting console log.

2 alert is not going inside onclick

3 i used reset function also.

Answer

You have two inputs with the same ID of "approved_mailCc" you can't have more than one item with the same ID, it will confuse jQuery. Give them unique IDs like below:

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

and then use this jQuery code:

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