Как с помощью js поменять значение у инпута?

Semreg · September 28, 2009

Есть страница с 5ю ссылками и инпутом:

<form name="some_form" method="post">
<a href="#" class="poster" value="1">Ссылка 1</a>
<a href="#" class="poster" value="2">Ссылка 2</a>
<a href="#" class="poster" value="3">Ссылка 3</a>
<a href="<? echo $_SERVER['PHP_SELF'] ?>" value="4">Ссылка 4</a>
<a href="<? echo $_SERVER['PHP_SELF'] ?>" value="5">Ссылка 5</a>
<input type="text" value="" id="send_value" />
</form>

Приведите, пожалуйста пример js кода, что бы при нажатии на ссылки изменялось значение value у input-а.

Edited September 28, 2009 by Semreg

vvsh · September 28, 2009

вот

<a href="java script://" onclick="document.getElementById('send_value').value = '1';" class="poster">Ссылка 1</a>

и на будущее, у тега a нет атрибута value...

Edited September 28, 2009 by vvsh

Semreg · September 28, 2009

и на будущее, у тега a нет атрибута value...

Дык в этом и вся петрушка

У меня фактически не 5 ссылок, а 50. И в каждую из них закладывать onclick="document.getElementById('send_value').value = '1';" было бы не разумным. Поэтому функцию изменения инпута мне бы хотелось вынести отдельно. Типа вот так:

<form name="some_form" method="post">
<Input type="text" id="send_value" value="0">
<a class="poster" href="#" value="1"">1</a>
<a class="poster" href="#" value="2"">2</a>
<a class="poster" href="#" value="3"">3</a>
<a class="poster" href="#" value="4"">4</a>
<a class="poster" href="#" value="5"">5</a>
/* ... */
</form>

<script>
function ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР() {
  document.getElementById('send_value').value = ЗНАЧЕНИЕ_ПОЛЯ_ВАЛУЕ_У_КОНКРЕТНОЙ_ССЫЛКИ;
};
</script>

Edited September 28, 2009 by Semreg

L0k! · September 28, 2009

Дык в этом и вся петрушка
У меня фактически не 5 ссылок, а 50. И в каждую из них закладывать onclick="document.getElementById('send_value').value = '1';" было бы не разумным. Поэтому функцию изменения инпута мне бы хотелось вынести отдельно. Типа вот так:

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

В чем проблема написать функцию

function ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(ЗНАЧЕНИЕ) {
  document.getElementById('send_value').value = ЗНАЧЕНИЕ;

и вызывать ее в каждой ссылке

<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(1);">1</a>
<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(2);">2</a>
<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(3);">3</a>
<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(4);">4</a>
<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(5);">5</a>

???

Semreg · September 29, 2009

L0k!, благодарю за совет!

Это действительно то что мне нужно.

Edited September 29, 2009 by Semreg

Octane · September 29, 2009

А еще можно воспользоваться «всплыванием» событий:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form action="">
	<fieldset>
		<div id="links">
			<a href="#" rel="1">Ссылка 1</a> 
			<a href="#" rel="2">Ссылка 2</a> 
			<a href="#" rel="3">Ссылка 3</a> 
			<a href="#" rel="4">Ссылка 4</a> 
			<a href="#" rel="5">Ссылка 5</a> 
			<a href="#" rel="6">Ссылка 6</a> 
		</div>
		<div>
			<input id="send_value" type="text" />
		</div>
	</fieldset>
</form>
<script type="text/javascript">
(function() {
	var send_value = document.getElementById("send_value");
	document.getElementById("links").onclick = function(e) {
		e = e || window.event;
		var target = e.target || e.srcElement;
		if(target.tagName == "A") {
			send_value.value = target.rel;
			return false;
		}
	};
}());
</script>
</body>
</html>

Пользовательские атрибуты в HTML, если не нравится атрибут rel.

Edited September 29, 2009 by Octane

s0rr0w · September 29, 2009

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

Кто сказал?

keltanas · September 29, 2009

L0k! - проблема в том, хочешь ты иметь в своем проекте: "ненавязчивый JS" или "г@внокод"? Я выбираю первое.

HTML на сайте не должен содержать ни JS, ни CSS, ни тем более PHP!!! (если брать сорцы).

А атрибуты типа rel или value у анкора не понравятся разве что валидатору. А с точкизрения DOM тут нет никаких противоречий!

Semreg, юзай жкурку (jquery.com) и не парься. Умные дяди уже все продумали за всех нас.

s0rr0w · September 29, 2009

L0k! - проблема в том, хочешь ты иметь в своем проекте: "ненавязчивый JS" или "г@внокод"? Я выбираю первое.

И никто не задумывался, что "ненавязчивый JS" тоже может быть "г@внокодом"...

HTML на сайте не должен содержать ни JS, ни CSS, ни тем более PHP!!! (если брать сорцы).

Браво! Лучше искать ошибку в 15 файлах, чем в одном. И разбираться еще с 20-ю другими файлами, чтобы понять через пол года, как же, %@#$%#$, это все работает!

Любая идея, доведенная до абсолютного абсурда, не жизнеспособна.

Semreg, юзай жкурку (jquery.com) и не парься. Умные дяди уже все продумали за всех нас.

Да, заточи свой мозг под фреймворк, очень полезное занятие. Мир DOM куда многообразнее, чем его огрызок в виде фреймворка.

Octane · September 30, 2009

А атрибуты типа rel или value у анкора не понравятся разве что валидатору.

У ссылок есть атрибут rel.

Kel-Tanas · September 30, 2009

И никто не задумывался, что "ненавязчивый JS" тоже может быть "г@внокодом"...

Ну это уже, смотря откуда руки растут

Браво! Лучше искать ошибку в 15 файлах, чем в одном. И разбираться еще с 20-ю другими файлами, чтобы понять через пол года, как же, %@#$%#$, это все работает!
Любая идея, доведенная до абсолютного абсурда, не жизнеспособна.

Я лучше буду искать ошибку в 35-и файлах по 1000 строк, состоящих из законченных классов, которые не надо трогать и править, в которых настроена система дебага и исключений и находятся в разных папках по категориям, чем буду ломать голову, где там в моем одном файле из 15000 строк смешанного html, css, javascript, php и sql кода ошибка

Да, заточи свой мозг под фреймворк, очень полезное занятие. Мир DOM куда многообразнее, чем его огрызок в виде фреймворка.

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

К тому же мне никто не мешает работать с JS как на обычном уровне, так и через jQuery. Кстати этот класс официально признан google и micro$oft

У ссылок есть атрибут rel.

Все равно его семантическое значение иное.

Тогда уж tabindex использовать...

http://www.w3.org/TR/html401/struct/links.html#h-12.2

L0k! · September 30, 2009

L0k! - проблема в том, хочешь ты иметь в своем проекте: "ненавязчивый JS" или "г@внокод"? Я выбираю первое.
HTML на сайте не должен содержать ни JS, ни CSS, ни тем более PHP!!! (если брать сорцы).

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

Kel-Tanas · September 30, 2009

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

я про это

<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(1);">1</a>

плохой прием и его лучше не использовать. Он крайне затрудняет чтение программы.

Представьте, как будет выглядеть генерация списка таких ссылок на PHP ?

foreach( $list as $l ) {
	print "<a class=\"poster\" href=\"#\" onclick=\"ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР( {$l['id']} );\">{$l['id']}</a>";
}

а потом поди разбери, что тут хотели написать? Как видно, смешение сразу 3х технологий в 1ой строке !!! Это еще элемент style не использовали

s0rr0w · September 30, 2009

Используйте темплейт системы. Они специально для этого и были придуманы.

Ну это уже, смотря откуда руки растут

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

Я лучше буду искать ошибку в 35-и файлах по 1000 строк, состоящих из законченных классов, которые не надо трогать и править, в которых настроена система дебага и исключений и находятся в разных папках по категориям, чем буду ломать голову, где там в моем одном файле из 15000 строк смешанного html, css, javascript, php и sql кода ошибка

Это вторая крайность. Зачем в них впадать?

Кстати этот класс официально признан google и micro$oft

Это должно меня впечатлить?

L0k! · September 30, 2009

я про это
<a class="poster" href="#" onclick="ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР(1);">1</a>
плохой прием и его лучше не использовать. Он крайне затрудняет чтение программы.
Представьте, как будет выглядеть генерация списка таких ссылок на PHP ?
foreach( $list as $l ) {
	print "<a class=\"poster\" href=\"#\" onclick=\"ФУНКЦИЯ_ДЛЯ_ВСЕГО_КЛАССА_РОСТЕР( {$l['id']} );\">{$l['id']}</a>";
}
а потом поди разбери, что тут хотели написать? Как видно, смешение сразу 3х технологий в 1ой строке !!! Это еще элемент style не использовали

Что-то я не вкуриваю... ты кроме флуда в этой теме ничего не написал вообще.

По поводу смешения 3х технологий - это тут при чем??? где автор писал что ему надо генерировать на пхп код?

если эта конструкция - ужасный говнокод - то напиши не говнокод.

keltanas · September 30, 2009

Что-то я не вкуриваю... ты кроме флуда в этой теме ничего не написал вообще.
По поводу смешения 3х технологий - это тут при чем??? где автор писал что ему надо генерировать на пхп код?
если эта конструкция - ужасный говнокод - то напиши не говнокод.

Ни капли флуда. Только лишь пытаюсь предостеречь бедняг от ошибок молодости.

Вообще я все уже давно изложил здесь http://forum.htmlbook.ru/index.php?showtop...st&p=115786

Sign In

Как с помощью js поменять значение у инпута?

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information