How can I make my HTML form turn a positive number into a negative one?-CodePudding

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 >
  <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' >Add expense</button>
<button type = 'button'  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?

CodePudding user response：

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()" >Submit</button>

CodePudding user response：

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);

} }

CodePudding user response：

A variation of what you already have seems to work fine. Check if it's a number and then return the negative absolute value.

Run the code snippet, enter a value, and press return to try.

amount = isNaN(amount) ? 0: -Math.abs(amount)

Event Gas Station amount:
<input type="number" id="station" onchange="this.value=isNaN(this.value)?0:-Math.abs(this.value)"  />