Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Get Value from textField in TableView

How do I create a event listener to capture the values of each textfield created in the data array?

    data = [];

    data[0] = Ti.UI.createTableViewSection({ headerView:headerView });
    data[1] = addRow('First Name');
    data[2] = addRow('Last Name');
    data[3] = addRow('E-Mail');
    data[4] = addRow('Password');
    data[5] = addRow('Confirm Password');



    tableView = Ti.UI.createTableView({
      data:data,
      style: Titanium.UI.iPhone.TableViewStyle.GROUPED


    });

I am calling this function for each data row to create the label and the textfield

function addRow(labelName)
{
   row = Ti.UI.createTableViewRow({height:50});
   label = Titanium.UI.createLabel({
        font:{fontSize:13,fontFamily:'Helvetica Neue', fontWeight:'bold'},
        color: '#666',
        text: labelName,
        left: 5,
        height:'auto',
        width:'auto',
        textAlign:'left'
    });
    row.add(label);
    tf1 = Titanium.UI.createTextField({
        font:{fontSize:18,fontFamily:'Marker Felt', fontWeight:'bold'},
        color:'#888',
        height:35,
        top:10,
        right:10,
        width:190,
        textAlign: 'right',
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE
    });
    if((labelName == 'First Name') || (labelName == 'Last Name')){
      tf1.autocorrect = false;
    }
    if(labelName == 'Phone'){
        tf1.keyboardType = Titanium.UI.KEYBOARD_NUMBER_PAD;
    }
    if(labelName == 'E-Mail'){
        tf1.keyboardType = Titanium.UI.KEYBOARD_EMAIL;
    }
    row.add(tf1);
    row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
    return row;
}
— asked June 21st 2010 by M B
  • iphone
  • mobile
  • tableview
0 Comments

4 Answers

  • This is probably the incorrect way of doing (Im looking for this answer too) but I had it working by adding the event listener into the addRow function.

    So put it in before return row:

    tf1.addEventListener('blur', function(e){
      var txtf = e.source;
      //do stuff with it such as e.value or txtf.mycustomproperty
    }
    

    Like I said it appears to work, but the scope makes it seem like its the wrong way of doing it. Im not sure either way.

    — answered November 26th 2010 by Jonathon Beschen
    permalink
    0 Comments
  • This is probably the incorrect way of doing (Im looking for this answer too) but I had it working by adding the event listener into the addRow function.

    So put it in before return row:

    tf1.addEventListener('blur', function(e){
      var txtf = e.source;
      //do stuff with it such as e.value or txtf.mycustomproperty
    }
    

    Like I said it appears to work, but the scope makes it seem like its the wrong way of doing it. Im not sure either way.

    — answered November 26th 2010 by Jonathon Beschen
    permalink
    0 Comments
  • I think I found a better solution, though now I cant find the source (it somewhere in the Q&As). It appears the best way is to create a seperate function that takes a textfield as a parameter and then creates an event listener for it.

    So you'll have something like this:

    function addEvent(textfield){
    
        textfield.addEventListener('blur', function(e){
            tf = e.source;
                    //do stuff 
        });
    };
    

    Then in your code when you are filling up your tableView data or when you change it you'll be passing rows around so right after use the same data reference to add the event listener like this:

    //data is an array of rows
    //addRow() returns a new row w/ a textbox as the first child
    data[i] = addRow(name, id);
    addEvent(data[i].children[0]);
    

    or for table modification work:

    //newRow() returns a row w/ a textfield as the first child
    tableView.insertRowBefore(0, newRow(), {animationStyle:Titanium.UI.iPhone.RowAnimationStyle.DOWN});            
    addEvent(tableView.data[0].rows[0].children[0]);
    

    It works but I havent had a chance to test performance or see if its an optimal solution but at least it seems cleaner.

    — answered November 26th 2010 by Jonathon Beschen
    permalink
    0 Comments
  • Hi, is this the best solution so far? Thanks!

    — answered January 10th 2011 by Peter Lum
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.