How to Pre-Populate HTML Form Input Fields from Url Parameters

Pre-fill form field via URL in html

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.

How can I pre-populate html form input fields from url parameters?

Use a custom query string Javascript function.

function querySt(ji) {

    hu = window.location.search.substring(1);
    gy = hu.split("&");

    for (i=0;i<gy.length;i++) {
        ft = gy[i].split("=");
        if (ft[0] == ji) {
            return ft[1];
        }
    }
}
var koko = querySt("koko");

Then assign the retrieved value to the input control; something like:

document.getElementById('mytxt').value = koko;

Auto-populate input form field from URL parameters

To auto populate the product ID and the product SKU in your booking form (page), you should try this (without any guaranty as it can be tested for real on your page form):

add_action( 'wp_footer', 'autopopulate_product_id_script' );
function autopopulate_product_id_script() {
    if( isset( $_GET['id'] ) ):
        ?>
        <script type="text/javascript">
        (function($){
            $('input[name="productid"]').val("<?php echo $_GET['id']; ?>");
            $('input[name="productsku"]').val("<?php echo $_GET['sku']; ?>");
        })(jQuery);
        </script>
        <?php
    endif;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

The product id and the product sku need to be passed in url something like: http//www.example.com/booking-page/?id=124&&sku=AH1584

And your <imput> text fields should be something like:

<input type="text" name="productid" val="">
<input type="text" name="productsku" val="">

So for the product sku is something similar, that you will be able to add with ease…

But as javascript is already very active in you "Easy Appointments" booking form, I don't know if this will work.

This answer is related to: Add custom "Booking" button to WooCommerce Product single pages

What work is needed to pre-populate input form values using the URL/query strings?

It's been a while since I've done mvc.

if you want to link with mywebsite.com/page/?FirstName=Jane

Assuming you have control over the page you're linking to, the page that you link to needs to
1. The model needs to have firstName in it

public class SomeModel
{
        [Required]
        [Display(Name = "First name")]
        public string FirstName { get; set; }
}

The controller needs to populate it from that query string
public ActionResult Index(SomeModel model)
{
return View(model);
}
The view needs to use it

@model Site.Models.SomeModel

@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })

Passing a parameter from a URL to pre-populate a form field on next page

There's no value attribute on an a, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a. You can pass the value as a GET parameter on the URL. Change:

<a href="userForm.php" value="Listing A">

to:

<a href="userForm.php?listing=A">

then on userForm.php use:

$_GET['listing']

to read the value.

If the input is suppose to have the value you could do:

<input type="text" class="selectedListing" name="selectListing" placeholder="Selected 
Listing" value="<?php echo (!empty($_GET['listing']) && in_array($_GET['listing'], array('A', 'B', 'C')) ? $_GET['listing'] : ''); ?>">

How to prepopulate form with url variable in class based views?

you can override the def get_initial() on your createview and add the values there so that is prepopulates your forms in the view.

example

def get_initial(self):
    """
    Returns the initial data to use for forms on this view.
    """
    initial = super().get_initial()

    initial['my_form_field1'] = self.request.something

    return initial

Add this to your view and update the fields of your form with the correct value and return the initial afterwards.

to get the value from the url to your get_initial do something like:

example

    """
def __init__(self, **kwargs):
    Constructor. Called in the URLconf; can contain helpful extra
    keyword arguments, and other things.
    """
    # Go through keyword arguments, and either save their values to our
    # instance, or raise an error.
    self.somevalue = kwargs.get('sym')

by overriding the def init() you can have access to the urlconf arguments that are being passed with it. So when you assign the sym to self.somevalue.

The self.somevalue becomes available. You can then call the self.somevalue in the get_initial() function and pass that value to the correct formfield.

How To Create HTML Form That Accepts Field Values As URL Parameters

If url is "http://myserver.com/simpleform.html?test=sampletext", you can do something like this:

<!DOCTYPE html><html>
<body onload="acceptParam()"> <center><textarea id='p' rows="15" name="test" cols="50">
</textarea></center>

<script>function acceptParam() {  var hashParams = window.location.href.substr(1).split('?'); // substr(1) to remove the `#`      hashParams = hashParams[1].split('&');      var p = hashParams[0].split('=');      document.getElementById('p').value = p[1]; }</script>

</body></html>