JavaScript кодирует поле, не портя отображение

Question

Я хочу закодировать определенное поле поиска перед отправкой в ​​виде запроса $_GET. Что я делаю, так это применяю функцию encodeURIComponent() к этому полю перед отправкой формы

$('#frmMainSearch').submit(function() {
    var field = $(this).find('#searchinput');
    field.val(encodeURIComponent(field.val()));
});

проблема в том, что как только текст закодирован, поле отображает закодированный текст, что выглядит немного странно. Что я могу сделать, чтобы избежать этого?

Пример: я набираю Hello & Hello. Когда я нажимаю кнопку "Отправить", она превращается в " Hello %26 Hello" перед обновлением страницы. Я хочу избежать этого.

Любое решение?

Спасибо

Answer 1

Мне недавно пришлось решить эту же проблему. Вот как я это сделал:

1. Создайте поле ввода, с которым вы хотите работать, например:

   <input class="really-nice-looking-field" 
          id="search-text-display" 
          placeholder="Search for stuff..." 
          type="text">
   

2. Обратите внимание, что с отображаемым полем name атрибут специально опущен. Это будет держать search-text-display поле из отправленной формы, чтобы у вас не было неиспользуемых параметров.

3. Создайте скрытое поле, которое будет использоваться для отправки, например:

   <input id="search-text" name="search_text" type="hidden">
   

4. Захватите событие отправки из вашей формы, чтобы заполнить скрытое поле перед отправкой формы, например:

   $('#site-search').submit(function() {
       $('#search-text').val(
           encodeURIComponent($('#search-text-display').val())
       );
   });
   

Это оставит поле ввода, отображаемое для ваших пользователей, без изменений, в то время как ваши параметры будут экранированы при необходимости:

    Parameters: {"utf8"=>"✓", "search_text"=>"hello%20%26%20hello"}