Level 63
Are you refreshing / redirecting your page ?
Dec 25, 2022
4
Level 1
setAttribute doesn't persist upon filling out the next form field
I have an html form where some of the calculations are done by the setAttribute function. But whenever I fill out the next field, the calculated amounts do not persist. For example:
- First field is total amount - e..g $100
- Then next field is bunch of radio buttons - e.g. 10%, 25%, 50%, 75%, 100%. The default is 50%
- There are two readonly fields (amount_one and amount_two) that are populated by setAttribute based on whichever radio button is selected in step 2. For example, with default 50% - amount_one is $50 and amount_two is $50. But if I select 25%, then amount_one is $75 and amount_two is $25
- The code for step 1 - 3 works fine.
- Below the Step 3, I have a note field that is of type textarea. Whenever I type something in this field, the value of amount_one and amount_two in step 3, goes back to to default i.e. $50 each. The radio button selected in step 2 stays at 25%.
How do I make step 3 values persist to calculated amount?
Below is the partial javascript code used for Steps 1 -3.
var radval = 0.25; // Value selected by the radio buttion
var amount = document.getElementById("total_amount");
responsible = radval * amount.value;
yourshare = amount.value - responsible;
let resp = responsible.toFixed(2);
let ysha = yourshare.toFixed(2);
document.getElementsByName("amount_two")[0].setAttribute('value', resp);
document.getElementsByName("amount_one")[0].setAttribute('value', ysha);
Level 1
@vincent15000 No. All I am doing is filling out the next field in the form. There are two fields followed by the fields updated by setAttribute.
- Image field
- Text area Either of them when populated, the setAttribute values go back to default 50%. Even though the radio button is still checked at 25%.
1 like
Level 63
@singh Show the JS code related to the textarea please.
Level 1
@vincent15000 There is no other js code. Basically, any other field I edit, the two calculated fields go back to default. The only time these two values should change should be when i change the original amount or the split percentage. I am including both the HTML and JS code.
Below are the list of fields after the radio button.
<div class="mb-3 row align-items-center">
<label for="expense_amount_parent_one" class="col-sm-2 col-form-label">Your Share($)</label>
<div class="col-sm-2">
<input type="number" step="0.01" name="expense_amount_parent_one" class="form-control" id="expense_amount_parent_one" value="" readonly >
</div>
<label for="expense_amount_parent_two" class="col-sm-2 col-form-label">Their Share($)</label>
<div class="col-sm-2">
<input type="number" step="0.01" name="expense_amount_parent_two" class="form-control" id="expense_amount_parent_two" value="" readonly>
</div>
<div class="col-sm-4">
</div>
</div>
<div class="mb-3 row align-items-center">
<label for="gender" class="col-sm-2 col-form-label">Receipt (optional)</label>
<div class="col-sm-4">
<input class="form-control" type="file" id="image" name="image" placeholder="image">
</div>
<div class="col-sm-6">
</div>
</div>
<div class="mb-3 row align-items-center">
<label for="gender" class="col-sm-2 col-form-label">Message(optional)</label>
<div class="col-sm-4">
<textarea class="form-control" id="expensenote" name="expensenote" value="" rows="3"></textarea>
</div>
<div class="col-sm-6">
</div>
</div>
Below is the Javascript.
<script>
document.body.addEventListener('change', function (e) {
let target = e.target;
let responsible;
let radval = 0.5;
let yourshare;
switch (target.id) {
case '100':
radval = 100/100;
break;
case '50':
radval = 50/100;
break;
case '25':
radval = 25/100;
break;
case '75':
radval = 75/100;
break;
case '33':
radval = 33/100;
break;
case '0':
radval = 0;
break;
}
var amount = document.getElementById("expense_amount");
responsible = radval * amount.value;
yourshare = amount.value - responsible;
let resp = responsible.toFixed(2);
let ysha = yourshare.toFixed(2);
document.getElementsByName("expense_amount_parent_two")[0].setAttribute('value', resp);
document.getElementsByName("expense_amount_parent_one")[0].setAttribute('value', ysha);
});
</script>
Please or to participate in this conversation.