Jquery copy text from classes in table row with radio checked to input fields.

Question

I'm working on store locator of sorts. It is integrated into an order page. The customer inputs their zip and stores around them are displayed in a table with ten rows. I've already set up radio buttons on the end of each row so that the user can select which location they'd like their product shipped to. Each row has the store name, address, and phone number with each chunk of data broken up by class i.e.: ".street-address, .city, .state". the problem is that there are these sets of classes for each table row. I've been wrestling with jquery code to try and find a way to specify that when a radio on the table row is check I want the text from the .street-address from that row to be put as the value of the input field "street-address" in the order form. Any help would be appreciated. I've been trying somethigng along the lines of:

 $('.fflradio').click (function() {$(this).parents('tr').get(".views-field-title").text($("company-name:input").val());});

I know this isn't right as it's obviously not working but any input would be appreciated! Thanks!

Answer 1

Well not seeing your HTML, I can't say exactly what the selectors would look like, but this might be close (and it's not far off from what you've got):

$('.fflradio').click(function() {
  $('#id-of-the-address-field').val(
    $(this)
      .closest('tr')
      .find('.street-address')
      .text()
  );
});

Now note that you may have issues if there's HTML markup in the company address field. Of course you'd do a similar call if you needed to fill in the company name, phone number, whatever.

Answer 2

You might want to rethink your approach. You're basically screenscraping your own web page to get information that you obviously already have. I would recommend storing the store address data in some type of object that is accessible from your radio button click handler. That way your implementation isn't reliant upon a specific UI layout.

This quick-and-dirty example should get the idea across, although there are probably better ways to do it and I wouldn't use this approach in production:

// In the code that builds a row in the table, store the address data in an object in the radio button's data dictionary (variables should be self-explanatory):
theRadioButton.data('storeAddress', 
  {
    'street': theStreet,
    'city': theCity,
    'state': theState,
    'postalCode': thePostalCode
  });

// In your event handler, refer to the address object:
$('.fflradio').click(function() {
  var address = $(this).data('storeAddress');
  $('#streetAddressFieldID').val(address.street);
  $('#citysFieldID').val(address.city);
  $('#stateFieldID').val(address.state);
  $('#postalCodeFieldID').val(address.postalCode);
});