javascriptpermanent

Show predefined value if selection is not made - Javascript


I have this javascript:

$(function() {

  $("#generate").click(function() {
  $("#id").val(generateID($("#age").val()));
    var increaseBy = increaseBase(generateSOCS());

    $("#numbersoc1").val(increaseBy(0));
    $("#numbersoc2").val(increaseBy(1));
    $("#numbersoc3").val(increaseBy(2));
    $("#numbersoc4").val(increaseBy(3));
  });

  $.getJSON("age.json", function(json) {

        $("#age").empty();
        $("#age").append($('<option>').text("Select age"));

        $.each(json, function(i, obj){
            $("#age").append($('<option>').text(obj.age).attr('value', obj.permanent));
        });
    });
});

function increaseBase(base) {
  return function(value) {
    return "SOCS" + (base + value).toString(16).toUpperCase()
  }
}

function generateSOCS() {
  return random(10, 16777215);
}

function generateID(permanent) {
    if(permanent == "Select age")
        return "Please select your age first!";
        var add = 5
    return (permanent + random(1,100) + random(100,50000) + ++add);
}

function random(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

And this html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='script.js'></script>
<h1>Number Generator</h1>

<div>
 <select name="age" id="age"></select><br/>

  <input id="generate" type=button value="Generate" /><br/><br/> 
  <br/>
  Identifier<br/>
   <input id="id" placeholder="Identification Number" /><br/><br/>
  Number<br/>
  <input id="numbersoc1" placeholder="Number Soc. S1." /><br/>
  <input id="numbersoc2" placeholder="Number Soc. S2." /><br/>
  <input id="numbersoc3" placeholder="Number Soc. S3." /><br/>
  <input id="numbersoc4" placeholder="Number Soc. S4." /><br/>
</div>

And this json:

[
    { "age": "18", "permanent": "AA" },
    { "age": "19", "permanent": "BB" },
    { "age": "20", "permanent": "CC" }
]

When I click the 'Generate' button without selecting an age in the drop down menu then the 'Identifier' box will show the following: 'Please select your age first!' which is normal and expected however I would like to do the same thing for the 4 Number boxes. Help would be appreciated.

Also, can the code be made more efficient? By that I mean shorter. If yes how?

Thank you in advance.


Solution

  • You should check the value of the selected value in #age first.
    This can be achieved with a simple if else statement.

    $("#generate").click(function() {
      if ($('#age').val() !== '<your default value>') {
        //your code for setting the values of the #numbersoc* inputs
      } else {
        //code that notifies the user about needing to select an age.
      }
    });
    

    Note that for this example it is required to have a default value as an option in your age select tag.
    this can be achieved by using the following option tag.

    <option selected="true" disabled="disabled">Select your age</option>  
    

    Edit
    added the solution into OP's code.

    $(function() {
      $("#generate").click(function() {
      //checks if the value of #id is an empty string
        if ($("#id").val(generateID($("#age").val())).val() == '') {
        //alerts the user that they should enter an age
        //feel free to make something nice here
          alert('Please insert age first');
        } else {
        var increaseBy = increaseBase(generateSOCS());
    
        $("#numbersoc1").val(increaseBy(0));
        $("#numbersoc2").val(increaseBy(1));
        $("#numbersoc3").val(increaseBy(2));
        $("#numbersoc4").val(increaseBy(3));
      }
    });
    
      //uncomment this when using the json
      /*$.getJSON("age.json", function(json) {
    
        $("#age").empty();
        $("#age").append($('<option>').text('Select age').attr('value', 'Select age')
        .attr('selected', true).prop('disabled','disabled'));
    
        $.each(json, function(i, obj) {
          $("#age").append($('<option>').text(obj.age).attr('value', obj.permanent));
        });
      });*/
    });
    
    function increaseBase(base) {
      return function(value) {
        return "SOCS" + (base + value).toString(16).toUpperCase()
      }
    }
    
    function generateSOCS() {
      return random(10, 16777215);
    }
    
    function generateID(permanent) {
    // simple check for default, empty or null value
      if ($('#age').val() == 'Select age' || $('#age').val() == '' || $('#age').val() == null) {
        return;
      }
      var add = 5
      return (permanent + random(1, 100) + random(100, 50000) + ++add);
    }
    
    function random(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src='script.js'></script>
    
    <h1>Number Generator</h1>
    
    <div>
      <select name="age" id="age">
      <!-- the options will be auto generated -->
        <option selected="true" disabled="disabled">Select age</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      <br/>
    
      <input id="generate" type=button value="Generate" />
      <br/>
      <br/>
      <br/> Identifier
      <br/>
      <input id="id" placeholder="Identification Number" />
      <br/>
      <br/> Number
      <br/>
      <input id="numbersoc1" placeholder="Number Soc. S1." />
      <br/>
      <input id="numbersoc2" placeholder="Number Soc. S2." />
      <br/>
      <input id="numbersoc3" placeholder="Number Soc. S3." />
      <br/>
      <input id="numbersoc4" placeholder="Number Soc. S4." />
      <br/>
    </div>