Develop Reference

Send date from html form to Google calendar, etc

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.

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>

Set form field typed value to Javascript Variable and then using this value in another variable

I'm a javascript noobie. I'm creating a form for visitors to sign up to a webinar. I need to create a "unique code" or unique identifier for each visitor that submits the form.
For this I've created a hidden field called "Unique Code". This unique code is generated from a variable which concatenates a string, the email address value typed in the form and a webinar id that I assign from another variable. When I submit the form I just get the string and the webinar id concatenated by not the email address. The desired resulting value is something like this: GTW-visitor#emailaddress.com-12345. Here's my code:
<form action="/destination/" method="post" name="GTW_Test_Form">
<input type="hidden" name="gtwWebinarId" id="gtwWebinarId" value="">
<input type="hidden" name="uniqueCode" id="uniqueCode" value="">
<label for="email"><b>Email</b></label><br>
<input type="text" placeholder="Enter Email" name="emailAddress" id="emailAddress" required><br>
<label for="name"><b>First Name</b></label><br>
<input type="text" placeholder="Your First Name" name="firstName" id="firstName" required><br>
<label for="name"><b>Last Name</b></label><br>
<input type="text" placeholder="Your Last Name" name="lastName" id="lastName" required><br><br>
<input type="submit" value="Register to webinar">
</form>
And then, the javascript:
<SCRIPT LANGUAGE="JavaScript">
var emailAddressInput = document.getElementById("emailAddress").value;
var webinarId = "12345678";
var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
document.querySelector("#gtwWebinarId").value = webinarId;
document.querySelector("#uniqueCode").value = uniqueCode;
</script>
Thanks in advance,
Daniel

Your script runs even before the form fields have any value, you may have to write your script code inside a function which will be invoked by "onsubmit" event of the form.
<form onsubmit="foo(event)">
<script LANGUAGE="JavaScript">
const foo = (event)=>{
event.preventDefault();
var emailAddressInput = document.getElementById("emailAddress").value;
var webinarId = "12345678";
var uniqueCode = "GTW-" + emailAddressInput + "-" + webinarId;
document.querySelector("#gtwWebinarId").value = webinarId;
document.querySelector("#uniqueCode").value = uniqueCode;
}
</script>

Try to use var emailAddressInput = document.querySelector("#emailAddress").value;

That actually worked! Thank you, Sai!

How to send post to 2 different actions?

I have some HTML and Javascript code that sends a form using method=post to an action="www.randomaction.com/randomaction.php".
Now I want to see exactly how it sends it to the action by also sending it to my mail (the same post), however I don't want to have the site open the users mail client to do this, I want it to send from my gmail account to my other gmail account.
my code looks like this:
<form action="http://www.randomaction.com/shared/AddClient/index.php" class="form hod-hasharon" data-name="Email Form Hod Hasharon" data-redirect="http://www.kbanim.com/landing-pages/thank-you" id="wf-form-Email-Form-Hod-Hasharon-2" method="post" name="wf-form-Email-Form-Hod-Hasharon" redirect="http://www.kbanim.com/landing-pages/thank-you">
<div class="w-embed w-script">
<script type="text/javascript" language="JavaScript">
<!--
var MediaTitle= document.URL;
if(MediaTitle.includes("facebook"))
{
MediaTitle= "facebook";
}
if(MediaTitle.includes("googles"))
{
MediaTitle= "google search";
}
if(MediaTitle.includes("googlem"))
{
MediaTitle= "google media";
}
if(MediaTitle.includes("googler"))
{
MediaTitle= "google remraketing";
}
document.write('<input type=hidden data-name="MetaTitle" id="MetaTitle" name="MetaTitle" required="required" ');
document.write(' value="' + document.URL + '">');
document.write('<input type=hidden data-name="Password" id="Password" name="Password" required="required" value="jkq0105">');
document.write('<input type=hidden data-name="ProjectID" id="ProjectID" name="ProjectID" required="required" value="6661">');
//-->
</script>
</div>
<input class="_3 hod-hasharon text-field w-input" data-name="Fname" id="Fname" maxlength="256" name="Fname" placeholder="שם מלא:" required="required" type="text">
<input class="_2 hod-hasharon text-field w-input" data-name="Phone" id="Phone" maxlength="256" name="Phone" placeholder="טלפון:" required="required" type="text">
<input class="hod-hasharon text-field w-input" data-name="Email" id="Email" maxlength="256" name="Email" placeholder="מייל:" required="required" type="email">
<input class="submit-button w-button" data-wait="שולח..." type="submit" value=" שליחה >>">
</form>
Any suggestions?
Thank you in advance!

The method POST doesn't send anything visible to the page.
Your POST information will be available in a PHP array in your PHP file :
$_POST
If you want to access a single value from your form :
$_POST['yourInputID']

Form element not sending its values

