Javascript Conditional Statement Example

by Didin J. on Dec 12, 2016 Javascript Conditional Statement Example

How to create Javascript Conditional Statement Example using the best, easy and simple practice.

This time I will show you the standard programming language, in this case, Javascript conditional statement example. Like usually, we have to make an HTML file for put our javascript code. Then, let begin to write the conditional statement. 

<html>
  <head><title>Conditional Statement</title></head>
  <body>
    <script type="text/javascript">
      var cost = 5000;
      var price = 6000;

      if(cost<price) {
        document.write("You are got profit");
      } else {
        document.write("You are a loss");
      }
    </script>
  </body>
</html>

In those examples, we are comparing two value between cost and price. If cost larger than price then print out "You are a loss" else, print out "You are got profit". Now, look at the result in browser:

 

Real example with form validation using conditional statement

Right now is an awesome part of the real example. We will create an HTML form with some validation using javascript conditional statement. There are a text field, a password field, a select box, a radio button and a submit button inside a form. Validation is:

  • If text field is empty it will show alert
  • If password field is empty or password length less than 7 characters it will show alert
  • If radio button not checked it will show alert
  • If select box not selected it will show alert
  • If all element in form filled it will show success alert

Here's the full code:

<html>
  <head><title>Conditional Statement</title></head>
  <body>
    <form onsubmit="validate()">
      <input type="text" id="fullname" name="fullname" /><br>
      <input type="password" id="password" name="password" /><br>
      <input type="radio" id="male" name="gender" value="male"/>Male
      <input type="radio" id="female" name="gender" value="female" />Female<br>
      <select name="jobrole" id="jobrole">
        <option value="">-- Select Job Role --</option>
        <option value="programmer">Programmer</option>
        <option value="analyst">Analyst</option>
        <option value="designer">Designer</option>
      </select><br><br>
      <input type="submit" name="submitform" value="Submit" />
    </form>
    <script type="text/javascript">

      function validate() {
        var fullname = document.getElementById('fullname');
        var password = document.getElementById('password');
        var gender = document.getElementsByName('gender');
        var jobrole = document.getElementById('jobrole');

        if(fullname.value === '' || fullname.value.length === 0) {
          alert('Name must be filled');
        } else if(password.value === '') {
          alert('Password must be filled');
        } else if(password.value.length < 7) {
          alert('Minimal password length is 6 characters');
        } else if(gender[0].checked === false && gender[0].checked === false) {
          alert('Choose your gender');
        } else if(jobrole.value === '') {
          alert('Choose your Job Role');
        } else {
          alert('Your form filled with a right data');
        }
      }
    </script>
  </body>
</html>

Now open your HTML page in browser and test by filling the form.

In this example we have some new syntax of javascript there is:

  1. Function is method to validate a form
  2. document.getElementById is element initialization
  3. Onsubmit is the form event for detecting submit action by submit button

And a conditional statement operators:

Operators Meaning
=== Is equals
!== Is not equals
> Is greater than 
< Is less than
>== Is greater and equals than
<== Is less and equals than

That's it for now.

Thanks

The following resources might be useful for you:

Loading…