Pre-fill form field via URL in html
A more modern way would be to use the URL()
constructor and the searchParams property. Let the browser engine do the work!
(new URL(window.location.href)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x)
Try it online! or on Stack Overflow:
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>
You can retrieve your current url with window.location.href
and then get the default message via a regular expression :
var msg = window.location.href.match(/\?setmessagefield=(.*)/);
document.getElementById("message").value = msg[1];
Don't bother with JavaScript if you're using PHP.
Just add a little something to the HTML:
<form method="post" action="submit.php" >
<p>Your name:<br />
<input name="name" value="<?php echo htmlspecialchars($_GET['name']) ?>" /></p>
<p>Your email:<br />
<input name="email" value="<?php echo htmlspecialchars($_GET['email']) ?>"/></p>
<p>Your message:<br />
<textarea name="message" id="message" rows="10" cols="50">
<?php echo htmlspecialchars($_GET['message']) ?>
</textarea></p>
<p><input type="submit" value="Send" /></p>
</form>
JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I'd suggest using a hash instead (A hash is purely client-side):
www.xyz.com/contact.html#name=some_text&email=more%20text
Now, add some id
's to your fields:
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>
Then set the values like this, on load:
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]);;
}
Working example
The big advantage of this is that it's flexible. If you want to set the values of 2 fields, you supply those 2 fields' id
's in the hash:
www.xyz.com/contact.html#name=some_text&email=more%20text
4 fields? 4 id's:
www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23
No need to edit the code, then.