Как модифицировать ссылку тега добавив значение из поля input?

Question

[Егор Михеев]

Здравствуйте, с js практически не знаком, потому и вопрос может показаться простым.

Есть ссылка сгенерированная php:

<a id="news<?php echo$i?>" onclick="getValue" href="/todo.php?news=
<?php echo$i?>" >

Есть поле input:

input id="input_form" class="form-control" name="key" type="text">

Как с помошью js можно модифицировать ссылку после загрузки страницы с видом

<a id="news<?php echo$i?>" onclick="getValue" href="/todo.php?news=<?php echo$i?>&key=formValue" >

Answer 1

[Евгений Петров]

Не буду вдаваться в детали, но для вашего случая делал бы примерно так (без полифиллов для старых IE — 8 и ниже)

HTML

<input type="text" name="key" data-action="key" data-id="23">
<input type="text" name="key" data-action="key" data-id="45">
<a href="/todo.php?news=23" data-link="key" data-id="23">Ссыль #1</a>
<a href="/todo.php?news=23#test" data-link="key" data-id="23">Ссыль #2</a>
<a href="/todo.php?news=45" data-link="key" data-id="45">Ссыль</a>

JS

$(document).on('input', '[data-action="key"]', function () {
	var input = $(this),
		name = input.data('action'),
		value = input.val();

	$('[data-link="key"][data-id="' + input.data('id') + '"]').each(function () {
		var link = $(this),
			urlHash = link.attr('href').split('#'),
			urlSearch = urlHash[0].split('?'),
			href = urlSearch[0],
			params;

		if (urlSearch[1]) {
			params = urlSearch[1].split('&');

			for (var i = params.length, pair; i--;) {
				pair = params[i].split('=');

				if (pair[0] == name) {
					params[i] = name + '=' + value;
					break;
				}
			}

			if (i < 0) {
				params.push(name + '=' + value);
			}
		} else {
			params = [name + '=' + value];
		}

		href += '?' + params.join('&');

		if (urlHash[1]) {
			href += '#' + urlHash[1];
		}

		link.attr({
			href: href
		});
	});
});

Comments

[Егор Михеев]

Все отлично. спасибо.