HTML üzerinden başka dosyaya form verisi gönderip nasıl JavaScript ile kullanılır?

M

Meftun Ege Kara

Centipat
Katılım
4 Aralık 2020
Mesajlar
36
Daha fazla  
Cinsiyet
Erkek
Merhaba, bir arkadaşın yardımıyla böyle bir şey yaptım fakat çalışmadı yardımcı olabilir misiniz? Amacım sol taraftaki siteden gönderilen mail verisini sağ tarafta ekrana yazdırmak.
 

Dosya Ekleri

  • Ekran görüntüsü 2021-12-16 170202.png
    Ekran görüntüsü 2021-12-16 170202.png
    74,4 KB · Görüntüleme: 136
JavaScript sadece bulunduğu sayfadaki HTML elemanlarına erişebilir. deneme.html'den proje.html'deki Input'lara erişemezsiniz.

Form ile proje.html'den deneme.html'e form kullanarak POST ile veri göndermeye çalışmışsınız ama bu da sunucu tarafında işlem yapmadan çok zor. PHP kullansanız veriye <?php $_POST["email"] ?> diye erişebilirdiniz ama Client taraflı HTML, JavaScript ile POST ile gönderilen veriye erişmek mümkün değil.

Belki cookie kullanarak mümkün olabilir ama bu da çok sıra dışı bir kullanım olur. Post yerine GET ile yollayıp document.location üzerinden de erişmeye çalışılabilir. Şu an ne yapmaya çalışıyorsunuz, öğrenme amaçlı mı deniyorsunuz? Ortada sunucu olmadan bir sayfadan diğerine veri yollamak çok karşılaşılan bir durum değil.
Önceki mesajlarına bakınca ödev için gibi duruyor. İlla sunucu olmadan kullanılacaksa <form> da post yerine get kullarak deneme.html'de document. Search üzerinden erişilebiliyor. Denedim çalıştı:
proje.html

HTML: 
<!DOCTYPE html>

<html lang="tr">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <div id="header">

 <div id="logo">$irket ismi</div>

 </div>

 <div id="bodybg">

 <div id="logintext">Giris yap</div>

 <div id="signuptext">Uye ol</div>

 <div id="line"></div>

 <form method="get" action="deneme.html">

 <input type="text" name="email" required id="mail" placeholder="E-Posta adresr" />

 <input type="password" name="password" required id="password" placeholder="51fre" />

 <input type="submit" id="login" value="Giris yap" />.

 </form>

 </div>

</body>

</html>

deneme.html

HTML: 
<!DOCTYPE html>

<html lang="tr">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <div>email: <span id="email"></span></div>

 <div>password: <span id="password"></span></div>

 <script>

 var formVeriler = {}

 location.search.substr(1).split("&").forEach(function(parametre) {formVeriler[parametre.split("=")[0]] = parametre.split("=")[1]})

 console.log(formVeriler);

 document.getElementById("email").innerText = formVeriler["email"];

 document.getElementById("password").innerText = formVeriler["password"];

 </script>

</body>

</html>

Şu satır hariç anlaşılır diye düşünüyorum:

JavaScript: 
location.search.substr(1).split("&").forEach(function(parametre) {formVeriler[parametre.split("=")[0]] = parametre.split("=")[1]})

Burada şunu yaptık. Normalde gönderilen proje.html'den deneme.html'e GET ile gönderilen veri. deneme.html'e document. Location. Search üzerinden şu şekilde geliyor:

Kod: 
?email=denememail&password=denemesifre

Bunu konsola document. Location. Search diyerek görülebilir. Burada her şey tek bir text şeklinde email şifre her şey tek değişkende gibi düşünülebilir. Bunu parçalayıp formVeriler'e ayrı ayrı alıp kullanılabilir hale getiriyor bu uzun satır.

location.search.substr(1) ile ilk elemanı yani? İni siliyoruz.

.split("&") ile & Den'e göre parçalıyoruz

Elimizde 2 eleman oluyor. Bunlar email=denememail ve password=denemesifre şeklinde.

Bunları da = ile parçalayıp formVeriler'e kendi isimleri ile kaydediyoruz. ForEach her eleman için ='e göre parçalama işlemini yapıyor.

deneme.html'de geliştirici konsolunu açarak şu şekilde incelenebilir:
 

Dosya Ekleri

  • 2021-12-17 16_37_54-Document - Opera.png
    2021-12-17 16_37_54-Document - Opera.png
    22,1 KB · Görüntüleme: 103
