JQuery входное значение для URL при отправке вопроса

Question

Я надеюсь на небольшую помощь.

Я настроил форму, которая извлекает значение из #keyword и отправляет его как URL.

Страница http: // mysite.com / tags

У меня две проблемы:

1. .toLowerCase не работает
2. URL обновляется, хотя в него добавляется имя ввода ключевого слова (которое является ключевым словом) следующим образом: http: // mysite.com/tags?keyword=MYKEYWORD

Я бы хотел, чтобы io выглядел так: http: // mysite.com/tags/mykeyword

Это код, который у меня есть:

$(document).ready(function() {
     $('#tag-search').click(function() {
          goUrl = http://mysite.com/ + $('#keyword').val().toLowerCase();
          window.location = goUrl;
     });
});

и форма:

<form id="tagForm" class="uniForm">
<fieldset class="inlineLabels">
    <div class="ctrlHolder">
        <label for="keyword">Tag Keyword</label>
        <input id="keyword" name="keyword" value="" size="35" class="textInput required" type="text" />
        <p class="formHint">Add your tag keyword and hit submit</p>
        </div>
    <div class="buttonHolder"><button type="submit" id="tag-search" class="primaryAction">Submit</button></div>
</fieldset>
</form>

Answer 1

Ваша форма в настоящее время выполняет поведение по умолчанию - т.е. получает текущий URL (потому что вы не указали действие или метод) с параметрами строки запроса, извлеченными из значений, введенных в форму.

Чтобы остановить поведение по умолчанию, вам нужно убедиться, что вы return false из своих обработчиков событий:

$(document).ready(function() {
     $('#tag-search').click(function() {
          goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
          window.location = goUrl;
          return false;  // Prevent the default button behaviour
     });
     $('#tagForm').submit( function() {
          return false;  // May be necessary to prevent the default form behaviour
     });
});

Как и другие определили, вам нужно заключить URL базового сайта в кавычки, когда вы присваиваете его goUrl, чтобы убедиться, что он обрабатывается как строка.

Обновление Вероятно, целесообразно переместить логику перенаправления из обработчика click кнопки в обработчик submit формы, как предлагает Стофке:

$(document).ready(function() {
     $('#tagForm').submit( function() {              
          goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
          window.location = goUrl;
          return false;  // Prevent the default form behaviour
     });
});

Имейте в виду, что существуют и другие способы отправки формы, помимо нажатия кнопки «Отправить», например, нажатие клавиши Enter внутри текстового поля - использование вашей реализации, когда пользователь нажимает Enter внутри текстового поля ключевого слова, они все равно окажутся на http: // mysite.com/tags?keyword=MYKEYWORD, а не на http: // mysite.com/tags/mykeyword.

Answer 2

$(document).ready(function() {
     $('#tag-search').click(function() {
          goUrl = 'http://mysite.com/' + $('#keyword').attr('value').toLowerCase();
          window.location = goUrl;
     });
});

Answer 3

Используйте .submit () вместо .click () и return false; , чтобы предотвратить выполнение формой поведения по умолчанию, выполняющего запрос GET , Нет необходимости делать оба.

$(document).ready(function() {
    $('#tagForm').submit(function() {    
        goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
        window.location = goUrl;
        return false;
    });
});

Answer 4

Вы пропускаете кавычки вокруг первой части URL. Попробуйте

$(document).ready(function() {
 $('#tag-search').click(function() {
      goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
      window.location = goUrl;
 });

});

Answer 5

Поместите кавычки вокруг URL следующим образом:

'http://mysite.com/'