I have a form that I want to popup in Google Sheets. I am using the script editor to achieve this but for some reason this is not working
<html>
<body>
<form action="">
<input id='DP' type="text" class="form-control formBlock" name="maxDP" placeholder="Max DP Amount . . ." required/><br />
<input id='cost' type="text" class="form-control formBlock" name="cost" placeholder="Cost . . ." required/><br />
<input id='finFee' type="text" class="form-control formBlock" name="financeFee" placeholder="Finance Fee . . ." required/><br />
<input id='rqComm' type="hidden" class="form-control formBlock" name="rqComm" placeholder="RQ Commission . . ." required/><br />
<br /><br />
Total GP: <span id="total_gp"></span>
<br />
</form>
<script>
$('input').keyup(function(){
var maxDP = Number($('#DP').val());
var rqComm = Number($('130').val());
var cost = Number($('#cost').val());
var financeFee = Number($('#finFee').val());
$('#total_gp').html(maxDP + rqComm - cost - financeFee);
});
</script>
</body>
</html>
The above does not output any data. It should work on keyup from my understanding of JS.
What seems to be wrong with this javascript?
I was able to figure out how to get this to work. I had changed one of the lines in the JS to 130. This was trying to call that field but broke my script. I added a value to the form and changed the JS to reflect this and all is working now. Below is my script Working Script
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<input id='dpMax' type="text" class="form-control formBlock" name="bus_ticket" placeholder="DP Max..." required/>
<input id='cost' type="text" class="form-control formBlock" name="plane_ticket" placeholder="Cost..." required/>
<input id='fee' type="text" class="form-control formBlock" name="hotel_expenses" placeholder="5% Fee..." required/>
<input id='rqComm' type="hidden" class="form-control formBlock" name="eating_expenses" value="130" placeholder="RQ Commisson..." required/>
<br />
Total: <span id="total_expenses1"></span>
<br /><br />
</body>
<script>
$('input').keyup(function(){
var dpMax = Number($('#dpMax').val());
var cost = Number($('#cost').val());
var fee = Number($('#fee').val());
var rqComm = Number($('#rqComm').val());
$('#total_expenses1').html(dpMax + cost + fee + rqComm); // add them and output it
document.getElementById('total_expenses2').value = dpMax + cost + fee + rqComm; });
</script>
</html>