I currently have the following HTML form;
<form method = "POST" action = "https://script.google.com/macros/s/AKfycbxjxbUoJes8WFs1ybMpsnYbaiJcFI1PkVFf0y0avSdKmsxtys7LKi6Zdr7tmWyw/exec" id = "groceryExpenses" style = "display:none" onsubmit='addExpense(); checkIfExpense();'>
<div class="row">
<div>
<label>Car Name</label>
<input name = "Car" id = 'carName' style = "width: 24%;" type="text" placeholder="Enter the car name" id="exampleEmailInput">
</div>
</div>
<div>
<div>
<label style = 'padding-bottom: 1pt;' for="exampleEmailInput">Gas Station</label>
<input name = "Gas Station" id="gasStation" style = "width: 24%;" type="text" placeholder="Enter the gas station" id="exampleEmailInput">
</div>
<label>Amount</label>
<input name = "Amount" id="amount" style = "width: 24%;" type="number" placeholder="Enter amount spent" id="exampleEmailInput">
</div>
<button type = 'submit' class="button-primary">Add expense</button>
<button type = 'button' class="button-primary" onclick="closeExpenseForm()">Close Form</button>
</form>
Upon submission, I would like to check if the inputs of gasStation and carName are not empty. If there are not, then amount will be turned to a negative number. I have tried the following;
function checkIfExpense(){
if (document.getElementById('gasStation').value.length !==0 && document.getElementById('carName').value.length !==0){
amount = Math.abs(amount)*-1; //I have instantiated this variable earlier in my JS file.
}
}
However, it does not seem to be working. How can I achieve this?
set that negative amount using:
document.getElementById('amount').value = amount
Try This:
function checkIfExpense(e) {
const gasStation = document.getElementById('gasStation').value;
const carName = document.getElementById('carName').value;
let amount = document.getElementById('amount').value;
if (!gasStation || !carName || gasStation == null || carName == null || gasStation == '' || carName == ''){
amount = amount ? Math.abs(amount)*-1 : 0;
console.log(amount);
document.getElementById('amount').value = amount;
}
}<div>
<label>Car Name</label>
<input name="Car" id='carName' style="width: 24%;" type="text" placeholder="Enter the car name" id="exampleEmailInput">
</div>
<div>
<label style = 'padding-bottom: 1pt;' for="exampleEmailInput">Gas Station</label>
<input name="Gas Station" id="gasStation" style = "width: 24%;" type="text" placeholder="Enter the gas station" id="exampleEmailInput">
</div>
<div>
<label>Amount</label>
<input name="Amount" id="amount" style="width: 24%;" type="number" placeholder="Enter amount spent" id="exampleEmailInput">
</div>
<button type='submit' onclick="checkIfExpense()" class="button-primary">Submit</button>I am not sure, what you are trying to achieve. But you can also do this...
function checkIfExpense(){
if (document.getElementById('gasStation').value.length !==0 && document.getElementById('carName').value.length !==0){
var amount = document.getElementById('amount');
amount = amount.value;
alert(-amount);
} }