SWS14
March 6, 2014, 2:24pm
1
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
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.
SWS14
March 6, 2014, 2:40pm
3
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!
SWS14
March 6, 2014, 2:57pm
4
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/
SWS14
March 6, 2014, 4:13pm
5
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