Есть проблема с именем функции и ее прерыванием.
1. Переименуйте функцию
submit во что то другое, например, в
submitForm
2. Прервите отправку самой формы. Добавьте например
return false;
<form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">
3. У вас добавлены функции при клике не поля формы. В примере они отсутствуют. Обратите на это внимание
firName() и laName()
Вот итоговый пример с исправлениями
<div class="container">
<h2>Create your Google Account
</h2>
<div class="padding">
<form onsubmit="submitForm('firstName', 'lastName', 'email', 'password', 'confirm'); return false;">
<input type="text" id="firstName" class="firstName" placeholder=" First name" onclick="firName();">
<input type="text" id="lastName" class="lastName" placeholder=" Last name" onclick="laName();">
<br>
<input type="email" id="email" class="email" placeholder=" Username" onclick="firName();">
<br>
<span>You can use letters, numbers & periods
</span>
<br>
<span class="a"><a href="#" class="a">Use my current email address instead</a></span>
<br>
<input type="password" id="password" class="password" placeholder=" Password" onclick="firName();">
<input type="password" id="confirm" class="confirm" placeholder=" Confirm" onclick="firName();">
<p class="f">Use 8 or more characters with a mix of letters, numbers & <br>symbols</p>
<p></p>
<a href="file:///C:/Users/sds63/Desktop/HTML%20CSS/getElementById.html" class="s">Sign in instead</a>
<input type="submit" value="Next" class="submit">
</form>
</div>
</div>
<script>
function submitForm(g, l, e, p, c) {
var fName = document.getElementById(g).value;
var lName = document.getElementById(l).value;
var email = document.getElementById(e).value;
var password = document.getElementById(p).value;
var confirm = document.getElementById(c).value;
document.write(fName + " " + lName + " " + "<br>" + email + "<br>" + password + " " + confirm);
}
function firName() {}
function laName() {}
</script>
