0

I am trying to create a html page with JavaScript that would wait for a user to put in a certain set of letters ("A", "B", and "C".)

If a user types any of these letters into the text input area, they would have the following subtotal by letter:

  • "A" ($7.50)
  • "B" ($8)
  • "C" ($10)

My HTML code below has select input attributes with id's referred to as "badge"

I would like the code to when a certain character (referred above) is entered into the text fields, it calculates the amount for the select inputs and prints them in the placeholder within this element (- $ <input type="text" name="price" placeholder="0.00" readonly).

Any help would be greatly appreciated. Let me know if you need any more information. Thanks =)

Here's the question if it helps:

Based on the badge options chosen, calculations are needed to calculate the total cost of the order:

The amount for each badge option should be calculated and displayed

<tr>
  <th>1</th>
  <td><input type="text" id="bfname1" name="firstname1"></td>
  <td><input type="text" id="bsname1" name="surname1"></td>
  <td><input type="text" id="borank1" name="officerrank1"></td>
  <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
  <select name="badge" id="badge" onchange="updatePrice(this)">
  <option value="" selected>Select Badge</option>
  <option value="7.50">A</option>
  <option value="8.00">B</option>
  <option value="10.00">C</option>
  </select>
  - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
  </td>
</tr>
<tr>
  <th>2</th>
  <td><input type="text" id="bfname2" name="firstname2"></td>
  <td><input type="text" id="bsname2" name="surname2"></td>
  <td><input type="text" id="borank2" name="officerrank2"></td>
  <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
  <select name="badge" id="badge" onchange="updatePrice(this)">
  <option value="" selected>Select Badge</option>
  <option value="7.50">A</option>
  <option value="8.00">B</option>
  <option value="10.00">C</option>
  </select>
  - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
  </td>
</tr>
<tr>
  <th>3</th>
  <td><input type="text" id="bfname3" name="firstname3"></td>
  <td><input type="text" id="bsname3" name="surname3"></td>
  <td><input type="text" id="borank3" name="officerrank3"></td>
  <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
  <select name="badge" id="badge" onchange="updatePrice(this)">
  <option value="" selected>Select Badge</option>
  <option value="7.50">A</option>
  <option value="8.00">B</option>
  <option value="10.00">C</option>
  </select>
  - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
  </td>
</tr>
<tr>
  <th>4</th>
  <td><input type="text" id="bfname4" name="firstname4"></td>
  <td><input type="text" id="bsname4" name="surname4"></td>
  <td><input type="text" id="borank4" name="officerrank4"></td>
  <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
  <select name="badge" id="badge" onchange="updatePrice(this)">
  <option value="" selected>Select Badge</option>
  <option value="7.50">A</option>
  <option value="8.00">B</option>
  <option value="10.00">C</option>
  </select>
  - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
  </td>
</tr>
<tr>
  <th>5</th>
  <td><input type="text" id="bfname5" name="firstname5"></td>
  <td><input type="text" id="bsname5" name="surname5"></td>
  <td><input type="text" id="borank5" name="officerrank5"></td>
  <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
  <select name="badge" id="badge" onchange="updatePrice(this)">
  <option value="" selected>Select Badge</option>
  <option value="7.50">A</option>
  <option value="8.00">B</option>
  <option value="10.00">C</option>
  </select>
  - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
  </td>

Here is my javascript:

function updatePrice (element) {
    var price = price.value;
    document.getElementById('price').value = price;
  }
Improve this question
5
  • You essentially have the same form multiple times. You can forget ids here. Handling events in such a case works like this: jsfiddle.net/1veudfwc (also note the cleaned up HTML) Commented Apr 28, 2022 at 7:50
  • I should have sent the rest of the html, I sent only a snippet. I like what you have done and it would work except I have other <tr> elements within my code that are not within the function call, therefore running for all <tr> won't work. The reason I did not send all the html is due to there being way to much for me to send without making it hard to show the html that is having the issue. I can send the entire html seperately if that will help? Commented Apr 28, 2022 at 8:14
  • No, absolutely not. You need to understand how to approach this, get to know the entire toolbox and learn how to fix this yourself. For instance if it's all the same table, you would add a class to certain <tr>s, then use querySelectorAll('tr.badge') or something to only select badge rows. This is all really basic stuff, and it gets asked here on a daily basis. Please try to do your part to keep this website alive as a useful resource and only post if you are desperately stuck. Commented Apr 28, 2022 at 8:38
  • I had an issue where a 3D object would render as 70% black. I spent hours trying to fix it and was 🤏close to posting a question here. I spent more time instead, thought hard about the problem and suddenly realized that the engine was flipping my texture. Question avoided -> issue fixed -> feeling great Commented Apr 28, 2022 at 8:42
  • I got it working now. Thanks for your help Commented Apr 28, 2022 at 9:30

