SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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):

    Code:
        <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:

    Code:
        <input type="submit" onClick="_gaq.push(['_trackEvent', 'Request Info', 'Enquiry Submit', '{VARIABLE}']);" />
    Any ideas would be much appreciated.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    $('#sector1').change(function(){
      $('#spanID').text($(this).val());
    });
    You can lose the $(function(){...}) if you put the script before the closing </body> tag.

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <input type="submit" onClick="_gaq.push(['_trackEvent', 'Request Info', 'Enquiry Submit', 'S01,S03']);" />
    I hope I've explained this well enough....

    Thanks!

  4. #4
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  5. #5
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have managed to do this. Thanks.

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,266
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Please share with everyone what you found - in the future, it may help someone else who is having the same problem.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <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):

    Code:
    $('#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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •