SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change function doesn't fire a second time on drop down list

    I've created a csv import feature so that users can upload a csv file, choose from a drop down list what content each collumn contains and then it will be sent to the database. I'm using jquery to change the name attribute in each input field. It works great for the first choice but if the user makes a wrong choice or changes their mind it does not change the name attribute a second time. Here is the code:


    Code JavaScript:
    $("select").change(function () {
          var fieldName = $(this).attr('name');
          var optionValue = $(this).val();
          $('input[name=' + fieldName + ']').attr('name', optionValue);
    	})

    Any ideas?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Is the select box changing in any way?

    If it is that it why the event is not working anymore as DOMEventListiners can only target elements that already exist in the DOM, try the below code.

    Code JavaScript:
    $('select').on('change', function() {
        // Code here...
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by chadwick37 View Post
    Any ideas?
    Once you change the name of the input, the name has changed from what it used to be, which is why the function cannot find it in order to change it again.

    A potential solution is to assign a reference to the field to the select element (via the this keyword), and use that instead.
    We can do that by checking if the select already has a reference. If it doesn't (which would be the 1st time) we give it a reference to the field.


    Code javascript:
    $("select").change(function () {
        var fieldName = $(this).attr('name'),
            field = $('input[name=' + fieldName + ']'),
            optionValue = $(this).val();
        this.inputfield = this.inputfield || field;
        this.inputfield.attr('name', optionValue);
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes of course, that makes sense. I changed the name of the input so of course it isn't going to find it the second time. Thank you, I'm going to try your suggestion now.


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
  •