CODEWITHSUNDEEP
phpjquerywordpress
R9102
R9102

Reputation: 727

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.

Upvotes: 0

Views: 132

Answers (2)

Camille
Camille

Reputation: 9

First, you are not supposed to need Javascript to reset a form (but you need the tag) :

https://jsfiddle.net/9xfonyou/

Second, there are errors on your code double IDs.

Here "approved_mailCc" is both your input file and your button. Then you can do this in Javascript to make it work.

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/

Upvotes: 1

Fencer04
Fencer04

Reputation: 1123

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('');
});

Upvotes: 1

Related Questions