I'm trying to get user's birth info and come up with a name for them according to their day of birth after they click a confirm button .The program also checks if the user has entered a valid date and month , but i'm not getting any output after filling the inputs.
Here is my Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="CS S/styles.css" media="screen" />
<title>Akan names</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Akan Name</h1>
<div class="card">
<div class="card-body">
<label for="usr">Date</label>
<input type="text" class="form-control" id="date">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Month</label>
<input type="text" class="form-control" id="month">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Year</label>
<input type="text" class="form-control" id="year">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="card">
<div class="card-body">
<button onclick="calc()" id="btnConfirm" type="button">Check</button>
</div>
</div>
<script src = "JS/script.js"></script>
</body>
</html>
Here is my Js code :
var date;
var month;
var year;
var gender;
var name;
function validate() {
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
if (date <= 0 || date > 31) {
alert("Enter a valid date");
};
if (month <= 0 || month > 12) {
alert("Enter a valid month");
};
}
function calc() {
validate();
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
var cc = year.charAt(0) + year.charAt(1);
var yy = year.charAt(2) + year.charAt(3);
var day = (((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date) % 7;
if (day == 1 && gender == "male") {
alert("Sunday : Kwasi");
} else if (day == 2 && gender == "male") {
alert("Monday : Kwadwo");
} else if (day == 3 && gender == "male") {
alert("Tuesday : Kwabena");
} else if (day == 4 && gender == "male") {
alert("Wednesday : Kwaku");
} else if (day == 5 && gender == "male") {
alert("Thursday : Yaw");
} else if (day == 6 && gender == "male") {
alert("Friday : Kofi");
} else if (day == 7 && gender == "male") {
alert("Saturday : Kwame");
} else if (day == 1 && gender == "female") {
alert("Sunday : Akosua");
} else if (day == 2 && gender == "female") {
alert("Monday : Adwoa");
} else if (day == 3 && gender == "female") {
alert("Tuesday : Abenaa");
} else if (day == 4 && gender == "female") {
alert("Wednesday : Akua");
} else if (day == 5 && gender == "female") {
alert("Thursday : Yaa");
} else if (day == 6 && gender == "female") {
alert("Friday : Afua");
} else if (day == 7 && gender == "female") {
alert("Saturday : Ama");
};
}
It's because the day value is not rounde, so it does not match any of the value you are listing. You could discover it with a simple console.log(day).
Use Math.floor() would do the trick:
var date;
var month;
var year;
var gender;
var name;
function validate() {
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
if (date <= 0 || date > 31) {
alert("Enter a valid date");
};
if (month <= 0 || month > 12) {
alert("Enter a valid month");
};
}
function calc() {
validate();
date = document.getElementById('date').value;
month = document.getElementById('month').value;
year = document.getElementById('year').value;
gender = document.getElementById('gender').value;
var cc = year.charAt(0) + year.charAt(1);
var yy = year.charAt(2) + year.charAt(3);
var day = Math.floor(((((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date)) % 7);
console.log(day);
if (day == 1 && gender == "male") {
alert("Sunday : Kwasi");
} else if (day == 2 && gender == "male") {
alert("Monday : Kwadwo");
} else if (day == 3 && gender == "male") {
alert("Tuesday : Kwabena");
} else if (day == 4 && gender == "male") {
alert("Wednesday : Kwaku");
} else if (day == 5 && gender == "male") {
alert("Thursday : Yaw");
} else if (day == 6 && gender == "male") {
alert("Friday : Kofi");
} else if (day == 7 && gender == "male") {
alert("Saturday : Kwame");
} else if (day == 1 && gender == "female") {
alert("Sunday : Akosua");
} else if (day == 2 && gender == "female") {
alert("Monday : Adwoa");
} else if (day == 3 && gender == "female") {
alert("Tuesday : Abenaa");
} else if (day == 4 && gender == "female") {
alert("Wednesday : Akua");
} else if (day == 5 && gender == "female") {
alert("Thursday : Yaa");
} else if (day == 6 && gender == "female") {
alert("Friday : Afua");
} else if (day == 7 && gender == "female") {
alert("Saturday : Ama");
};
}
<body>
<div class="container">
<div class="jumbotron">
<h1>Akan Name</h1>
<div class="card">
<div class="card-body">
<label for="usr">Date</label>
<input type="text" class="form-control" id="date">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Month</label>
<input type="text" class="form-control" id="month">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Year</label>
<input type="text" class="form-control" id="year">
</div>
<div class="card">
<div class="card-body">
<label for="usr">Gender</label>
<input type="text" class="form-control" id="gender">
</div>
<div class="card">
<div class="card-body">
<button onclick="calc()" id="btnConfirm" type="button">Check</button>
</div>
</div>
</body>
Related
This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Closed 10 months ago.
I'm trying to use a form tag with document.getElementById, but I am having issues with having the Javascript retrieve the values from my inputs. Or maybe something else is completely wrong and I'm just stupid.
HTML:
<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">
<input type="submit" name="submit">
</form>
JS:
function testMonth() {
var month = document.getElememtById('month').value;
if(month == July || month == August) {
document.getElementById('price').innerHTML = "$150";
}
else {
if(month == null) {
alert('Please fill out the month field');
}
else {
testAge();
}
}
}
function testAge() {
var age = document.getElementById('age').value;
if(age == null) {
alert('Please fill out the age field');
}
else {
if(age < 5 || age > 90) {
alert('Visiters must be between the ages of 5 and 90');
}
else {
if (age == 10 || age == 90) {
testCoupon();
}
else {
if (age < 18 || age == 18) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
}
}
function testCoupon() {
var coupon = document.getElementById('coupon').value;
if (coupon == "YEET") {
document.getElementById('price').innerHTML = "$0";
}
else {
if (document.getElementById('age').value == 10) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
When I fill out the fields on the website and hit sumbit, the site just refreshes, which makes me think that the submit button/form syntax is wrong. However, the issue could also be that I have written the JS wrong, and it's not retrieving the value of the form inputs.
I found 3 bugs in your code. First you should use
event.preventDefault()
as second in your first if statement inside testMonth function you are checking July and August but you do not have that variables. You should check as string or create variable for them and last one you have typo in getElementById again in first part of testMonth function
function testMonth() {
event.preventDefault()
var month = document.getElementById('month').value;
if(month == 'July' || month == 'August') {
document.getElementById('price').innerHTML = "$150";
}
else {
if(month == null) {
alert('Please fill out the month field');
}
else {
testAge();
}
}
}
function testAge() {
var age = document.getElementById('age').value;
if(age == null) {
alert('Please fill out the age field');
}
else {
if(age < 5 || age > 90) {
alert('Visiters must be between the ages of 5 and 90');
}
else {
if (age == 10 || age == 90) {
testCoupon();
}
else {
if (age < 18 || age == 18) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
}
}
function testCoupon() {
var coupon = document.getElementById('coupon').value;
if (coupon == "YEET") {
document.getElementById('price').innerHTML = "$0";
}
else {
if (document.getElementById('age').value == 10) {
document.getElementById('price').innerHTML = "$50";
}
else {
document.getElementById('price').innerHTML = "$150";
}
}
}
<form onsubmit="testMonth();">
<label>Month:
<input id="month" list="months" name="Months"></label>
<datalist id="months">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
</datalist>
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<label for="coupon">Coupon Code:</label>
<input type="text" id="coupon" name="coupon">
<input type="text" id="price" name="price">
<input type="submit" name="submit">
</form>
I wanted the user to input a number and if the number is a multiple of 3 or 5, I want a word/paragraph that says, "You are a witch"
created a function but I cannot seem to make it work
var x;
function pop() {
for (x = 1; x <= 100; x++)
if (x % 3 == 0) {
document.getElementById('onClick').innerHTML = 'You are a Warrior';
} else if (x % 5 == 0) {
document.getElementById('onClick').innerHTML = 'You are a wizard';
} else if (x % 3 == 0 && x % 5 == 0) {
document.getElementById('onClick').innerHTML = 'You are a Sage';
} else {
document.getElementById('onClick').innerHTML = 'invalid';
}
}
<input type="number" id="x">
<br>
<br>
<center><button onclick="pop()">Click Me</button> </center>
<br>
<br>
<p id="onClick"></p>
You never read the user input. You have a loop where there should not be one. You need to change the order of the comparisons.
function pop(){
var x = document.getElementById("x").value;
if (x % 3 == 0 && x % 5 == 0) {
document.getElementById('onClick').innerHTML = "You are a Sage";
}
else if (x % 3 == 0 ) {
document.getElementById('onClick').innerHTML = "You are a Warrior";
}
else if (x % 5 == 0){
document.getElementById('onClick').innerHTML = "You are a wizard";
}
else {
document.getElementById('onClick').innerHTML = "invalid";
}
}
<input type="number" id="x">
<br>
<br>
<center><button onclick="pop()">Click Me</button> </center>
<br>
<br>
<p id="onClick"></p>
I am a newbie to Jquery. I am trying to use the output of first if condition (".viewvesseltable"), to get the value of vhzchart and then use its value to run the next if condition. But the result always returns the default condition "Sound Engineering Practice (SEP)". I have to add conditions for rest of the tables as well. Please help to fix my issue. Thanks a lot to all & to stack overflow.
$(document).ready(function() {
$(".vesselcalc").click(function() {
$(function() {
if ($("input[type=radio][name=vstate]:checked").val() === 'vgas' && $("input[type=radio][name=vgroup]:checked").val() === 'vgroup1') {
($(".viewvesseltable").text("Table 1"));
} else {
if ($("input[type=radio][name=vstate]:checked").val() === 'vgas' && $("input[type=radio][name=vgroup]:checked").val() === 'vgroup2') {
($(".viewvesseltable").text("Table 2"));
} else {
if ($("input[type=radio][name=vstate]:checked").val() === 'vliquid' && $("input[type=radio][name=vgroup]:checked").val() === 'vgroup1') {
($(".viewvesseltable").text("Table 3"));
} else {
if ($("input[type=radio][name=vstate]:checked").val() === 'vliquid' && $("input[type=radio][name=vgroup]:checked").val() === 'vgroup2') {
($(".viewvesseltable").text("Table 4"));
} else {
alert("Select Fluid State and Fluid Group");
}
}
}
}
});
var vhzchart = $(".viewvesseltable").val();
var vpres = $(".vpressure").val();
var vvol = $(".vvolume").val();
var vpsv = $(".vpressure").val() * $(".vvolume").val();
$(function() {
if ((vhzchart === "Table 1") && (vpres < 0.5)) {
($(".viewvesselcategory").text("PED not applicable"));
} else {
if ((vhzchart === "Table 1") && ((vpsv > 1000) || (vpres > 1000))) {
($(".viewvesselcategory").text("Cat IV"));
} else {
if ((vhzchart === "Table 1") && ((vpsv > 200) || (vpres > 200))) {
($(".viewvesselcategory").text("Cat III"));
} else {
if ((vhzchart === "Table 1") && ((vpsv > 50) || (vpres > 200))) {
($(".viewvesselcategory").text("Cat II"));
} else {
if ((vhzchart === "Table 1") && (((vvol > 1) && (vpsv > 25)) || (vpres > 200))) {
($(".viewvesselcategory").text("Cat I"));
} {
($(".viewvesselcategory").text("Sound Engineering Practice (SEP)"));
}
}
}
}
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<h2>Vessel</h2> Vessel Name :
<input type="text">
<br> Fluid State : Gas
<input type="radio" name="vstate" value="vgas"> Liquid
<input type="radio" name="vstate" value="vliquid">
<br> Fluid Group : Group 1
<input type="radio" name="vgroup" value="vgroup1"> Group 2
<input type="radio" name="vgroup" value="vgroup2">
<br> Design Pressure (Bar) :
<input type="number" placeholder="Enter Pressure" name="vpressure" class="vpressure">
<br> Volume (Liters) :
<input type="number" placeholder="Enter Volume" name="vvolume" class="SmallInput vvolume">
<p> PED Table : <span class="viewvesseltable"></span></p>
<p> PED Category: <span class="viewvesselcategory"></span></p>
<button type="button" class="btn btn-finish pull-left vesselassy">Add to My Assembly</button>
<button type="button" class="btn btn-primary pull-right vesselcalc">Calculate PED Category</button>
</article>
I want to get the number of days a person worked according to his in-time and out-time. And it should automatically calculate on day field when it's selected from the table row and it's not working with my js code
HTML
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>
JQUERY
$(document).ready(function (){
$('#intime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
$('#outtime').on('input', function() {
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});
You can use moment.js to parse time.
$(function(){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = new moment($("#intime").val(), 'HH:mm:ss'); // get value of intime
var outtime= new moment($("#outtime").val(), 'HH:mm:ss');
var startTime = new moment("08:00:00", 'HH:mm:ss');
var halfDay = new moment("12:30:00", 'HH:mm:ss');
var wholeDay = new moment("18:00:00", 'HH:mm:ss');
var day = 0; // declare day as 0
if (moment(intime).hour() == 8 && moment(outtime).hour() >= 18) {
day = 1;
}
else if (moment(intime).hour() == 8 && (moment(outtime).hour() == 12 && moment(outtime).minute() == 30)) {
day = 0.5;
}
else if ((moment(intime).hour() == 12 && moment(intime).minute() == 30) && moment(outtime).hour() >= moment(wholeDay).hour()) {
day = 0.5;
}
$("#day").val(day);
/*console.log("imtime", moment(intime).hour());
console.log("intime", moment(intime).minute());
console.log("outtime",moment(outtime).hour());
console.log("outtime",moment(outtime).minute());
console.log("wholeDay", moment(wholeDay).hour());*/
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<fieldset> In-Time:
<input class="input" type="text" name="InTime" id="intime" value="" />
</fieldset>
<fieldset>Out-Time:
<input class="input" type="text" name="OutTime" id="outtime" value="" />
</fieldset>
<fieldset> Day:
<input class="input" type="text" id="day" name="Day" value="" />
</fieldset>
Write your script as below:-
$(document).ready(function (){
$('#intime,#outtime').on('input', function() {
// declare variables
var intime = $("#intime").val() || 0;; // get value of intime
var outtime= $("#outtime").val() || 0;; // get value of outtime
var day = 0; // declare day as 0
if (intime == 08:00:00 && outtime >= 18:00:00) {
day == 1;
}else if (intime == 08:00:00 && outtime == 12:30:00) {
day == 0.5;
}else (intime == 12:30:00 && outtime >= 18:00:00) {
day == 0.5;
};
});
});
Get the value of intime and outtime. and check the syntax errors in your code there are multiple.
<script>
$(document).ready(function (){
$('#intime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
$(document).ready(function (){
$('#outtime').on('input', function() {
var intime = $("#intime").val();
var outtime= $("#outtime").val();
if (intime == '08:00:00' && outtime >= '18:00:00') {
day == 1;
}else if (intime == '08:00:00' && outtime == '12:30:00') {
day == 0.5;
}else if(intime == '12:30:00' && outtime >= '18:00:00') {
day == 0.5;
}
});
});
});
</script>
I'm trying to validate a Birthday date but I can only validate if all filled in.
If I just choose date, there is no alert ("day must be chosen / month must be chosen").
I can't validate a date...
How to run this validation?
function isbday(day,month,year) {
var mth = month;
var dy = day;
var yr = year;
if((mth < 1) || (mth > 12));
else if((dy < 1) || (dy > 31));
else if(((mth == 4) || (mth == 6) || (mth == 9) || (mth == 11)) && (dy > 30));
else if((mth == 2) && (((yr % 400) == 0) || ((yr % 4) == 0)) && ((yr % 100) != 0) && (day > 29));
else if((mth == 2) && ((yr % 100) == 0) && (dy > 29));
else if((mth == 2) && (dy > 28)) valid = false;
return false;
alert("Birthdate must be filled");
}
function validate(){
var day = document.getElementsByName("xday")[0].value;
var month = document.getElementsByName("xmonth")[0].value;
var year = document.getElementsByName("xyear")[0].value;
if(day,month,year == null || day,month,year == ""){
alert("Birthdate must be filled");
}else if(birthdate.match(isbday(birthdate))){
alert("Birthdate must be filled");
}else
{
alert("Birthdate success");
}
}
<tr>
<td >Birthdate </td>
<td><select name="xday">
<option value="">Date</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1; i < 32; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<select name="xmonth">
<option value="">Month</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1; i < 13; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<select name="xyear">
<option value="">Year</option>
<script>
var myDate = new Date();
var year = myDate.getFullYear();
for(var i = 1950; i < year; i++){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
</td>
</tr>
<tr>
<td>
<input type="button" name="btnRegis" onClick="validate()" onsub value="Register"/>
</td>
</tr>
I think the best way is to change the day select according to the month that was selected but if you still want to do it the same way:
Change a little bit your valid function
Each if statement return false if not valid
function isVaild(day, month, year) {
var mth = month;
var dy = day;
var yr = year;
//Checks
if ((mth < 1) || (mth > 12)) return false;
else if ((dy < 1) || (dy > 31)) return false;
else if (((mth == 4) || (mth == 6) || (mth == 9) || (mth == 11)) && (dy > 30)) return false;
else if ((mth == 2) && (((yr % 400) == 0) || ((yr % 4) == 0)) && ((yr % 100) != 0) && (day > 29)) return false;
else if ((mth == 2) && ((yr % 100) == 0) && (dy > 29)) return false;
else if ((mth == 2) && (dy > 28)) return false;
//Pass all checks
return true;
}
function validate() {
var day = document.getElementsByName("xday")[0].value;
var month = document.getElementsByName("xmonth")[0].value;
var year = document.getElementsByName("xyear")[0].value;
//if one is empty
if (day, month, year === null || day, month, year === "") {
alert("Birthdate must be filled\nDay, Month, Year is empty");
}
//if not a vaild date
else if (!isVaild(day, month, year)) {
alert("Birthdate not vaild");
}
//All good :)
else {
alert("Birthdate success");
}
}
Working example here