Question

I am using an input form with multiple input fields.

These input fields can be pre-populated so I want to give the user an easy option of deleting then with a ‘delete’ link or button beside the field which deletes the full contents of that input field.

Pressing the delete button will also give them a text confirmation that it has been deleted.

I have attached a jpeg of what I am trying to do

I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?

My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id’s of course so I did not want to paste everything here just 1 as an exmpale.

<li id="field_15_144" class="gfield">
  <label class="gfield_label" for="input_15_144">List</label>
    <div class="ginput_container">
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
    </div>
  // this would be the link to delete the contents of input field "input_15_144
  <a href="" class="deleteURL">Delete</a>
</li>

Thanks for any help!

Answer 1

HTML

<div class="ginput_container">
    <input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
    <a href="#" id="delete">delete</a>  <br/>      
        <span id="msg" style="color:green;"><span>
</div>

Jquery

$('a#delete').click(function(){
 $('input#input_15_144').val(''); 
 $('span#msg').html('deleted successfully');                            
});​

check the demo

You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.