Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML Same value shown AND saved in form

Jean

Coder
Hi!

Hope you are all great!

I have created form which I fill with UTM parameter like https://domain/form?Name=Jean

This value is visible on website BUT NOT SAVED as hidden field too.

I would like to use AND to save this value.

I try so many things but Name=Jean is not saved as hidden field.

What do I need to change to show AND store this value?

Would be happy if you could assit me!

Thanks


[CODE title="Same value shown AND saved in form"]
<div class="container mt-3">

<h6>Hi, </h6>

<h6><input type="text" name="Name" readonly></h6>

<form action="https://domain.com" method="POST" style="max-width:300px">

<input type="hidden" name="Name" value="">

<div class="mt-3">
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
</div>

<script>
var queryForm = function(settings){
var reset = settings && settings.reset ? settings.reset : false;
var self = window.location.toString();
var querystring = self.split("?");
if (querystring.length > 1) {
var pairs = querystring[1].split("&");
for (i in pairs) {
var keyval = pairs.split("=");
if (reset || sessionStorage.getItem(keyval[0]) === null) {
sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1]));
}
}
}
var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]");
for (var i=0; i<hiddenFields.length; i++) {
var param = sessionStorage.getItem(hiddenFields.name);
if (param) document.getElementsByName(hiddenFields.name)[0].value = param;
}
}
setTimeout(function(){queryForm();}, 100);
</script>
[/CODE]
 
@Jean, you are confusing 'hidden' and 'not shown' A HIDDEN field already contains the data that is sent with the form.
<input type='hidden' name='type' value='votingBallot'>
It requires no input from the client.
A field where the inputted info is hidden from prying eye is coded like this:
<input type="password" id="name" name="name">
Using type="password" hides the input and as you see it doesn't have to be a password.
 
Hi!

I do not understand that your answer has in common with my question

I know that the values would be saved in hidden fields. That`s NOT te problem.

My Question is: How to show the Value NAME from UTM Parameter in URL as Text on Website AND save the SAME VALUE NAME in Hidden field NAME?
 
You can't do this in just HTML, you'll need to use either Javascript or a server-side language like PHP.

If you were using PHP, you could do something like:

PHP:
<input type="hidden" name="Name" value="<?php echo (isset($_GET["Name"]) ? $_GET["Name"] : '') ?>">

That would populate your hidden field with the value of "Name" if one is passed in via the query string.

You would also have to rename your .htm or .html file to .php to make this work and your server would need PHP installed to support this.

Otherwise, if you don't have PHP, you could use another server-side language or use Javascript to parse the query strings in the URL and do the same thing where if "Name" is present you populate the value of the "Name" hidden field.
 
UTM parameters are just short pieces of code that you can add to links — for example, the links you share in your social posts. They include information about the link’s placement and purpose, making it easier to track clicks and traffic from a specific social media post or campaign.

This might sound technical, but UTM parameters are actually very simple and easy to use.

Here’s a UTM example link with parameters in place:

URL with UTM parameters

The UTM parameters are everything that comes after the question mark. Don’t worry, you can make the link easier on the eyes using a URL shortener, as you’ll see in the next section of this post.

UTM parameters work with analytics programs to give you a detailed picture of your social media results.

There are five different UTM parameters. You should use the first three in all UTM tracking links. (They’re required by Google Analytics.)

The last two are optional and are used specifically for tracking paid campaigns.

1. Campaign source

This indicates the social network, search engine, newsletter name, or other specific source driving the traffic.

Examples: facebook, twitter, blog, newsletter, etc.

UTM code: utm_source

Sample code: utm_source=facebook

2. Campaign medium

This tracks the type of channel driving the traffic: organic social, paid social, email, and so on.

Examples: cpc, organic_social

UTM code: utm_medium

Sample code: utm_medium=paid_social
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom