Multiple form submissions with JavaScript checkboxes

Other Questions JavaScript
1

I’m working on a form that needs to send data to different places based on checkbox selections. The main email input should always go to a default address. But when checkboxes are ticked, I want to send the email to additional addresses too.

Here’s what I’m trying to do:

  • Send email to default address always
  • If Checkbox1 is ticked, also send to Address1
  • If Checkbox2 is ticked, also send to Address2
  • It should work with multiple checkboxes selected

I’ve tried using onclick events to change the form action, but it’s not working right. Can anyone help me figure out how to send the form data to multiple places based on checkbox status?

Here’s a simplified version of what I’ve tried:

<form id="myForm">
  <input type="email" id="userEmail" placeholder="Your email">
  <input type="checkbox" id="opt1"> Option 1
  <input type="checkbox" id="opt2"> Option 2
  <button type="submit">Submit</button>
</form>

<script>
function handleSubmit(event) {
  event.preventDefault();
  // Logic to send to multiple addresses based on checkboxes
  // Not sure how to implement this part
}

document.getElementById('myForm').addEventListener('submit', handleSubmit);
</script>

Any suggestions on how to make this work?

2

hey alex, u could try using AJAX to send the data. make separate requests for each checked box. somthing like this:

function handleSubmit(e) {
  e.preventDefault();
  let email = document.getElementById('userEmail').value;
  
  // always send to default
  sendData('[email protected]', email);

  if(document.getElementById('opt1').checked)
    sendData('[email protected]', email);

  if(document.getElementById('opt2').checked)
    sendData('[email protected]', email);
}

function sendData(to, email) {
  // use AJAX to send data here
}

hope this helps!

3

I’ve encountered a similar situation before and found that a server-side approach works better in this scenario. Instead of relying solely on client-side JavaScript to handle multiple submissions, you can submit the form data once to your server and then process which email addresses need to receive the data based on the checkbox input. This technique not only enhances security by limiting client-side manipulation but also simplifies the front-end logic. In my experience, handling the distribution on the server side improves reliability and makes future maintenance easier.

4

Alright, I’ve dealt with this kind of problem before, and I found a neat solution using FormData and the Fetch API. It’s pretty straightforward and gets the job done without too much fuss.

Here’s what you can do:

function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);
  const email = formData.get('userEmail');
  const addresses = ['[email protected]'];

  if (form.opt1.checked) addresses.push('[email protected]');
  if (form.opt2.checked) addresses.push('[email protected]');

  addresses.forEach(address => {
    fetch('/send-email', {
      method: 'POST',
      body: JSON.stringify({ to: address, email: email }),
      headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
}

This approach lets you handle multiple submissions in one go, and it’s pretty flexible if you need to add more options later. Just make sure your server can handle the ‘/send-email’ endpoint correctly.