Как доработать маленький код на JS?

Question

[Platton]

Помогите доработать код. Есть обычная форма и блок ссылок html:

<form method="get">
	<input type="text" name="name">
	<input type="submit" name="search" id="search" value="Поиск"/>
	<input type="hidden" name="current_page" id="current_page" value="{current_page}">
</form>

<span id="pagination">
	<a href="1">1</a>
	<a href="2">2</a>
	<a href="3">3</a>
	<a href="4">4</a>
	<a href="5">5</a>
	<a href="6">6</a>
	<a href="7">7</a>
</span>

Задача такая, мне нужно при на клике на любую из ссылок:
1. при этом присваивалось (записывалось) значение скрытому полю формы value="". Которое б соответствовало числу (номеру урл) ссылки ко которой был клик.
2. далее осуществлялась отправка формы на сервер.

Вот написал такой код на Js:

$q(document).ready(function()
{
	var pagin = document.getElementById('pagination'); // Определяем блок с ссылками
	var elements = pagin.getElementsByTagName('a'); // Получаем массив ссылок
	for(var i = 0, len = elements.length; i < len; i++)
	{
		elements[i].onclick = function() // клик по ссылке
		{
			//..........................//
			$q('#search').trigger("click"); // Отправка формы при клике на любую ссылку
			return false;
		}
	}
});

А дальше не могу понять как делать. Подскажите пожалуйста.

Answer 1

[Денис Инешин]

1. Ссылки не нужны, используйте спаны в пагинации

<form method="get" id="testForm">
  <input type="text" name="name" class="page" />
  <input type="submit" name="search" id="search" value="Поиск"/>
  <input type="hidden" name="current_page" id="current_page" value="{current_page}">
</form>

<span id="pagination">
  <span class="toPage" data-num="1">1</span>
  <span class="toPage" data-num="2">2</span>
  <span class="toPage" data-num="3">3</span>
  <span class="toPage" data-num="4">4</span>
  <span class="toPage" data-num="5">5</span>
  <span class="toPage" data-num="6">6</span>
  <span class="toPage" data-num="7">7</span>
</span>

2. Такой JS:

$(document).on("click", ".toPage", function () {
    var num = $(this).data("num");
    $(".page").prop("value", num);
    $("#testForm").trigger("submit");
});

Comments

[Platton]

А если использовать все таки ссылки, для них можно вешать атрибут data-num? Например 3. Просто хочу использовать ссылки, и если в случаи выключенного JS пагинация будет работать на чистом php

[Денис Инешин]

Platton: ну продублируйте, засуньте в href="test.php?page=1" и т.п. только придется в js добавить preventDefault

[Денис Инешин]

Platton:

$(document).on("click", ".toPage", function (event) {
    event.preventDefault(); // предотвратит переход по ссылкам, при включенном JS
    var num = $(this).data("num");
    $(".page").prop("value", num);
    $("#testForm").trigger("submit");
});

[Platton]

Денис Инешин: Спасибо! Чуть подкорректировал ваш пример, теперь скрипт работает такт как я хотел:

$q(document).ready(function(){
	$q('#pagination').on("click", "a", function(event){
		event.preventDefault();
		var num = $q(this).data("num");
		$q("#current_page").prop("value", num);
		$q('#us_search').trigger("click");
	});
});

[Platton]

Денис Инешин: А еще такой вопрос. Как сделать через JS выделение ссылки на которую был клик? И чтобы это выделение сохранялось после отправки формы.

[Денис Инешин]

Platton: после отправки формы это вы на сервере должны добавить класс active к ссылке.

Answer 2

[Виталий Куликов]

Может как-то так? :)
document.getElementById('current_page').value=elements[i].innerText;

Comments

[Platton]

Это в цикле нужно присваивать?

[Виталий Куликов]

Platton: Создать функцию-обработчик кликов можно и вне цикла

[Platton]

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

[Виталий Куликов]

Platton: видимо обработчик не навесился вот так должно работать
https://jsbin.com/xehoqohobe/edit?html,js,output

Answer 3

[Дмитрий Клусевич]

Вы используете jquery? или нужен vanilla.js

Comments

[Platton]

использую jquery

Answer 4

[Stalker_RED]

А зачем использовать <form method="get">, если точно такие-же запросы формируются ссылками вида
<a href="?page=2&search=Поиск&name=name">2</a>

Answer 5

[AlienLies]

Как вариант

<form method="get" id="myform">
    <input type="text" name="name">
    <input type="submit" name="search" id="search" value="Поиск"/>
    <input type="hidden" name="current_page" id="current_page" value="{current_page}">
</form>

<span id="pagination">
    <a href="javascript:void(0)">1</a>
    <a href="javascript:void(0)">2</a>
    <a href="javascript:void(0)">3</a>
    <a href="javascript:void(0)">4</a>
    <a href="javascript:void(0)">5</a>
    <a href="javascript:void(0)">6</a>
    <a href="javascript:void(0)">7</a>
</span>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pagination a').click(function () {
            $("#current_page").val($(this).html());
            $("#myform").trigger("submit");
        });
    });
</script>