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. Javascript conditional statement perform different computations or actions depending on whether a programmer-specified boolean condition evaluates to true or false. A conditional is sometimes colloquially referred to as an "if-check," especially when perceived as a simple one and when its specific form is irrelevant or unknown. 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 the browser:

Real example with form validation using a 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 is a text field, a password field, a select box, a radio button and a submit button inside a form. Validation is:

If the text field is empty it will show alert
If the 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 elements in the 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:

The function is the method to validate a form
document.getElementById is element initialization
Onsubmit is the form event for detecting submit action by submit button

And 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.

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thanks

Javascript Conditional Statement Example

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

Real example with form validation using a conditional statement

Javascript Conditional Statement Example

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

Real example with form validation using a conditional statement

Related Articles