Блог

Я надеюсь, что на этот вопрос есть очевидный ответ для всех, кто разбирается в JS и HTML 🙂

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

Вот пример страницы поиска, которая находится за пределами страницы результатов: http://www.thediamondsexperts.com/index.php?route=product/diamondsearch/jewelry

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

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

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

Например, скопируйте текущую функцию, которая принимает поиск, используйте в ней предварительно установленные значения вместо того, чтобы заполнять значения из формы, а затем просто вызывать эту функцию onClick . Имеет ли это смысл?

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

Мы высоко ценим вашу помощь!

Все, что вам нужно, это форма со скрытыми входными данными и кнопка отправки:

 <form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>
  

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

… должен быть простой способ сделать это на стороне сервера

… решение на стороне клиента было бы наилучшим

…скопируйте текущую функцию, которая принимает поиск, используйте в ней предварительно установленные значения вместо заполнения значений из формы, а затем просто вызывайте эту функцию onClick. Имеет ли это смысл?

Не совсем, по крайней мере, для меня. Если вы можете уточнить, я был бы рад помочь больше.

Когда вы говорите «несколько значений формы с одинаковыми идентификаторами», боюсь, вы можете быть сбиты с толку: для ввода формы не требуется «id», я думаю, вы имеете в виду «name», и нет необходимости иметь несколько входных данных с одинаковым именем в форме, если вы не хотите отправить массив значений.

Я не хотел перегибать палку и рассказывать о том, как работает ajax на этом сайте, потому что это совсем другое дело, и все, о чем вы, казалось, беспокоились, это предустановленные кнопки поиска. Надеюсь, это поможет вам разобраться, GL.

РЕДАКТИРОВАТЬ: Мне сложно понять, о чем вы на самом деле спрашиваете, если вы пытаетесь повторить поведение на этом сайте, пожалуйста, сообщите нам, какой язык на стороне сервера доступен для вас, используете ли вы или открыты для использования каких-либо библиотек javascript, и что вы уже пробовали. Полноценное руководство по кормлению с ложечки действительно выходит за рамки, вы получите лучшую и понятную помощь, если поделитесь кодом из ваших текущих попыток.

Если вы хотите передавать значения с одной страницы на другую и обрабатывать это на стороне клиента, используйте «get» для метода отправки формы и используйте удобную функцию «gup()» для получения значений параметров. Вы можете получить больше информации о gup() здесь:

 function gup( name )
{
  name = name.replace(/[[]/,"\[").replace(/[]]/,"\]");
  var regexS = "[\?amp;]" name "=([^amp;#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
  

На вашей начальной странице вы можете либо использовать входные данные с типом =»hidden», либо просто получать значения из видимых входных данных (как на вашей примерной странице). Затем отправьте на страницу результатов. Дана начальная страница с чем-то вроде этого…

 <form method="get" action="results.html">
  <input type="text" name="caratFrom" value="0.7" />
  <input type="submit"/>
</form>
  

… вот пример использования для страницы результатов:

 var caratFrom = gup('caratFrom');
// etc.
  

Затем просто присвоите эти значения любым элементам, которые вы хотите, например, входному:

 <!-- HTML -->
  <input type="text" name="caratFromResult" value="" />

// Javascript
  document.getElementById('caratFromResult').value = caratFrom;