I have a form that, with JS, has an error message that is meant to appear when one or more of the fields in the form are left empty. However, when I click the submit button, nothing appears. HTML:
<body>
<script type=text/javascript src="script.js"></script>
<h1>Organisation Score Calculator</h1>
<!--
<h4>Input the name of the charity.</h4>
<input type="text" id="nameOfOrganisation">
<h4>Which state/territory does this organisation service?</h4>
<input type="text" id="state">
<h4>What is the ACNC listed size for this organisation?</h4>
<input type="text" id="size">
<h4>What percentage of the organisation's total income is from government grants?</h4>
<input type="text" id="governmentGrants">
<h4>How much net profit does the organisation make annuallly?</h4>
<input type="text" id="netProfit">
<h4>What is the value of the organisation's investments?</h4>
<input type="text" id="investments">
<br>
<br>
<button onclick="main()">Get score!</button>
-->
<form id="regForm">
<div class="textinput">
<label for="nameOfOrganisation">Input the name of the organisation.</label><br><br>
<input id="nameOfOrganisation" type="text" name="nameOfOrganisation"/>
</div>
<br>
<br>
<br>
<div class="textinput">
<label for="state">Which state/territory does this organisation service?</label><br><br>
<input id="state" type="text" name="state"/>
</div>
<br>
<br>
<br>
<div class="textinput">
<label for="size">What is the ACNC listed size for this organisation?</label><br><br>
<input id="size" type="text" name="size"/>
</div>
<br>
<br>
<br>
<div class="textinput">
<label for="governmentGrants">What percentage of the organisation's total income is from government grants?</label><br><br>
<input id="governmentGrants" type="text" name="governmentGrants"/>
</div>
<br>
<br>
<br>
<div class="textinput">
<label for="netProfit">How much net profit does the organisation make annuallly?</label><br><br>
<input id="netProfit" type="text" name="netProfit"/>
</div>
<br>
<br>
<br>
<div class="textinput">
<label for="investments">What is the value of the organisation's investments?</label><br><br>
<input id="investments" type="text" name="investments"/>
</div>
<br>
<br>
<br>
<input type="submit" value="Get score!">
</form>
<p id="namePlaceholder"></p>
<p id="statePlaceholder"></p>
<p id="sizePlaceholder"></p>
<p id="governmentGrantsPlaceholder"></p>
<p id=netProfitPlaceholder></p>
<p id="investmentsPlaceholder"></p>
<h4 id="total"></h4>
</body>
JS:
function validate () {
var name = docuemnt.getElementById("nameOfOrganisation").value;
var state = docuemnt.getElementById("state").value;
var size = document.getElementById("size").value;
var governmentGrants = document.getElementById("governmentGrants").value;
var netProfit = document.getElementById("netProfit").value;
var investments = document.getElementById("investments").value;
var errMsg = "";
var result = true;
if (name == "") {
errMsg += "Name cannot be empty.\n";
}
if (state == "") {
errMsg += "State cannot be empty.";
}
if (size == "") {
errMsg += "Size cannot be empty.\n";
}
if (governmentGrants == "") {
errMsg += "Government grants cannot be empty.\n";
}
if (netProfit == "") {
errMsg += "Net profit cannot be empty.\n";
}
if (investments == "") {
errMsg += "Investments cannot be empty.\n";
}
if (errMsg != "") {
alert (errMsg);
result = false;
}
return result;
}
function init () {
var regForm = document.getElementById("regForm");
regForm.onsubmit = validate();
}
window.onload = init();
I am very new to JS and would appreciate it if anyone could tell me where I've gone wrong here. I have tried changing the function calls in init and below it to include brackets but that did not seem to help at all.
Via Active questions tagged javascript - Stack Overflow https://ift.tt/FTd7cAS
Comments
Post a Comment