Help with updating (and using) a variable based on dropdown selection

Hi,

So I have the following code (simplified for the sake of posting here):

    <script>
        $(function() {
            $('#sector1').change(function() {
                var x = $(this).val();
                $('#spanID').text("" + (x));
            });
        });
    </script>
    <form action="" method="post">
    <select multiple="" id="sector1">
    <option value="S01">S01</option>
    <option value="S02">S02</option>
    <option value="S03">S03</option>
    <option value="S04">S04</option>
    </select>
    </form>
    <span id="spanID">x</span>

This works perfectly. The content within the span updates on the fly with the values of the multiselect.

What I need to do however is update a variable within an onclick:

    <input type="submit" onClick="_gaq.push(['_trackEvent', 'Request Info', 'Enquiry Submit', '{VARIABLE}']);" />

Any ideas would be much appreciated.

Hi,

Welcome to the forums :slight_smile:

Where are you getting {VARIABLE} from?
Will it always be the same or will it change depending on what is selected in the form?

Also, you can shorten the JS to:

$('#sector1').change(function(){
  $('#spanID').text($(this).val());
});

You can lose the $(function(){…}) if you put the script before the closing </body> tag.

Hi,

Many thanks for the quick response.

Where are you getting {VARIABLE} from?

The actually {VARIABLE} is something I’ve simply added to show where the content needs to go.

Will it always be the same or will it change depending on what is selected in the form?

I need the values of the multiselect to be entered where {VARIABLE} currently is.

So exactly how the <span id=“spanID”>x</span> currently works, but instead go in between the speech marks of ‘{VARIABLE}’.

So it would look something like:

<input type="submit" onClick="_gaq.push(['_trackEvent', 'Request Info', 'Enquiry Submit', 'S01,S03']);" />

I hope I’ve explained this well enough…

Thanks!

Sorry, I should point out that I’m unfortunately having to use a fairly out of date jquery (1.6).
This is due to the a lot of functionality elsewhere being reliant on it. Unfortunately it’s out of my hands to upgrade it.

Anyway. You can see my (not very nice) code here if it helps: http://jsfiddle.net/NWLS8/

I have managed to do this. Thanks.

Please share with everyone what you found - in the future, it may help someone else who is having the same problem.

There are a couple of things you should do to tighten up the code:

Move the submit button inside the form tag and give the form an id.
At the same time, lose the inline event handler:

<form action="" method="post" id="myForm">
    <select multiple="" id="sector1">
        <option value="S01">S01</option>
        <option value="S02">S02</option>
        <option value="S03">S03</option>
        <option value="S04">S04</option>
    </select>
    <span id="spanID">x</span>
    <input type="submit" />
</form>

Then, in your JavaScript (remembering to put it after your HTML):

$('#sector1').change(function() {
  $('#spanID').text($(this).val());
});

$("#myForm").submit(function(e){
    e.preventDefault();
    var opts= $('#sector1').val();
    _gaq.push(['_trackEvent', 'Request Info', 'Enquiry Submit', opts);
});

You might want to check if opts actually contains anything before calling _gaq.push