We Keep Coding

Display text / Number in the Input based on selected days and weekends

I want to display the amount in the textbox based on the date selected.For weekdays amount is 200 on sundays amount is 500. How can I do it in jquery? Whether it is possible to do?
How can I do it in jquery?
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

Use getDay. Add a event listener to to input change then each time the input changes create a new Date and then use the getDay function that returns the day number (0 for Sunday).
Then you can put a conditional statement to change the form-control selector.
$(function() {
$("#txtDate").change(function() {
var selDate = new Date(this.value);
if (selDate.getDay() == 0) { //If sunday, can change your logic here
$(".form-control").val(5000);
} else {
$(".form-control").val(2000);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

A simple version
$(function() {
$("#txtDate").change(function() {
var dow = new Date(this.value).getDay();
$(".form-control").val(dow === 1 || dow ===6 ? 2000 : 5000);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="mass_date" id="txtDate" required="required" class="col-md-12" />
<input type="text" class="form-control" id="slDay" name="amount" />

Second date greater than first date in javascript

I have 2 date inputs i would like the min of checkout to be set to the value of checkin.
Check In
<input type="date" id="checkIn" name="checkIn">
Check out
<input type="date" id="checkOut" min="" name="checkOut">
The idea is to have the check out date to be greater than the check in date after the user enters the first date.
I have tried using a something like this (works on numbers but not dates)
function updatedate() {
var firstdate = document.getElementById("checkIn").value;
document.getElementById("checkOut").min = firstdate;
}
Using onclick for the input.
Any suggestions would be great thank you.

Try this
<label>Check In</label>
<input type="date" id="checkIn" name="checkIn" onchange="updatedate();">
<label>Check out</label>
<input type="date" id="checkOut" min="" name="checkOut">
-
function updatedate() {
var firstdate = document.getElementById("checkIn").value;
document.getElementById("checkOut").value = "";
document.getElementById("checkOut").setAttribute("min",firstdate);
}

Your code works for setting the minimum. Use the 1st input change event to update the 2nd input minimum, instead of click:
var checkIn = document.getElementById('checkIn');
var checkOut = document.getElementById('checkOut');
checkIn.addEventListener('change', updatedate);
function updatedate() {
var firstdate = checkIn.value;
checkOut.min = firstdate;
}
#checkOut:invalid {
color: red;
}
<div>When the checkOut is less than the checkIn, the checkout color will change to red</div>
<label>Check in</lable>
<input type="date" id="checkIn" name="checkIn">
<label>Check out</lable>
<input type="date" id="checkOut" min="" name="checkOut">

How to populate a form box with javascript based on other form box inputs

I have a form with four number inputs: hourly wage, hours worked, number of weeks, and salary.
I want to automatically fill-in the salary box based on the inputs from wage, hours, and weeks boxes.
So in theory, if hourly wage = 15, hours worked = 40, and number of weeks = 52 then the salary form box should automatically be set to "31200"
Any simple way to do this with javascript? I have tried a few different methods and can't seem to get it to work.
If it helps, I have already set all the form boxes to variables:
var wageBox = document.forms[0].wage;
var hoursBox = document.forms[0].hours;
var weeksBox = document.forms[0].weeks;
var salaryBox = document.forms[0].salary;
Edit: sorry, here's the HTML form code:
<fieldset id="incomeinfo">
<label for="wage">
Hourly wage:
<input type="number" id="wage" name="wage" placeholder="e.g. 15.00">
</label>
<label for="Hours">
Hours worked each week:
<input type="number" id="hours" name="hours" value="40" placeholder="e.g. 40">
</label>
<label for="Weeks">
Number of weeks a year:
<input type="number" id="weeks" name="weeks" value="52" placeholder="e.g. 52">
</label>
<br />
<br />
<label for="salary">
Salary:
<input type="number" id="salary" name="salary" placeholder="e.g. 31200" required>
</label>
</fieldset>

You can add a event for when the inputs change and calculate the salary based off of their values. Quick mock up.
Fiddle: http://jsfiddle.net/AtheistP3ace/6uatoyd2/
JS:
function calculateSalary () {
// Get all values we need to calculate
var wage = parseInt(document.getElementById('wage').value, 10);
var hours = parseInt(document.getElementById('hours').value, 10);
var weeks = parseInt(document.getElementById('weeks').value, 10);
// Calculate salary
var salary = wage * hours * weeks;
// Only update salary if we got number
if (!isNaN(salary)) {
document.getElementById('salary').value = salary;
}
}
// Get all inputs, loop and attach change event with calculateSalary handler
var inputs = document.getElementsByTagName('input');
var index = 0, length = inputs.length
for ( ; index < length; index++) {
inputs[index].addEventListener('change', calculateSalary);
}
HTML:
<input type="text" id="wage" placeholder="wage" />
<input type="text" id="hours" placeholder="hours" />
<input type="text" id="weeks" placeholder="weeks" />
<input type="text" id="salary" placeholder="salary" />
EDIT: Updated fiddle using your HTML. Same code works.
http://jsfiddle.net/AtheistP3ace/6uatoyd2/1/

webshims validate 000-00-00 date on submit

I would like to validate an input date with a null value like this
<input type="date" value="0000-00-00" id="date" />
On submit I have a this logical message 'Please enter a date.'
I found something like this http://jsfiddle.net/trixta/zRGd9/embedded/result,html,js,css/.
If you know how to do this, here is a sample http://jsfiddle.net/zRGd9/24/

This is simply not a date and depending of the browser implementation this value is either emptied or considered a badInput or a typeMismatch.
If you want to use this you have the following options:
Strictly empty it yourself:
$('input[type="date"]')
.on('change.empty', function () {
var val = $.prop(this, 'value');
if (!val || val == '0000-00-00') {
$.prop(this, 'value', '');
}
})
.trigger('change.empty')
;
Set a novalidate attribute:
```
<form novalidate="">
<!-- ... -->
</form>
Use a different input if you also want to allow non valid date:
```
<input type="number" min="0" max="31" />
<input type="number" min="0" max="12" />
<input type="number" min="0" max="9999" />

javascript or jQuery function for interaction between input fields value

I have a html form where people can enter number of purchase item. Default value of that text field is 1.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
I want another text input field for price where the value would be 15 times of position automatically.
For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Is it possible?
Thanks a lot for your help.

simple .. use javascript functions and onkeyup
<script type="text/javascript">
function updatePrice(amount, element){
var amount = parseInt(amount);
if(!amount) amount = 0;
var toUpdate = amount*15;
document.getElementById(element).value = toUpdate;
}
</script>
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position" onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">

Here is the YUI3 version:
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function(Y) {
var priceNode = Y.one("#price");
var positionNode = Y.one("#position");
positionNode.on("change", function(e) {
priceNode.set("value", positionNode.get("value")*15);
});
});
</script>

Working demo: http://jsfiddle.net/YgheP/
Made it for specific scenario but you can tweak it to your needs.
Hope it feeds your cause. :)
also look for isNaN check and float value as well! parseFloat(string)
code
$('#position').keyup(function() {
var price = parseInt(this.value) * 15;
$('#price').prop('value', price);
});​

if you are using jquery then by using plugin formInteract, you just need to do this.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">
at bottom of the page just include this plugin file, everything else will be done itself.
here is the link to project
https://bitbucket.org/ranjeet1985/forminteract
You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project

You can use this code to attach a eventhandler that will solve your problem:
$("#position").bind("change", function(){
$("#price").val(parseInt($("#position").val()) * 15);
});
Hope that helps