Get URL Parameters and Fill them in a Form Field

Developer
Christopher Williams
Size
2,378 Kb
Views
42,504
  1. Get URL Parameters and Fill them in a Form Field Previews
  2. Get URL Parameters and Fill them in a Form Field HTML Codes
  3. Get URL Parameters and Fill them in a Form Field JS Codes

How do I make an get url parameters and fill them in a form field?

A few simple lines of Javascript to get the values of parameters from a URL, and fill them into a form field(?event=Event Name). It also decodes URI's to have clean inputs (i.e. no '%20').. What is a get url parameters and fill them in a form field? How do you make a get url parameters and fill them in a form field? This script and codes were developed by Christopher Williams on 28 November 2022, Monday.

Get URL Parameters and Fill them in a Form Field Previews
IQ Test

Get URL Parameters and Fill them in a Form Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get URL Parameters and Fill them in a Form Field</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'>
</head>
<body> <div class="row">
<p>Sample URL: <br />
<a href="https://codepen.io/itschriswilliams/pen/JWgaRO?event=ACPNY Gala" target="_top">https://codepen.io/itschriswilliams/pen/JWgaRO?event=ACPNY Gala</a> <br />
<a href="https://codepen.io/itschriswilliams/pen/JWgaRO?event=EmblemHealth Annual Sales Meeting" target="_top">https://codepen.io/itschriswilliams/pen/JWgaRO?event=EmblemHealth Annual Sales Meeting</a> </p>
<p>References:<br />
<a href="http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters" target="_top">http://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters</a>
<br />
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI" target="_top">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI</a> <br />
<a href="http://stackoverflow.com/questions/3221094/target-input-by-type-and-name-selector" target="_top">http://stackoverflow.com/questions/3221094/target-input-by-type-and-name-selector</a>
</p>
<br /> <br />
<form id="event"> <fieldset> <label for="eventInputField">"Hidden" Event Field Targeted by ID</label>	<input id="eventInputField" type="text" name="eventInputField" value="" /> <label for="eventInputField2">"Hidden" Event Field Targeted by Name</label>	<input id="eventInputField2" type="text" name="eventInputField2" value="" /> </fieldset>
</form>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get URL Parameters and Fill them in a Form Field - Script Codes JS Codes

$( document ).ready(function() {
// Get the URL & Params, Break them Down
function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; }
// Get just the event param
var eventID_ENC = getUrlVars()["event"];
// Decode the URI to Plaintext Chars
var eventID = decodeURI(eventID_ENC);
// Write it to the Form Field (js only)
document.getElementById('eventInputField').value = eventID;
// Write it to the Form Field (jquery targeted by name)
$("input[type='text'][name=eventInputField2]").val(eventID); }); //END DOCREADY
Get URL Parameters and Fill them in a Form Field - Script Codes
Get URL Parameters and Fill them in a Form Field - Script Codes
Home Page Home
Developer Christopher Williams
Username itschriswilliams
Uploaded November 28, 2022
Rating 3
Size 2,378 Kb
Views 42,504
Do you need developer help for Get URL Parameters and Fill them in a Form Field?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christopher Williams (itschriswilliams) Script Codes
Name
Lightweight Responsive YouTube Embed
Responsive Pricing Chart
Multi-Column Ordered List
Half Height Background Color
Simple Accordion Script using jQuery
CSS Ghost Button
Horizontal menu, full width sub menu
A Pen by Christopher Williams
Fixed Position Elvis
Responsive MegaNav
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!