<div class="jumbotron">
  <div class="container">
    <h1 class="display-3">Prefill Form Variables</h1>

    <button type="button" class="btn btn-primary">Click this button to go to a prefilled donation form</button>
    
    <div style="margin-top:20px">
      <form name="prefillForm">
        <table class="table table-condensed table-striped"></table>
      </form>
    </div>

  </div>
</div>

input {
  width: 80%;
  border: thin solid #ccc;
  padding: 3px;
  background-color: transparent;
}

// this javsacript isn't necessary, but it provides
// a conveinient way to document the options as well as test scenarios
//
// comment out or change certain options to see how the functionality changes
var form_url = 'https://pages.donately.com/demo/form/frm_b8e78d07026c'

// these will prefill your donation form
var form_prefills = {
  'donately-email':              'daffy.duck@disney.com', 
  'donately-first-name':         'Daffy',
  'donately-last-name':          'Duck',
  'donately-street-address':     '123 Main St.',
  'donately-street-address-2':   'Suite 210',
  'donately-city':               'Boise',
  'donately-state':              'ID',
  'donately-zip-code':           '65432',
  'donately-country':            'US',
  'donately-phone-number':       '555-555-5555',
  'donately-comment':            'Quack Quack',
  'donately-anonymous':          'true',
  'donately-onbehalf':           'Minnie Mouse'
}

$('table').append('<tr><td>form_url</td><td>' + form_url + '</td></tr>')
$('table').append('<tr><th colspan=2><h3>Prefilled Variables</h3></th></tr>')
Object.keys(form_prefills).forEach(function (key) { 
  $('table').append('<tr><td>' + key + '</td><td><input id="' + key + '" value="' + form_prefills[key] + '"></td></tr>')
})

$('.btn-primary').click(function() {
  
  form_url += '?';
  $("form[name='prefillForm']").each(function() {
     $(this).find(":input").each(function() {
        form_url += $(this).attr("id") + '=' + $(this).val() + '&';
     });
  });
  window.open(form_url)
})