Предварительно заполните поле формы через URL-адрес в html

Я ищу простой способ заполнить поле в моей контактной форме, когда пользователь нажимает ссылку, указанную на другой странице.

Это моя контактная форма в html:

<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>

Я хочу заполнить поле "сообщение" "некоторым текстом", когда пользователь нажимает на URL-адрес, например www.xyz.com/contact.html?setmessagefield=some_text

Ответы

Ответ 1

В JavaScript нет встроенных функций для синтаксического анализа параметров URL-адреса (так как эти параметры GET обычно используются для отправки данных на сервер).
Я бы предложил вместо этого использовать хеш (хеш - чисто клиентская сторона):

www.xyz.com/contact.html#name=some_text&email=more%20text

Теперь добавьте в поля следующие id:

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

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

Затем установите значения, подобные этому, при загрузке:

var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
for(var i = 0; i < hashParams.length; i++){
    var p = hashParams[i].split('=');
    document.getElementById(p[0]).value = decodeURIComponent(p[1]);;
}

Рабочий пример

Большим преимуществом этого является то, что он гибкий. Если вы хотите установить значения 2 полей, вы поставьте эти 2 поля "id в хэш:

www.xyz.com/contact.html#name=some_text&email=more%20text

4 поля? 4 id's:

www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23

Нет необходимости редактировать код.

Ответ 2

Более современный способ - использовать конструктор URL() и свойство searchParams. Пусть движок браузера сделает всю работу!

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

Попробуйте онлайн! или при переполнении стека:

const hash = '?name=some_text&email=more%20text';
const example = "http://example.com/" + hash;

(new URL(example)).searchParams.forEach((x, y) =>
    document.getElementById(y).value = x);

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

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

Ответ 3

Вы можете получить текущий url с помощью window.location.href, а затем получить сообщение по умолчанию через регулярное выражение:

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