Send date from html form to Google calendar, etc

Question

This is a noob question. What I'd like to do is set up a birthday party reservation website that has people fill out a form: yes/ no will attend, name, email. After the form is filled out for 'will attend' I'd like to have a popup modal that has the option to 'add to your calendar: Google, iCal, etc.' Is this possible in an html form (javascript/ ajax)? I know it can be done in WordPress. Thank you for any help/ suggestions.

Answer 1

Here is a very basic idea of what you could do. I put the form in the console using the answer here: https://stackoverflow.com/a/47188324/12946266 you will need to use php to operate on this form most likely, but I can't use that here.

 const form = document.querySelector('form'); document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); var values = Object.values(form).reduce((obj, field) => { if(field.type=='radio'){ obj[field.name] = field.checked; }else{ obj[field.name] = field.value; } return obj }, {}) console.log(values); });

 <form id="myForm" action="/action_page.php"> First name: <input type="text" name="fname" value=""><br> Last name: <input type="text" name="lname" value=""><br> email: <input type="text" name="email" value=""><br> <input type="radio" id="attending" name="attendance" value="attending"> <label for="attending">attending</label> <br> <input type="submit" value="Submit"><br> </form>