html biçiminde URL formunu ön doldurun

Question

Başka bir sayfada verilen bir bağlantıyı tıklattığında iletişim formumdaki bir alanı önceden doldurmak için basit bir yol arıyorum.

Bu html benim iletişim formu vardır: Ben "Bazı metin" ile "mesaj" alanını doldurmak istiyor

<form method="post" action="submit.php" > 
    <p>Your name: 
    <br /><input name="name" /></p> 
    <p>Your email: 
    <br /><input name="email" /></p> 
    <p>Your message: 
    <br /><textarea name="message" id="message" rows="10" cols="50"></textarea></p> 
    <p><input type="submit" value="Send" /></p> 
</form> 

www.xyz.com/contact.html?setmessagefield=some_text

Answer 1

JavaScript gibi bir url tıklayan kullanıcılar genellikle yerleşik zaman -in gibi URL parametreleri ayrıştırmak için fonksiyonlar (Bu GET parametreleri genellikle sunucuya veri göndermek için kullanılır beri).
yerine bir karma kullanarak öneririm (bir karma istemci tarafı saf olduğunu):

www.xyz.com/contact.html#name=some_text & E = fazla% 20text

Şimdi

, Alanlarınızda bazı id 's ekleyin:

<p>Your name: 
<br /><input name="name" id="name" /></p> 

<p>Your email: 
<br /><input name="email" id="email" /></p> 

Sonra böyle değerlerini ayarlamak, yüke:

Working example

bu büyük avantajıesnek olmasıdır. Eğer 2 alanların değerlerini ayarlamak istiyorsanız, karma olanlar 2 alanlar id 's tedarik:

www.xyz.com/contact.html#name=some_text & eposta = daha fazla% 20text

4 alanlar? 4 id en:

www.xyz.com/contact.html#name=some_text & eposta = daha fazla% 20text & username = john & yaş sonra = 23

kodunu düzenlemek gerek yok, .

Answer 2

Sen window.location.href ile mevcut URL almak ve daha sonra bir normal ifadede aracılığıyla varsayılan mesaj alabilirsiniz:

var msg = window.location.href.match(/\?setmessagefield=(.*)/); 
document.getElementById("message").value = msg[1]; 

Answer 3

daha modern bir yoldur URL() constructor ve searchParams property kullanmak olacaktır. Tarayıcı motorunun işi yapmasına izin verin!

(new URL(window.location.href)).searchParams.forEach((x, y) => 
    document.getElementById(y).value = x) 

Try it online!