So I have a form:
<form name="htmlform" method="post" action="test.html">
<input type="text" id="first" placeholder="First Name" required>
<input type="text" id="last" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<textarea id="comments" name="comments" placeholder="Message" required></textarea>
<button name="send" type="submit" class="submit">SEND</button>
</form>
and after the user submits the form, it is sent to test.html through POST method. And this is the code on test.html.
<div id="targetDiv"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
var first=$("#first").val();
var last=$("#last").val();
var email=$("#email").val();
var comments=$("#comments").val();
var txt1="Welcome " +first+" "+last;
var txt2="Your Email is " +email;
var txt3="Your Message is "+ comments;
$("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
</script>
but when the user submits, #targetDiv always prints out:
Welcome undefined undefined
Your Email is undefined
Your Message is undefined

Your form is indeed sending values to the server using a POST request. However, the page test.html is a different page from the page with the form, so the <input> elements no longer exist at that point.
You will need to write server-side code to handle the POST parameters and insert them into the test.html page.
Alternatively, you could send the parameters with a GET request, and inspect the window.location.queryString property to parse the values.

Your form and the div you are trying to append values to need to be in the same html file unless you are working with a server. Also give your submit an event listener to call all the code you already have. Like this:
$(".submit").on("click", function(e) {
e.preventDefault();
var first=$("#first").val();
var last=$("#last").val();
var email=$("#email").val();
var comments=$("#comments").val();
var txt1="Welcome " +first+" "+last;
var txt2="Your Email is " +email;
var txt3="Your Message is "+ comments;
$("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
});

Javascript or jquery is not a server side language .. use any serverside script like php,asp.
if you want to do the same using jquery use the following method..
<form name="htmlform" method="post" action="test.html">
<input type="text" id="first" placeholder="First Name" required>
<input type="text" id="last" placeholder="Last Name" required>
<input type="email" id="email" placeholder="Email" required>
<textarea id="comments" name="comments" placeholder="Message" required></textarea>
<button id="button" name="send" type="button" class="submit">SEND</button>
</form>
<div id="targetDiv">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#button').click(function () {
var first=$("#first").val();
var last=$("#last").val();
var email=$("#email").val();
var comments=$("#comments").val();
var txt1="Welcome " +first+" "+last;
var txt2="Your Email is " +email;
var txt3="Your Message is "+ comments;
$("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
});
</script>

Wrap it inside the jQuerys document ready function and trigger the function when user clicks on the submit button.
$(document).ready(function() {
$(".submit").on("click", function() {
var first=$("#first").val();
var last=$("#last").val();
var email=$("#email").val();
var comments=$("#comments").val();
var txt1="Welcome " +first+" "+last;
var txt2="Your Email is " +email;
var txt3="Your Message is "+ comments;
$("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3);
});
});

Pre-fill form field via URL in html

I am looking for a simple way to pre-fill a field in my contact form when ever a user clicks on a link that is given in some other page.
This is my contact form in html :
<form method="post" action="submit.php" >
<p>Your name:
<br /><input name="name" /></p>
<p>Your email:
<br /><input name="email" /></p>
<p>Your message:
<br /><textarea name="message" id="message" rows="10" cols="50"></textarea></p>
<p><input type="submit" value="Send" /></p>
</form>
I want to fill the "message" field with "some text" when a user clicks on a url like www.xyz.com/contact.html?setmessagefield=some_text

A more modern way would be to use the URL() constructor and the searchParams property. Let the browser engine do the work!
(new URL(window.location.href)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x)
Try it online! or on Stack Overflow:
const hash = '?name=some_text&email=more%20text';
const example = "http://example.com/" + hash;
(new URL(example)).searchParams.forEach((x, y) =>
document.getElementById(y).value = x);
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>

JavaScript has no built-in functions to parse url parameters like that (Since those GET parameters are usually used to send data to the server).
I'd suggest using a hash instead (A hash is purely client-side):
www.xyz.com/contact.html#name=some_text&email=more%20text
Now, add some id's to your fields:
<p>Your name:
<br /><input name="name" id="name" /></p>
<p>Your email:
<br /><input name="email" id="email" /></p>
Then set the values like this, on load:
var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
for(var i = 0; i < hashParams.length; i++){
var p = hashParams[i].split('=');
document.getElementById(p[0]).value = decodeURIComponent(p[1]);;
}
Working example
The big advantage of this is that it's flexible. If you want to set the values of 2 fields, you supply those 2 fields' id's in the hash:
www.xyz.com/contact.html#name=some_text&email=more%20text
4 fields? 4 id's:
www.xyz.com/contact.html#name=some_text&email=more%20text&username=john&age=23
No need to edit the code, then.

Don't bother with JavaScript if you're using PHP.
Just add a little something to the HTML:
<form method="post" action="submit.php" >
<p>Your name:<br />
<input name="name" value="<?php echo htmlspecialchars($_GET['name']) ?>" /></p>
<p>Your email:<br />
<input name="email" value="<?php echo htmlspecialchars($_GET['email']) ?>"/></p>
<p>Your message:<br />
<textarea name="message" id="message" rows="10" cols="50">
<?php echo htmlspecialchars($_GET['message']) ?>
</textarea></p>
<p><input type="submit" value="Send" /></p>
</form>

You can retrieve your current url with window.location.href and then get the default message via a regular expression :
var msg = window.location.href.match(/\?setmessagefield=(.*)/);
document.getElementById("message").value = msg[1];