$( document ).ready( function() {
  $('.sortable').sortable({
    stop: function() {
      reNumber();
    },
  });

  $('#add-new').click(function() {
    const newField = $('.row.padded-field').last().clone(true);
    appendField(newField, setDefaultValues);
  });

  $('.remove').click(function() {
    const fields = $('.row.padded-field');
    const parentField = $(this).parents('.row.padded-field');
    if (fields.length > 1) {
      parentField.remove();
    } else { // If they want to remove the last field, just empty it instead.
      setDefaultValues(parentField);
    }
    reNumber();
  });

  $('.data-type select').change(function() {
    const placeholder = $(this).parents('.padded-field').find('.placeholder');
    const options = $(this).parents('.padded-field').find('.options');
    const value = this.value;
    if (takesPlaceholder(value) == true) {
      if (placeholder.children().length == 0) {
        $('<input type="text" value="">').appendTo(placeholder);
      }
    } else {
      placeholder.children().remove();
    }
    if (value == 'options') {
      const optionsField = $('<textarea class="form-control" rows="4">');
      optionsField.appendTo(options);
    } else {
      options.children().remove();
    }
  });

  // haha formform
  /*
  $('form#form').on('ajax:before', function(event, xhr, settings) {
    return false;
  });

  $('form#form').submit(function(e) {
    e.preventDefault;
    const fields = $('.padded-field');
    const formData = {
      name: $('[name="form_draft[name]"]').val(),
      email: $('[name="form_draft[email]"]').val(),
      reply_to: $('[name="form_draft[reply_to]"]').val(),
      fields: extractFieldData(fields),
    };
    const data = {form_draft: formData};
    const ID = $('form').data('id');
    let URL = '/form_drafts/';
    let method = 'POST'; // create
    if (ID != undefined) {
      URL = '/form_drafts/' + ID;
      method = 'PUT'; // update
    }
    $.ajax({
      url: URL,
      method: method,
      data: data,
    }).done(function() {
      document.location.href = '/form_drafts/' + ID;
    });
  });
}); // END of document.ready

function takesPlaceholder(value) {
  return ['date', 'date/time', 'long-text', 'text', 'time'].includes(value);
}

function extractFieldData(fields) {
  const allFieldData = {};
  $('.padded-field').each( function(index) {
    const fieldData = {};
    fieldData['number'] = index + 1;
    fieldData['prompt'] = $(this).find('textarea').val();
    fieldData['placeholder'] = $(this).find('.placeholder').val();
    fieldData['required'] = $(this).find('.required :checkbox').prop('checked');
    fieldData['data_type'] = $(this).find('.data-type select').val();
    allFieldData[index] = fieldData;
    // TODO: $(this).find('.options')
  });
  return allFieldData;
}
function newNumber() {
  return $('.grabbable-number').length + 1;
}
function reNumber() {
  $('.grabbable-number').each(function(index) {
    $(this).text(index + 1);
  });
}
function setDefaultValues(field) {
  field.find('textarea').val('');
  field.find('.grabbable-number').text(newNumber());
  field.find('select').val('');
  field.find('input').val('');
}
function appendField(field, callback) {
  callback(field);
  field.appendTo('.container.sortable');
}

// $('.options').children('textarea').val() is how you grab options

@@ -1254,1553 +1254,148 @@
 %7D);%0A
-%0A  // haha formform%0A  /*%0A  $('form#form').on('ajax:before', function(event, xhr, settings) %7B%0A    return false;%0A  %7D);%0A%0A  $('form#form').submit(function(e) %7B%0A    e.preventDefault;%0A    const fields = $('.padded-field');%0A    const formData = %7B%0A      name: $('%5Bname=%22form_draft%5Bname%5D%22%5D').val(),%0A      email: $('%5Bname=%22form_draft%5Bemail%5D%22%5D').val(),%0A      reply_to: $('%5Bname=%22form_draft%5Breply_to%5D%22%5D').val(),%0A      fields: extractFieldData(fields),%0A    %7D;%0A    const data = %7Bform_draft: formData%7D;%0A    const ID = $('form').data('id');%0A    let URL = '/form_drafts/';%0A    let method = 'POST'; // create%0A    if (ID != undefined) %7B%0A      URL = '/form_drafts/' + ID;%0A      method = 'PUT'; // update%0A    %7D%0A    $.ajax(%7B%0A      url: URL,%0A      method: method,%0A      data: data,%0A    %7D).done(function() %7B%0A      document.location.href = '/form_drafts/' + ID;%0A    %7D);%0A  %7D);%0A%7D); // END of document.ready%0A%0Afunction takesPlaceholder(value) %7B%0A  return %5B'date', 'date/time', 'long-text', 'text', 'time'%5D.includes(value);%0A%7D%0A%0Afunction extractFieldData(fields) %7B%0A  const allFieldData = %7B%7D;%0A  $('.padded-field').each( function(index) %7B%0A    const fieldData = %7B%7D;%0A    fieldData%5B'number'%5D = index + 1;%0A    fieldData%5B'prompt'%5D = $(this).find('textarea').val();%0A    fieldData%5B'placeholder'%5D = $(this).find('.placeholder').val();%0A    fieldData%5B'required'%5D = $(this).find('.required :checkbox').prop('checked');%0A    fieldData%5B'data_type'%5D = $(this).find('.data-type select').val();%0A    allFieldData%5Bindex%5D = fieldData;%0A    // TODO: $(this).find('.options')%0A  %7D);%0A  return allFieldData
+%7D); // END of document.ready%0A%0Afunction takesPlaceholder(value) %7B%0A  return %5B'date', 'date/time', 'long-text', 'text', 'time'%5D.includes(value)
 ;%0A%7D%0A
@@ -1863,73 +1863,4 @@
 ;%0A%7D%0A
-%0A// $('.options').children('textarea').val() is how you grab options%0A

remove unused code