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

Meftun Ege Kara · 16 Aralık 2021

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.

roser137 · 17 Aralık 2021

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:

suat_barut · 14 Nisan 2023

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:

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 · 15 Nisan 2023

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.

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.

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

Meftun Ege Kara

Centipat

Dosya Ekleri

roser137

Megapat

Dosya Ekleri

suat_barut

Yoctopat

roser137

Megapat