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