Очистить значения по умолчанию с помощью onsubmit

Question

Мне нужно очистить значения по умолчанию из полей ввода с помощью js, но все мои попытки до сих пор не были нацелены и очищены поля. Я надеялся использовать onSubmit, чтобы выполнить функцию для очистки всех значений по умолчанию (если пользователь не изменил их) перед отправкой формы.

<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form'  value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>

Как бы вы этого достигли?

Answer 1

• Считать значения id + всех ваших полей при первой загрузке страницы (например, используя jquery для получения всех тегов "textarea", "input" и "select")
• При отправке сравните содержащиеся в настоящее время значения с тем, что вы сохранили при загрузке страницы
• Заменить те, которые не изменились, пустыми значениями

Если все еще неясно, опишите, где вы застряли, и я опишу более подробно.

Редактировать: Добавление некоторого кода, используя jQuery. Он предназначен только для тега textarea и не реагирует на реальные события, но, надеюсь, он объясняет идею дальше:

// Keep default values here
var defaults = {};

// Run something like this on load
$('textarea').each(function(i, e) {
  defaults[$(e).attr('id')] = $(e).text();
});

// Run something like this before submit
$('textarea').each(function(i, e){
  if (defaults[$(e).attr('id')] === $(e).text())
    $(e).text('');
})

Редактировать: Добавление еще кода для более подробной помощи. Это должен быть несколько законченный код (с оговоркой в ​​отношении качества, поскольку я ни в коем случае не эксперт по jQuery), и он просто должен быть включен на вашу страницу. Больше ничего не нужно делать, кроме присвоения всем вашим входным тегам уникальных идентификаторов и type = "text" (но они должны иметь это в любом случае):

$(document).ready(function(){
  // Default values will live here
  var defaults = {};

  // This reads and stores all text input defaults for later use
  $('input[type=text]').each(function(){
    defaults[$(this).attr('id')] = $(this).text();
  });

  // For each of your submit buttons,
  // add an event handler for the submit event
  // that finds all text inputs and clears the ones not changed
  $('input[type=submit]').each(function(){
    $(this).submit(function(){
      $('input[type=text]').each(function(){
        if (defaults[$(this).attr('id')] === $(this).text())
          $(this).text('');
      });
    });
  });
});

Если это по-прежнему не имеет никакого смысла, вам следует прочитать несколько руководств по jQuery и / или javascript.

Answer 2

Примечание : в настоящее время это поддерживается только в Google Chrome и Safari. Я не ожидаю, что это будет удовлетворительным ответом на вашу проблему, но я думаю, что следует отметить, как эта проблема может быть решена в HTML 5.

---

В HTML 5 введен атрибут placeholder, который не передается, пока его не заменили:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Дальнейшее чтение:

• DiveintoHTML5.ep.io: Живой пример ... И проверка, поддерживается ли тег-заполнитель
• DiveintoHTML5.ep.io: текст местозаполнителя

Answer 3

Вы можете достичь этого, используя это в вашей функции отправки

function clearDefaults()
{
    if(document.getElementById('cs-Price-2').value=="Min. Price")
      {
              document.getElementById('cs-Price-2').value='';
      }

}

Answer 4

1) Вместо проверки изменений на стороне клиента вы можете проверить изменения на стороне клиента.

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

Вы можете сравнить значения и, если они не равны, установить текст пустым.

2) Могу я спросить, какой функциональности вы пытаетесь достичь?