How to append without a function

very new to javascript so try and forgive my ignorance. I am trying to retrieve the get variable (which is working fine) but i don’t know how to put that into my existing code as it want to add it to each of my select options.

I could just add it in for each like…

<option value="<script>document.write(getQueryVariable("source"));</script>variable1">variable 1</option>

and do that for each but i have a feeling there is a better way of doing. The variable ‘source’ is the same for all. I’m hoping i don’t need to add in loads of functions or anything as i am trying to keep it simple as possible.

any pointers would be appreciated thanks

What you’re asking for here might be one of several different things. So, I propose that we try and figure out what you are wanting to achieve first, before nailing it down in code.

Say for example someone visits the page with:

Are you wanting the option to then be this?

<option value="someValuevariable1">variable 1</option>

That’s the trouble. Trying to understand what he’s wanting is the first difficulty, before coming up with some kind of solution.

For example, you’ll find getQueryVariable covered over at

@Paul_Wilkins - Feedback taken Sir. Will surely follow your suggestion in future. Thanks for your valuable advise.

As soon as i read your comment, realised that my reply is more based on assumption rather on actual problem.

Are you still wanting some advise on appending without a function?

sorry chaps was trying to keep it simple but obv haven’t explained quite enough :smile:

I have a working function that will return the Get variable so not a problem there. I need to now use the get variable and add it to the options as the example in @Paul_Wilkins put above. For each of the options the someValue would remain the same and just be tacked on to the option value that is already specified, rather than replace it.

what i am doing is i have a membership offer with a free tshirt. So user clicks on the offer to go to the tshirt size form. But i need to know where they came from so i can tell if the offer is working better on page A or page B. So the GET variable will be my id for tracking. I can’t use php to amend anything as the form is within my cms so i figured i could pick it up with javascript (which is working - i just now need to use the get variable).

I now need to pass this to the external site we use for sign ups but they only have 1 Get variable i can use which will show up in our report. So i have to send all the info i need in 1 variable. i.e. Tshirt size AND where they clicked on the advert. so the url to the final external site would be ?ref=ad1-XL so in our report i can see the sign up was from advert 1 and they want an XL tshirt.

Obviously i’d love to be able to just send separate variables and avoid this but i am limited by the 3rd party site handling our memberships

was hoping it’s a few simple lines of js i can add into my page body.

does that make any sense.

Yes it does make sense.

Normally instead of screwing around with the values, a hidden form field is used to contain the information.

For example:

<input type="hidden" name="ref" value="ad1-XL">

That’s the normal way that information is passed on in forms. What do you think?

Oh, but is this where you are hampered by the 3rd party site?

i would do it that way but i need the <select> to also be the ‘ref’ variable as i can only send the one GET variable onwards containing the two pieces of information, which is why i need to combine them into the 1 select list. annoying i know but my hands are tied by the 3rd party website.

Okay, so it seems that the most appropriate solution here is to update the option value on the select, when the form is submitted.

document.querySelector('#orderForm').onsubmit = function () {
    var form = this;
    form.elements.someSelectField.value += '|' + getQueryVariable("ref");

That will result in the ‘variable1’ being updated when the form is submitted to be ‘variable1|ad1-XL’ - it’s helpful to have some kind of delimeter such as the pipe symbol, so that on the other end you can easily and automatically split things apart.

If you want the information at the start of the variable, so that it is instead ‘ad1-XL|variable1’, that will be slightly more complex code:

document.querySelector('#orderForm').onsubmit = function () {
    var form = this,
        selectValue = form.elements.someSelectField.value;
    form.elements.someSelectField.value = getQueryVariable("ref") + '|' + selectValue;

ah ok that makes sense rather than adding it into the select options to begin with just adding it on to the variable as the form submits. Doesn’t really matter the order as long as i can pick it out.

will give that a go and see how i get on. Thank you for putting that together.

so i’ve given it a try and no luck so put it on codepen to have a play i tried swapping out the GET function and just adding the word ‘test’ on the end for testing but still no luck. The form submit page is one i’ve just put on my server to output $_GET[‘ref’] if it exists so i could see what it was sending.

any ideas what i’m not doing right? i figured i had to change the ‘someSelectField’ to the id of my select?

If you have time to look that would be most appreciated.

Okay, first up we’ll use a web browsers development tools to find out what codepen is submitting for the form.
The network panel shows

Interesting, and if the select name is changed it works, or if the scripting code is removed it works. It seems that we’ve learned that while you can read the select value - you can’t change it and have it submitted.

So instead, we’ll do things the old fashioned way by using the selectedIndex to update the value.

document.querySelector('#orderForm').onsubmit = function () {
    var form = this,
        ref = form.elements.ref;
    ref.options[ref.selectedIndex].value += '|' + 'test';

Result from get.php: medium|test

That will work for you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.