checkbox doesnt have a value php - php

Question

I'm trying to turn a input into a checkbox on my form. When checked I want the value to be 1 and unchecked to be zero. I tried a few things but on submit the value doesnt get added into the db.
HTML-1:
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active"><?php echo $entry_active; ?></label>
<div class="input-active required">
<input type="checkbox" name="active" value="0" placeholder="<?php echo $text_active; ?>" id="input-active" class="form-control" />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>ut type="checkbox" name="active" value="0" placeholder="<?php echo $text_active; ?>" id="input-active" class="form-control" />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
HTML-2:
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active"><?php echo $entry_active; ?></label>
<div class="input-active required">
<input type="hidden" name='active' value='0' placeholder="<?php echo $text_active; ?>" id="input-active" class="form-control" />
<input type="checkbox" name='active' value='1' placeholder="<?php echo $text_active; ?>" id="input-active" class="form-control" />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
I tried a few Javascripts solutions but none worked:
<script type="text/javascript">
$('#input-active').on('change', function(){
this.value = this.checked ? 1 : 0;
// alert(this.value);
}).change();
</script>
UPDATE!!
Still not working I've changed code following suggestions still not doing what I'd like.
New HTML:
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active"><?php echo $entry_active; ?></label>
<div class="input-active required">
<input type="checkbox" name='active' value='0' placeholder="<?php echo $text_active; ?>" id="input-active" class="form-control" />
</div>
<?php if (isset($error_date_starting)) { ?>
<label class="text-danger"><?php echo $error_code; ?></label>
<?php } ?>
</div>
New JS:
<script type="text/javascript">
$("#input-active").change(function() {
if(this.checked) {
$("#input-active").val('1');
} else {
$("#input-active").val('0');
}
});
</script>

Answer 1

To catch the toggled event on input type please use the following function
$("#input-active").change(function() {
if($(this).is(':checked')) {
console.log('checked')
$(this).val(1);
} else {
console.log('un checked')
$(this).val(0);
}
console.log($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-sm-push-1 form-group required">
<label class="control-label" for="input-active">In active</label>
<div class="input-active required">
<input type="checkbox" name='active' value='0' placeholder="Active" id="input-active" class="form-control" />
</div>
</div>