I am trying to add a timestamp in the checkbox input field as a value. But its always shows the same value.
How to add a different value ( Blank ) while unchecking?
Here is he HTML Code,
<div class="flex items-center mb-4 newsletter-check">
<input type="checkbox" id="newsletter" name="join-my-newsletter" class="form-check" value="Yes">
<label class="form-check-label" for="newsletter">Join my newsletter</label>
</div>
I used the javascript
$(function() { // when page loads
var timeNow = new Date().getTime();
$(".newsletter-check input[type='checkbox']").on("click",function() {
if (this.checked) $("#newsletter").attr('value', + timeNow );
});
});
You can try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".newsletter-check input[type='checkbox']").on("click",function() {
var timeNow = new Date().getTime();
if ($(this).prop('checked')==true){
$("#newsletter").attr('value', timeNow );
alert(timeNow);
}else{
$("#newsletter").attr('value', '');
}
});
});
</script>
</head>
<body>
<div class="flex items-center mb-4 newsletter-check">
<input type="checkbox" id="newsletter" name="join-my-newsletter" class="form-check" value="Yes">
<label class="form-check-label" for="newsletter">Join my newsletter</label>
</div>
</body>
</html>Timestamp gets set on page load so it does not update.
You can move the timestamp declaration inside the click event so it gets updated whenever you trigger the checkbox.
$(function() { // when page loads
$(".newsletter-check input[type='checkbox']").on("click",function() {
var timeNow = new Date().getTime();
console.log(timeNow);
if (this.checked) $("#newsletter").attr('value', + timeNow );
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="flex items-center mb-4 newsletter-check">
<input type="checkbox" id="newsletter" name="join-my-newsletter" class="form-check" value="Yes">
<label class="form-check-label" for="newsletter">Join my newsletter</label>
</div>