Dec 31, 2020
White Arrow icon
Back to all Elements

Pass Parameters

Pass input fields parameters and add them to the destination URL.

2 JavaScripts to pass parameters in the URL.

First script, takes the inputs in a form, and on form submit, adds them to the destination URL.

document.getElementById("send-form").addEventListener("submit", function(e){
    e.preventDefault();


    var fnameValue = document.getElementById("fname").value;
    var lnameValue = document.getElementById("lname").value;
    var emailValue = document.getElementById("email").value;
    var compValue = document.getElementById("company").value;

    window.location = window.location + "catch" + "?fname=" + fnameValue + "&lname=" + lnameValue + "&email="+ emailValue + "&comp=" + compValue;

});

Copy

The 2nd part catches the parameters from the URL and populate the form fields:

var url_string = window.location.href;
var url = new URL(url_string);

var fname = url.searchParams.get("fname");
var lname = url.searchParams.get("lname");
var email = url.searchParams.get("email");
var comp = url.searchParams.get("comp");

document.getElementById('fname').value = fname;
document.getElementById('lname').value = lname;
document.getElementById('email').value = email;
document.getElementById('company').value = comp;

Copy

Preview:

browser mockup
Share:
Heart icon

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
Blue arrow iconWhite Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
Blue arrow iconWhite Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
Blue arrow iconWhite Arrow icon