I'm using the following jQuery to clone a set of input fields (1 Select field, 2 Text fields and 1 Number field)

$("#add_button").click(function(e) {
    e.preventDefault();
    $(".form-row :first").clone().insertAfter(".form-row :last").find("input[type='text']").val("");
});

Is there any way I can extend this so the cloned number fields don't also contain the values.

I've tried

$("#add_button").click(function(e) {
    e.preventDefault();
    $(".form-row :first").clone().insertAfter(".form-row :last").find("input[type='text|number']").val("");
});

Which doesn't work.

I'm using the following jQuery to clone a set of input fields (1 Select field, 2 Text fields and 1 Number field)

$("#add_button").click(function(e) {
    e.preventDefault();
    $(".form-row :first").clone().insertAfter(".form-row :last").find("input[type='text']").val("");
});

Is there any way I can extend this so the cloned number fields don't also contain the values.

I've tried

$("#add_button").click(function(e) {
    e.preventDefault();
    $(".form-row :first").clone().insertAfter(".form-row :last").find("input[type='text|number']").val("");
});

Which doesn't work.

• javascript
• jquery

2 Answers 2

The selector in .find("input[type='text|number']") is incorrect. To select multiple elements, separate the selectors by ma.

.find("input[type='text'], input[type='number']")

See Multiple Selectors

To set empty string as value to all the input elements, use element selector.

.find('input').val('')

You must use a multiple element selector using , to separate each selector; like:

$("#add_button").click(function(e) {
    e.preventDefault();
    $(".form-row :first").clone().insertAfter(".form-row :last").find("input[type='text'], input[type='number']").val("");
});