Check if input is empty function not working

JavaScript
1

Hello everyone!
Im trying to use a simple function to check if the input fields are empty, but it doesnt work. It should also give a welcome message when the user gave input, thats why i did the else.

Sorry for the bad code, im new to this, and i hope someone can help me!

Html page:

<!DOCTYPE html>
<noscript> Deze applicatie maakt gebruik van Javascript. U heeft deze functie
uitgeschakeld in uw browser. Gelieve deze opnieuw te activeren om van deze applicatie
gebruik te kunnen maken </noscript>


<html>
<head>
<title>Mijn Levensloop</title>
<script src="myscripts.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="form1" method="post" id="inputfield">
Naam: <input type="text" id="naam" name="text1"><br>
Leeftijd: <input type="date" id="geboortedatum" name="text1"><br>
<button onclick="checkLeeg()">Bereken je levensloop</button>
</form>
<noscript>Gelieve javascript aan te zetten</noscript>



</body>
</html>

JS Page:

function checkLeeg() {
	var x = document.getElementById("geboortedatum").value;
	if(x != null && x != ''){
	return "Gelieve iets in te vullen";
}else{
	return "Welkom" +document.getElementById("naam")+ "Hieronder kan je een overzicht terugvinden van jouw levensloop.";
}}
3

Welcome to the forums, @Exonyan1. smile

When you post code on the forums, you need to format it so it will display correctly. (I’ve edited your post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

1 Like
4

Ohh i see, i didnt know that yet sorry, thanks for pointing it out :slight_smile:

1 Like
5

Hi @Exonyan1, you’re just returning those strings from the function there, but doing nothing with it; so you might add an output element to the page, and set its text content to the returned message. Furthermore, buttons default to type="submit", so clicking that button will submit the form and – since there is no action attribute given – basically reload the page. You can set it to type="button" instead which will trigger no further actions; so together it might look like this:

<form name="form1" method="post" id="inputfield">
  <label>
    Naam: 
    <input type="text" id="naam" name="naam">
  </label>
  <label>
    Leeftijd: 
    <input type="date" id="geboortedatum" name="geboortedatum">
  </label>
  <button id="calculate" type="button">Bereken je levensloop</button>
  <p id="message"></p>
</form>

var calculate = document.getElementById('calculate');
var message = document.getElementById('message');

function checkLeeg () {
  var date = document.getElementById("geboortedatum").value;

  if (date) {
    return "Gelieve iets in te vullen";
  } else {
    return "Welkom " + document.getElementById("naam").value + 
      " Hieronder kan je een overzicht terugvinden van jouw levensloop.";
  }
}

calculate.addEventListener('click', function () {
  message.textContent = checkLeeg();
});
6

Aha i see, that sounds understandable. However, with the code you sent me, im still not getting the messages, neither the welcome one, or the one which says that the user didnt fill anything in.

7

It works for me… here’s a fiddle. Are there any errors in the console of your browser dev tools?

PS: Ah did you maybe include the JS in the HTML head? You have to include it at the end of the body so you can query for the #calculate and #message elements…

8

I was able to fix the issue, the JS was indeed at the top, stupid beginner mistake of me :p.
Now with the date i’ve received, i have to give the user information like: minutes alive, seconds alive, age in years.

Do i have to make another function for this? im not sure if i can add 2 functions in 1 button onclick event

9

Well ideally a function should always do exactly one thing, and such date calculations should definitely be encapsulated in a dedicated function. Using addEventListener() as in the snippet I posted above you can indeed add as many listeners as you like:

calculate.addEventListener('click', showMessage);
calculate.addEventListener('click', calculateDate);

Aggregating related functions in a single click handler is fine too though, especially of course if one depends on the result of the other.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.