Wartość znaczników – val()

Jeżeli chcielibyśmy pobrać, zapisać lub sprawdzić wartość znacznika HTML możemy to zrobić za pomocą metody „val”.

Pobieranie wartości

<!doctype html>
<html>
<head>
	<title>Tytuł strony</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$('button').click(function() {
				alert( $('#IDbutton').val() );
			});
		});
	</script>
</head>
<body>

<button id="IDbutton" class="classButton" name="nameButton" value="valueButton" >Kliknij</button>

</body>
</html>

Zmiana wartości

<!doctype html>
<html>
<head>
	<title>Tytuł strony</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('button').click(function() {
				$('#IDbutton').val("newValueButton");
				alert( $('#IDbutton').val() );
			});
		});
	</script>

</head>
<body>

<button id="IDbutton" class="classButton" name="nameButton" value="valueButton" >Kliknij</button>

</body>
</html>

Sprawdzanie wartości

<!doctype html>
<html>
<head>
	<title>Tytuł strony</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('button').click(function() {

				if ($(this).val()=="valueButton") {
					alert( $(this).val() );
				} else {
					alert("ten przycisk nie ma wartości valueButton");
				}
			});
		});
	</script>
</head>
<body>

<button id="IDbutton" class="classButton" name="nameButton" value="valueButton" >Kliknij</button>

<button id="IDbutton2" class="classButton2" name="nameButton2" value="valueButton2" >Kliknij2</button>

</body>
</html>

Ale co to? Zamiast nazwy znacznika pojawia się słówko „this”. Dzieje się tak ponieważ skrypt przeszukiwał by wszystkie znaczniki button i zawsze warunek byłby spełniony. Słówko „this ” precyzuje że chodzi o dokładnie ten znacznik który został przed chwilą wskazany myszką.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Connect with Facebook

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>