如何使用 Javascript 和 HTML 为多行执行带有按钮的表单操作？

Question

所以，我有一个 html 表，其中有一些行。每次用户购买东西时都会添加额外的行。对于每一行，都有一个相应的输入表单，后跟买入和卖出按钮。

我想要实现的是，如果用户想再次购买或出售某物，他可以输入所需的数量并执行他/她的操作，只需点击索引页面上的买入或卖出按钮即可。但是，也有购买和出售页面，用户也可以从中执行他/她想要的操作。我正在使用我在索引页面内的买入和卖出页面中使用的表单操作。

目前，它仅适用于表格中的第一行。如果用户填写除第一行之外的任何其他行并单击买入或卖出输入表单值返回 null。

我已经研究过的问题：

Multiple rows have multiple submit buttons, should I make a form for each button?

How do I implement Multiple Submit Buttons for a multi-row form?

Multiple submit buttons in an HTML form

这是我的网站的样子： Index Page

这是我的 index.html：

{% extends "layout.html" %}

{% block title %}
Summary
{% endblock %}

{% block main %}
<div id="alertId" class="alert alert-warning alert-dismissible fade show" role="alert" style="display:none">
    <p id="alertContentId"></p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
          <th scope="col">Symbol</th>
          <th scope="col">Shares</th>
          <th scope="col">Price</th>
          <th scope="col">Total</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        {% for stock in ownings %}
        <tr>
            <td>{{ stock["symbol"].upper() }}</td>
            <td>{{ stock["share_amount"] }}</td>
            <td>{{ stock["price"] | usd }}</td>
            <td>{{ stock["stock_total"] | usd }}</td>
            <td>
                <form id="action_form" method="post">
                    <span class="form-group">
                        <input id="share_quantity" autocomplete="off" autofocus class="form-control" name="shares" placeholder="Shares" type="number" min="1">
                        <input value="{{ stock["symbol"] }}" type="hidden" name="symbol">
                    </span>
                    <button id="btn_buy" class="btn btn-primary" type="submit" data-action="buy">Buy</button>
                    <button id="btn_sell" class="btn btn-primary" type="submit" data-action="sell">Sell</button>
                </form>
            </td>
        </tr>
        {% endfor %}
        <tr>
            <td>CASH</td>
            <td></td>
            <td></td>
            <td>{{ cash | usd }}</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><strong>{{ grand_total | usd}}</strong></td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>
<script src="{{url_for('static', filename='button.js')}}"></script>
{% endblock %}

这是我的buy.html：

{% extends "layout.html" %}

{% block title %}
Buy
{% endblock %}

{% block main %}
<form action="/buy" method="post">
    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="symbol" placeholder="Symbol" type="text">
    </div>
    <div class="form-group">
        <input autocomplete="off" autofocus class="form-control" name="shares" placeholder="Shares" type="number" min="1">
    </div>
    <button class="btn btn-primary" type="submit">Buy</button>
</form>
{% endblock %}

这是我的 sell.html：

{% extends "layout.html" %}

{% block title %}
Sell
{% endblock %}

{% block main %}
<form action="/sell" method="post">
    <div class="form-group">
        <select class="form-control" name="symbol">
            <option disabled selected value="">Symbol</option>
            {% for symbol in available_symbols %}
            <option value="{{ symbol["symbol"] }}">{{ symbol["symbol"].upper() }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group">
        <input autocomplete="off" class="form-control" min="0" name="shares" placeholder="Shares" type="number">
    </div>
    <button class="btn btn-primary" type="submit">Sell</button>
</form>
{% endblock %}

这是我的 button.js，我尝试根据他/她单击的按钮执行用户的操作，例如，如果用户单击购买按钮，那么我将“/购买”操作添加到表单。

$(document).ready(function() {
$("button").click(function() {
    var action = $(this).data('action'); // get button's action
    // var share_quantity = document.getElementById("share_quantity").value;

    if (document.getElementById("share_quantity").value == "") {
        alert("enter a valid  value");
    }

    if (action == "sell") {
            document.getElementById("action_form").action = "/sell"; // change form's action to sell
            // document.getElementById("alertId").style.display = "block";
            // document.getElementById("alertContentId").innerHTML = "You sold " +share_quantity + " amount of shares!";
    } else if (action == "buy") {
            document.getElementById("action_form").action = "/buy"; // change form's action to buy
    }
});
});

Answer 1

问题是所有输入、表单等都具有相同的 ID； DOM 不喜欢这样。因为getElementById 找到多个值但只能返回一个，所以它只取第一个（除了第一行之外的所有行都不正确）。

我建议放置一些唯一 ID (stock["id"]?) 并添加具有该值的 data-id 属性并根据该值选择正确的对象，或者从名称本身中提取该值（您可以访问按钮因此到按钮 ID）。您需要稍微更改您的代码（不太确定用于 startwith 的 jQuery 选择器是什么，但它确实存在），但这应该不难。

或者（尽管我不鼓励这样做）您可以使用事件中的数据来查找单击按钮的父窗体并从中提取值。 这很难调试和维护。