Эффективный способ написать инструкцию jQuery if для нескольких элементов

Question

У меня есть эта форма, использующая данные по умолчанию, и я должен быть уверен, что они очищены перед отправкой. У меня есть сценарий отбойного молотка, который это сделает, но мне интересно, не захочет ли кто-нибудь из меня помочь мне усовершенствовать его.

Сценарий ниже работает и отлично подходит, если я хочу написать его для каждого ввода в форме (в настоящее время 8 с данными по умолчанию). Я попытался выбрать все входы в форме с несколькими разными подходами, но ничего не работает. Я полагаю, что есть гораздо более разумный способ приблизиться к этому, чем я способен, поэтому я пришел сюда :)

$('#form_input_submit').click(function() { 
    if ($('#specific_input_id').val() == $('#specific_input_id').attr('data-default')) { 
     $('#specific_input_id').val(''); 
    } 
    return true; 
}); 

Answer 1

Это проверит все элементы ввода, которые имеют элемент данных по умолчанию, и очистит эти поля перед отправкой.

$('#tour_submit').click(function() { 
    $('input[data-default]').each(function(index) { 
     if ($(this).val() == $(this).attr('data-default')) { 
     $(this).val(''); 
     } 
    }); 
}); 

Answer 2

Вы можете получить все входы в форме, и перебирать их. Если некоторые из них относятся к радио или выбору, нам нужно немного изменить его.

$('#form_input_submit').click(function() { 
    $(this).closest('form').find('input').each(function() { 
     if(this.value == $(this).attr('data-default')) { 
      this.value = ''; 
     } 
    }); 
}); 

На щелчком кнопки form_input_submit, он получает .closest() предка <form>, и из него будет .find() всех <input> элементов.

Затем он выполняет итерацию по коллекции с использованием .each().

Если $(this).attr('data-default') представляет начальное значение входа, как он пришел с сервера (или каким-либо образом от его исходного состояния), вы могли бы сделать это вместо:

if(this.value == this.defaultValue) { 
     this.value = ''; 
    } 

Answer 3

Попробуйте давая все входные элементы класс, то сделать это

 
$('#form_input_submit').click(function() { 
    $('.inputs').each(function() { 
     if ($(this).val() == $(this).attr('data-default')) { 
      $(this).val(''); 
     } 
    }); 
    return true; 
}); 

Answer 4

Вы можете передать функцию .val(), упрощая код до этого для всех входов:

$('#form_id').submit(function() { 
    $(this).find('[data-default]').val(function(i, v) { 
     return $(this).data('default') == v ? "" : v; 
    }); 
}); 

Кроме того, вместо привязки к событию отправки кнопки click это прослушивает событие submit самого <form>.