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

Question

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

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

目前，它仅适用于 table 中的第一行。如果用户填写第一行以外的任何其他行并单击买入或卖出输入表单值 returns 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，我尝试根据按钮 he/she 的点击执行用户的操作，例如，如果用户点击购买按钮，然后我将“/购买”操作添加到形式。

$(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 找到多个值但只能找到 return 个值，所以它只取第一个（除了第一行之外的所有值都是不正确的）。

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

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

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

How can I perform a form action with a button next to it for multiple rows using Javascript and HTML?

html

javascript

jinja2

flask

cs50