cloud sponge call back

Question

I have a widget that imports contacts using cloudsponge. They have it setup so that it imports everything into a text filed. I am wanting everything to be placed into two input fields instead.

They sent me this code and said it could be modified to place the contacts into input fileds, but I can't figure out how to do it.

<!DOCTYPE html>
<html>
<body>
<a class="cs_import">Add from Address Book</a>
<textarea id="contact_list" style="width:450px;height:82px"></textarea>

<script type='text/javascript'>
// these values will hold the owner information
var owner_email, owner_first_name, owner_last_name;
var appendInTextarea = true;  // whether to append to existing contacts in the textarea
var emailSep = ", ";  // email address separator to use in textarea
function populateTextarea(contacts, source, owner) {
  var contact, name, email, entry;
  var emails = [];
  var textarea = document.getElementById('contact_list');

  // preserve the original value in the textarea
  if (appendInTextarea && textarea.value.strip().length > 0) {
    emails = textarea.value.split(emailSep);
  }

  // format each email address properly
  for (var i = 0; i < contacts.length; i++) {
    contact = contacts[i];
    name = contact.fullName();
    email = contact.selectedEmail();
    entry = name + "<" + email +">";
    if (emails.indexOf(entry) < 0) {
      emails.push(entry);
    }
  }
  // dump everything into the textarea
  textarea.value = emails.join(emailSep);

  // capture the owner information
  owner_email = (owner && owner.email && owner.email[0] && owner.email[0].address) || "";
  owner_first_name = (owner && owner.first_name) || "";
  owner_last_name = (owner && owner.last_name) || "";
}

// Replace the domain_key and stylesheet with valid values.
var csPageOptions = {
  domain_key:"YOUR_DOMAIN_KEY", 
  afterSubmitContacts:populateTextarea
};
</script>
<script type="text/javascript" src="https://api.cloudsponge.com/address_books.js"></script>
</body>
</html>**strong text**

score 1 · Answer 1 · answered Jul 28 '14 at 23:25

You might try something like the following which adds a text field for name and email for each contact that gets selected. Note that it adds the fields inside a div, instead of putting a big string inside a textarea.

<!DOCTYPE html>
<html>
<body>
<a class="cs_import">Add from Address Book</a>
<div id="contacts-div"></div>

<script type='text/javascript'>
// these values will hold the owner information
var owner_email, owner_first_name, owner_last_name;

function createInput(parent_id, name, value) {
  var input = document.createElement('input');
  input.type = 'text';
  input.value = value;
  input.name = name;
  document.getElementById(parent_id).appendChild(input);
}

function populateTextarea(contacts, source, owner) {
  var contact, name, email;
  // Create an input for each name and email address
  for (var i = 0; i < contacts.length; i++) {
    contact = contacts[i];
    name = contact.fullName();
    email = contact.selectedEmail();
    createInput('contacts-div', 'name' + i, name);
    createInput('contacts-div', 'email' + i, email);
  }
}

// Replace the domain_key and stylesheet with valid values.
var csPageOptions = {
  domain_key:"YOUR_DOMAIN_KEY", 
  afterSubmitContacts:populateTextarea
};
</script>
<script type="text/javascript" src="//api.cloudsponge.com/address_books.js"></script>
</body>
</html>

Caveat: I work for CloudSponge. :)

cloud sponge call back

1 Answers1