JQuery how to clear all input: .class text fields on a form. Not working for me

I have a form, the first .class has 5 input: text fields. I want to be able to clear all text fields with the click of a button. I tried this in several ways and it doesn’t work ... this is what I did ... (FYI, I have more classes in the form, so I can not use .reset.

The form...

<table class="orderLine1 formFont" width="900">
 <tr>
    <td width="395">Product Name:<br><input class="ProductName" type="text" size="65"></td>
    <td width="97" class="formFontDisabled">Prod ID:<br><input class="Product_ID ffd" type="text" size="5" disabled></td>
    <td width="78" class="formFontDisabled">UPC:<br><input class="UPC ffd" type="text" size="13" disabled ></td>
    <td width="67" class="formFontDisabled">List Price:<br><input class="ListPrice ffd" type="text" size="7" disabled></td>    
    <td width="67">WholeSale:<br><input class="WholeSalePrice ffd" type="text" size="7" disabled></td>
    <td width="56">Quantity:<br><input class="qty addLine" type="text" size="7"></td>
    <td width="60" class="formFontDisabled">Line Total:<br><input class="subTotal ffd" type="text" size="10" disabled></td>
    <td width="44"><button class="OFDeleteButton">Delete</button><button class="OFClearLine" >OFClearLine</button></td>
  </tr>
</table>

Test Script No. 1

   $(document).ready(function(e) {
    $(function clearFirst() {
         $('.orderLine1').find(':input').each(function() {
             switch(this.type) {
                 case 'text':
                    $(this).val('');
                    break;
                 }
             });
        });

    $('.OFClearLine').click(function(e) {
        clearFirst();
    });
    });

Test Script No. 2

  $(function(){
        $('.OFClearLine').bind('click', function(){
            $('.orderLine1').reset();
        });
    });

Additional info: OFClearLine is the class for the button I want to use, and orderLine1 is the form class.

Thanks in advance!

+5
source share
5 answers
$(function() {
  $('.OFClearLine').click(function() {
    $('.orderLine1 input[type="text"]').val('');
  });
});
+15
source

Something like this should work:

$("input.className:text").val("");

, :

$(".className input[type='text']").val("");

jsFiddle: http://jsfiddle.net/nvUsD/1/

+5

In the following code, all text inputs that are decoders of the table element will be found .orderLine1and do not set their values ​​in any way.

$('.OFClearLine').bind('click', function(){
    $('.orderLine1').find('input[type="text"]').val('');
});
+1
source

Try the following:

$(document).ready(function(e) {
    $('.OFClearLine').click(function(e) {
        $('.orderLine1 input:text').each(function() {
                $(this).val('');
        });
    });
});

You can see it in action on this fiddle, http://jsfiddle.net/nickyt/exWKL

0
source

I'm not sure if it can see your clearFirst function. You can also simply use $ ('. OrderLine1 input') to find all the inputs in the .orderLine1 class.

$(document).ready(function(e) {    
    $('.OFClearLine').click(function(e) {
        clearFirst();
    });
});

function clearFirst() {
    $('.orderLine1 input[type="text"]').each(function() {
         $(this).val('');
    });
}
-2
source

All Articles