Odak modu

JavaScript

Input içerisinden Değer Almak

Input İçerisinden Değer Almak

Bu yazımızda input içerisinden değer almayı inceleyeceğiz. Öncelikle input oluşturmak ile başlayalım.

Input Oluşturma

Dinamik olarak input oluşturmak için;

var myInput=document.createElement("input");

Input'umuzu oluşturduktan sonra gerekli olan özellik eklemelerini yapıyoruz.

myInput.setAttribute("id", "inputumuz");
myInput.setAttribute("type","text");
myInput.setAttribute("value","Buraya Yazın");

Böylece input ve özellikleri oluşturuldu. Şimdi HTML içine bu input'u yerleştiriyoruz.

1.adım

Body içine bir div oluşturalım. (Daha sonra input'u buraya atayacağız.)

var myDiv = document.createElement("div");

şeklinde yapabiliriz.

2.adım

appendChild fonksiyonu ile input'u bu div'e ekleyelim.

myDiv.appendChild(myInput);

Input Değerini Alma

Artık input'umuz oluştu ve değerini alabiliriz.

var inputDeger = document.getElementById("inputumuz").value;

Değeri alert olarak ekranda göstermek için;

window.alert(inputDeger)  // Değerimiz burada yazacak

Alıştırmalar

  1. Bir input oluşturup yanına ekleyeceğimiz buton ile butona tıkladığımızda değerimiz alt satırda alalım.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="myInput" value="Buraya yazınız."><button onclick="myFunction()">Tıklayınız</button><p id="myP"></p>

</body>
</html>
 function myFunction(){
        var x = document.getElementById("myInput").value;
  document.getElementById("myP").innerHTML = ("Değerimiz:" + " " + x );
      }

Aşağıda codepen ile deneyimleyebilirsiniz.

2.Bir validation form oluşturup e-mail, yaş ve isim bilgilerini standartlara uygun şekilde alalım.

 <!DOCTYPE html>
<html>

<head>
	<script type="text/javascript" src="scripts.js">
	</script>
	<link rel="stylesheet" href="styles.css">
</head>

<body>

	<form action="/learn/action_page.php" onsubmit="return sampleFunction()">
		Name (max 15 characters): <input type="text" id="fname" size="15" name="fname"><br>
 Age (from 1 to 100): <input type="text" id="age" size="3" name="age"><br>
 E-mail: <input type="text" id="email" size="25" name="mail"><br><br><input type="submit" value="Submit"> 
</form>



</body>
</html>
function sampleFunction() {
  var at = document.getElementById("email").value.indexOf("@");
  var age = document.getElementById("age").value;
  var fname = document.getElementById("fname").value;
  submitOK = "true";

  if (fname.length > 10) {
    alert("The name may have no more than 10 characters");
    submitOK = "false";
  }

  if (isNaN(age) || age < 1 || age > 100) {
    alert("The age must be a number between 1 and 100");
    submitOK = "false";
  }

  if (at == -1) {
    alert("Not a valid e-mail!");
    submitOK = "false";
  }

  if (submitOK == "false") {
    return false;
  }
}

2.Alıştırmayı Denemek için Tıklayın


Kaynaklar

left-disk

Yazılım Kariyerinde İlerlemeni Hızlandıracak Programlar

Patika+ programlarımız ile 4-8 aylık yoğun yazılım kamplarına katıl, temel bilgilerden başlayarak kapsamlı bilgiler edin, yazılım kariyerine başla!

right-cube

Test

Yorumlar

Yorum yapabilmek için derse kayıt olmalısın!