Son düzenleme:
hocam merhaba benimde bezer birşeye ihtiyacım var 4 gündür araştırıyorum ,
html form sayfada checkbox tanımlıyorum amacım php kullanmadan chekcbox veri leri ile başkabir sayfa açmak
yani 1 kutu işaretlenmişse (url.1..) ye git 1-2 kutu işaretlenmişse (url.2.. git vs. şeklinde
çıktıya url tanımlamaya çalıştım ama action verisi urlsinde soru ? = & simgeleri olduğu için bir link tanımlayamıyorum.
farklı seçili kutular submit edildiğinde farklı sayfalara yönlendirmek mümkün mü ? teşekkürler.

roser137 dedi:
JavaScript sadece bulunduğu sayfadaki HTML elemanlarına erişebilir. deneme.html'den proje.html'deki Input'lara erişemezsiniz.

Form ile proje.html'den deneme.html'e form kullanarak POST ile veri göndermeye çalışmışsınız ama bu da sunucu tarafında işlem yapmadan çok zor. PHP kullansanız veriye <?php $_POST["email"] ?> diye erişebilirdiniz ama Client taraflı HTML, JavaScript ile POST ile gönderilen veriye erişmek mümkün değil.

Belki cookie kullanarak mümkün olabilir ama bu da çok sıra dışı bir kullanım olur. Post yerine GET ile yollayıp document.location üzerinden de erişmeye çalışılabilir. Şu an ne yapmaya çalışıyorsunuz, öğrenme amaçlı mı deniyorsunuz? Ortada sunucu olmadan bir sayfadan diğerine veri yollamak çok karşılaşılan bir durum değil.
Önceki mesajlarına bakınca ödev için gibi duruyor. İlla sunucu olmadan kullanılacaksa <form> da post yerine get kullarak deneme.html'de document. Search üzerinden erişilebiliyor. Denedim çalıştı:
proje.html

HTML: 
<!DOCTYPE html>

<html lang="tr">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <div id="header">

 <div id="logo">$irket ismi</div>

 </div>

 <div id="bodybg">

 <div id="logintext">Giris yap</div>

 <div id="signuptext">Uye ol</div>

 <div id="line"></div>

 <form method="get" action="deneme.html">

 <input type="text" name="email" required id="mail" placeholder="E-Posta adresr" />

 <input type="password" name="password" required id="password" placeholder="51fre" />

 <input type="submit" id="login" value="Giris yap" />.

 </form>

 </div>

</body>

</html>

deneme.html

HTML: 
<!DOCTYPE html>

<html lang="tr">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <div>email: <span id="email"></span></div>

 <div>password: <span id="password"></span></div>

 <script>

 var formVeriler = {}

 location.search.substr(1).split("&").forEach(function(parametre) {formVeriler[parametre.split("=")[0]] = parametre.split("=")[1]})

 console.log(formVeriler);

 document.getElementById("email").innerText = formVeriler["email"];

 document.getElementById("password").innerText = formVeriler["password"];

 </script>

</body>

</html>

Şu satır hariç anlaşılır diye düşünüyorum:

JavaScript: 
location.search.substr(1).split("&").forEach(function(parametre) {formVeriler[parametre.split("=")[0]] = parametre.split("=")[1]})

Burada şunu yaptık. Normalde gönderilen proje.html'den deneme.html'e GET ile gönderilen veri. deneme.html'e document. Location. Search üzerinden şu şekilde geliyor:

Kod: 
?email=denememail&password=denemesifre

Bunu konsola document. Location. Search diyerek görülebilir. Burada her şey tek bir text şeklinde email şifre her şey tek değişkende gibi düşünülebilir. Bunu parçalayıp formVeriler'e ayrı ayrı alıp kullanılabilir hale getiriyor bu uzun satır.

location.search.substr(1) ile ilk elemanı yani? İni siliyoruz.

.split("&") ile & Den'e göre parçalıyoruz

Elimizde 2 eleman oluyor. Bunlar email=denememail ve password=denemesifre şeklinde.

Bunları da = ile parçalayıp formVeriler'e kendi isimleri ile kaydediyoruz. ForEach her eleman için ='e göre parçalama işlemini yapıyor.

deneme.html'de geliştirici konsolunu açarak şu şekilde incelenebilir:
Genişletmek için tıkla...
hocam merhaba benimde bezer birşeye ihtiyacım var 4 gündür araştırıyorum ,
html form sayfada checkbox tanımlıyorum amacım php kullanmadan chekcbox veri leri ile başkabir sayfa açmak
yani 1 kutu işaretlenmişse (url.1..) ye git 1-2 kutu işaretlenmişse (url.2.. git vs. şeklinde
çıktıya url tanımlamaya çalıştım ama action verisi urlsinde soru ? = & simgeleri olduğu için bir link tanımlayamıyorum.
farklı seçili kutular submit edildiğinde farklı sayfalara yönlendirmek mümkün mü ? teşekkürler.
 
suat_barut dedi:
hocam merhaba benimde bezer birşeye ihtiyacım var 4 gündür araştırıyorum ,
html form sayfada checkbox tanımlıyorum amacım php kullanmadan chekcbox veri leri ile başkabir sayfa açmak
yani 1 kutu işaretlenmişse (url.1..) ye git 1-2 kutu işaretlenmişse (url.2.. git vs. şeklinde
çıktıya url tanımlamaya çalıştım ama action verisi urlsinde soru ? = & simgeleri olduğu için bir link tanımlayamıyorum.
farklı seçili kutular submit edildiğinde farklı sayfalara yönlendirmek mümkün mü ? teşekkürler.
Genişletmek için tıkla...
url'lerdeki özel karakterleri işlemek için encodeURIComponent decodeURIComponent'e bakabilirsiniz.

Şu an tam sorunu anlayamadım örnek kod varsa çalıştırmadığınız atabilirseniz inceleyelim.
 

Benzer konular

M
  • Çözüldü
Çözüldü  HTML ile form verisini ekrana yazdırma
Mesaj
6
Görüntüleme
2B
Meftun Ege Kara
M
Anunswin
  • Soru
HTML form bilgilerini diğer dosyaya aktaramıyorum
Mesaj
2
Görüntüleme
2B
Anunswin
Anunswin
A
HTML Form Kodlama
Mesaj
1
Görüntüleme
1B
Recep Baltaş
Recep Baltaş
Eakgul
HTML İle Farklı Bir Form Oluşturmak
Mesaj
5
Görüntüleme
848
Eakgul
Eakgul
2
Html ile Form Oluşturup Php ile Ekrana Bastırma
Mesaj
3
Görüntüleme
2B
SkyDanC
SkyDanC

Yeni konular

Yeni mesajlar

Geri
Yukarı