SaaS表单自定义需求：多字段合并填充+自动生成唯一邮箱

Hey there! No worries about limited JavaScript experience—let’s work through your two requirements with simple, copy-pasteable code you can add to your SaaS platform’s custom JS section.

Since your form requires a unique email but you don’t need real ones for offline entries, we can auto-generate a unique, valid-looking email whenever the email field is empty (or right before form submission). The key is using a mix of timestamps and random numbers to guarantee uniqueness every time.

Here’s a script that fills the email field with a dummy value when the form is about to submit:

// Replace 'email-field' with your actual email input's ID or class
const emailInput = document.getElementById('email-field');
const form = emailInput.closest('form');

form.addEventListener('submit', function(e) {
  // Only generate a dummy email if the field is empty
  if (!emailInput.value.trim()) {
    // Create a unique ID using timestamp + random number to avoid duplicates
    const uniqueId = Date.now() + Math.floor(Math.random() * 1000);
    // Use a dummy domain (feel free to swap this for your company's domain if you want)
    emailInput.value = `offline-submit-${uniqueId}@example.com`;
  }
});

If your form has real-time validation (like checking for an email as you type), you can also trigger the fill when the input loses focus:

emailInput.addEventListener('blur', function() {
  if (!this.value.trim()) {
    const uniqueId = Date.now() + Math.floor(Math.random() * 1000);
    this.value = `offline-submit-${uniqueId}@example.com`;
  }
});

For merging content from multiple text boxes into a target field, we’ll listen for input changes in the source fields and update the target field in real-time.

Let’s say you have three source inputs (#first-name, #last-name, #phone) and a target input (#combined-details). Here’s the code:

// Replace these selectors with your actual input IDs/classes
const sourceInputs = [
  document.getElementById('first-name'),
  document.getElementById('last-name'),
  document.getElementById('phone')
];
const targetInput = document.getElementById('combined-details');

// Function to update the target field with merged content
function updateCombinedField() {
  // Combine values (adjust the separator and order to fit your needs)
  const combinedValue = sourceInputs
    .map(input => input.value.trim())
    .filter(value => value) // Skip empty fields
    .join(' | '); // Use any separator you want (space, comma, line break, etc.)
  
  targetInput.value = combinedValue;
}

// Add input listeners to all source fields so updates happen instantly
sourceInputs.forEach(input => {
  input.addEventListener('input', updateCombinedField);
});

// Optional: Run once on page load to set initial value if inputs have pre-filled data
updateCombinedField();

Just adjust the sourceInputs array to match your form’s actual input elements, and tweak the join separator (like ', ' or ' ') to how you want the merged content to look.

A quick tip: If you’re not sure what IDs/classes your form uses, right-click any input in your browser, select "Inspect", and you’ll see the element’s attributes in the dev tools panel.

内容的提问来源于stack exchange，提问作者Stephen