2 Answers 2

Reset to default
1

You have multiple error, the first one is ID must be unique, the second one you try to use price.value; but price doesn't exist you need to use element.value === selected value from select, and instead of use ID you can use nextElementSibling for input like:

function updatePrice(element) {
  var price = element.value;
  element.nextElementSibling.value = price;
}
<table>
  <tr>
    <th>1</th>
    <td><input type="text" id="bfname1" name="firstname1"></td>
    <td><input type="text" id="bsname1" name="surname1"></td>
    <td><input type="text" id="borank1" name="officerrank1"></td>
    <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
      <select name="badge" onchange="updatePrice(this)">
        <option value="" selected>Select Badge</option>
        <option value="7.50">A</option>
        <option value="8.00">B</option>
        <option value="10.00">C</option>
      </select>
      - $ <input type="text" name="price" placeholder="0.00" readonly>
    </td>
  </tr>
  <tr>
    <th>2</th>
    <td><input type="text" id="bfname2" name="firstname2"></td>
    <td><input type="text" id="bsname2" name="surname2"></td>
    <td><input type="text" id="borank2" name="officerrank2"></td>
    <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
      <select name="badge" onchange="updatePrice(this)">
        <option value="" selected>Select Badge</option>
        <option value="7.50">A</option>
        <option value="8.00">B</option>
        <option value="10.00">C</option>
      </select>
      - $ <input type="text" name="price" placeholder="0.00" readonly>
    </td>
  </tr>
  <tr>
    <th>3</th>
    <td><input type="text" id="bfname3" name="firstname3"></td>
    <td><input type="text" id="bsname3" name="surname3"></td>
    <td><input type="text" id="borank3" name="officerrank3"></td>
    <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
      <select name="badge" onchange="updatePrice(this)">
        <option value="" selected>Select Badge</option>
        <option value="7.50">A</option>
        <option value="8.00">B</option>
        <option value="10.00">C</option>
      </select>
      - $ <input type="text" name="price" placeholder="0.00" readonly>
    </td>
  </tr>
  <tr>
    <th>4</th>
    <td><input type="text" id="bfname4" name="firstname4"></td>
    <td><input type="text" id="bsname4" name="surname4"></td>
    <td><input type="text" id="borank4" name="officerrank4"></td>
    <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
      <select name="badge" onchange="updatePrice(this)">
        <option value="" selected>Select Badge</option>
        <option value="7.50">A</option>
        <option value="8.00">B</option>
        <option value="10.00">C</option>
      </select>
      - $ <input type="text" name="price" placeholder="0.00" readonly id="price">
    </td>
  </tr>
  <tr>
    <th>5</th>
    <td><input type="text" id="bfname5" name="firstname5"></td>
    <td><input type="text" id="bsname5" name="surname5"></td>
    <td><input type="text" id="borank5" name="officerrank5"></td>
    <td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
      <select name="badge" onchange="updatePrice(this)">
        <option value="" selected>Select Badge</option>
        <option value="7.50">A</option>
        <option value="8.00">B</option>
        <option value="10.00">C</option>
      </select>
      - $ <input type="text" name="price" placeholder="0.00" readonly>
    </td>
  </tr>
</table>

Reference:

Although we should keep the focus on one problem at a time I give you a little help for the last part when the letter changes as well as changing the value you should add / change the dataset so that you can then select each dataset and calculate the total price.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

So if I changed each ID to badge 1, badge 2 etc, instead of just badge, that would be better?
The real question is why you need that ID ? For answer your question you must have unique ID, don't use same name for multiple element
Also would you be able to explain further what is meant by this element.value === selected value from select? Thanks
Of course, in practice you call a function on each <select>, in the function the parameter is element so element will be the corresponding <select>, instead you were trying to use the variable you were creating to receive the value.
Okay that makes sense. I edited the code as per your suggestions but it still is not printing the amounts in the placeholders as needed. Any more suggestions. I can send the edited code if needed. Thanks for the help so far =)
|
0

As Simone said in their answer, you need IDs to be unique, So you could use the code like below

<table>
    <tr>
        <th>1</th>
        <td>
            <input type="text" id="bfname1" name="firstname1">
        </td>
        <td>
            <input type="text" id="bsname1" name="surname1">
        </td>
        <td>
            <input type="text" id="borank1" name="officerrank1">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" id="badge1">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly id="price1">
        </td>
    </tr>
    <tr>
        <th>2</th>
        <td>
            <input type="text" id="bfname2" name="firstname2">
        </td>
        <td>
            <input type="text" id="bsname2" name="surname2">
        </td>
        <td>
            <input type="text" id="borank2" name="officerrank2">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" id="badge2">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly id="price2">
        </td>
    </tr>
    <tr>
        <th>3</th>
        <td>
            <input type="text" id="bfname3" name="firstname3">
        </td>
        <td>
            <input type="text" id="bsname3" name="surname3">
        </td>
        <td>
            <input type="text" id="borank3" name="officerrank3">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" id="badge3">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly id="price3">
        </td>
    </tr>
    <tr>
        <th>4</th>
        <td>
            <input type="text" id="bfname4" name="firstname4">
        </td>
        <td>
            <input type="text" id="bsname4" name="surname4">
        </td>
        <td>
            <input type="text" id="borank4" name="officerrank4">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" id="badge4">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly id="price4">
        </td>
    </tr>
    <tr>
        <th>5</th>
        <td>
            <input type="text" id="bfname5" name="firstname5">
        </td>
        <td>
            <input type="text" id="bsname5" name="surname5">
        </td>
        <td>
            <input type="text" id="borank5" name="officerrank5">
        </td>
        <td class="form-element">
            <label for="badge3">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" id="badge5">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly id="price5">
        </td>
</table>
<script>
    function  updatePrice(priceId) {
        return e => document.getElementById(priceId).value = e.target.value;
    }
    Object.entries({
        "badge1": "price1",
        "badge2": "price2",
        "badge3": "price3",
        "badge4": "price4",
        "badge5": "price5",
    }).map(([badgeId, priceId]) => {
        console.log(badgeId, priceId)
        document.getElementById(badgeId).addEventListener('change', updatePrice(priceId))
    });
</script>

I've just changed each ID to a unique ID, and added the event listener in your code instead, and change the updatePrice function a little, so it's almost the same as your original code.

But when you have all these select inputs that are essentially the same, you shouldn't really be using IDs at all, and it would be better to use classes instead of IDs like this:

<table>
    <tr>
        <th>1</th>
        <td>
            <input type="text" id="bfname1" name="firstname1">
        </td>
        <td>
            <input type="text" id="bsname1" name="surname1">
        </td>
        <td>
            <input type="text" id="borank1" name="officerrank1">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr>
        <th>2</th>
        <td>
            <input type="text" id="bfname2" name="firstname2">
        </td>
        <td>
            <input type="text" id="bsname2" name="surname2">
        </td>
        <td>
            <input type="text" id="borank2" name="officerrank2">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr>
        <th>3</th>
        <td>
            <input type="text" id="bfname3" name="firstname3">
        </td>
        <td>
            <input type="text" id="bsname3" name="surname3">
        </td>
        <td>
            <input type="text" id="borank3" name="officerrank3">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr>
        <th>4</th>
        <td>
            <input type="text" id="bfname4" name="firstname4">
        </td>
        <td>
            <input type="text" id="bsname4" name="surname4">
        </td>
        <td>
            <input type="text" id="borank4" name="officerrank4">
        </td>
        <td class="form-element">
            <label for="badge">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
    </tr>
    <tr>
        <th>5</th>
        <td>
            <input type="text" id="bfname5" name="firstname5">
        </td>
        <td>
            <input type="text" id="bsname5" name="surname5">
        </td>
        <td>
            <input type="text" id="borank5" name="officerrank5">
        </td>
        <td class="form-element">
            <label for="badge3">Choose a Badge Type (A, B, or C)</label>
            <select name="badge" class="badge">
                <option value="" selected>Select Badge</option>
                <option value="7.50">A</option>
                <option value="8.00">B</option>
                <option value="10.00">C</option>
            </select>
            - $ <input type="text" name="price" placeholder="0.00" readonly class="price">
        </td>
</table>
<script>
    function updatePrice(event) {
        event.target.nextElementSibling.value = event.target.value;
    }
    [...document.getElementsByClassName('badge')]
        .forEach(badge => badge.addEventListener('change', updatePrice));
</script>
Improve this answer

12 Comments

Okay so I have edited the code like you suggested but it still does not print in the placeholders in these elements - $ <input type="text" name="price" placeholder"0.00" readonly class="price">
Is this what you wanted it to do? output.jsbin.com/yadiqop When I select an option, the price changes
Yes that is correct
That jsbin is using my code in the second example, this jsbin: output.jsbin.com/zaterir is using the code from the first example. You can see the code here: jsbin.com/zaterir/edit?html,output and here: output.jsbin.com/yadiqop/edit?html,output
Here is another one not using classes or IDs, just nextElementSibling jsbin.com/sohiqul/1/edit?html,console,output
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.