如何在rails中将html表传递给控制器​​?

时间:2018-10-03 14:31:56

标签: javascript html ruby-on-rails

我第一次在Rails中进行百货商店自动化项目,因此在生成账单时遇到一些问题。我想将表格的所有详细信息发送到我的控制器,在这里我可以计算购物车价格和总价。即使有其他方法可以克服这种情况,也请帮助我。

    <html>
    <head>
    <style>
    * {box-sizing: border-box}
    label {
        cursor: default;
        color:black;
        font-size: 15px;
    }

    .form-row {
        padding: 5px 10px;
        margin: 5px 0;
    }

    p {
        color:black;
    }

    h1  {
        color:black;
    }

    /* Set height of body and the document to 100% */
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial;
        background-color: white;
    }
    .container {
        padding: 16px;
        background-color: white;
        text-align: left;
        font-size: 15px;
        margin-top: 100px;
    }
    table {
        width: 500px;
        font-size: 30px;
        border: 5px solid blue;
    }

    th, td {
        text-align: left;
        padding: 8px;
    }

    td {
        color: black;
    }

    tr:nth-child(odd){background-color: #ffffb3}

    th {
        background-color: #4000ff;
        color: white;
    }
    input:invalid + span:after {
        content: '✖';
        color: #f00;
        padding-left: 5px;
    }

    input:valid + span:after {
        content: '✓';
        color: #26b72b;
        padding-left: 5px;
    }

    </style>
    </head>
    <body bgcolor="white">
    <div id="POItablediv" class="container">
    <form name="genbill" method="get" action="genCartAction">
        <table border="1">
            <tbody id="POITable">
            <tr>            
                <td>CATEGORY ID</td>
                <td>NUMBER OF PRODUCTS</td>
                <td>DELETE PRODUCT</td>
                <td>ADD PRODUCT</td>
                <td>ACTIONS</td>
            </tr>
            <tr>
            <form name="genbill" method="get" action="genCartAction">
                <td> <SELECT NAME="cid" >
                    <% for x in @cid %>
                    <OPTION VALUE="<%= x %>" ><%= x %></OPTION>
                    <% end %></SELECT><br>
                </td>
                <td><input type="text" name="nop"></td>
                <td><input type="button" value="DELETE PRODUCT" data-cmd="delRow"></td>
                <td><input type="button" value="ADD PRODUCT" data-cmd="insRow"></td>
            </tr>
            </tbody>
        </table></form>

        <form name="genbill" method="get" action="genBillAction">
        <input type="text" name="bid" readonly hidden="true">
        <input type="submit" value="CLICK HERE TO GENERATE BILL" disabled="TRUE">
        </form>
    </div>
    <script>
    function tableClicks (e) {
        let cmd = e.target.getAttribute('data-cmd');
        if (cmd && (cmd in buttonEvents)) {
            buttonEvents[cmd](e);
        }
        return;
    }
    let table = document.getElementById('POITable');
    let buttonEvents = {
        insRow: function () {       
            var newRow = table.rows[1].cloneNode(true);
            table.appendChild(newRow);
            newRow.firstElementChild.textContent = newRow.rowIndex;
            return;
        },
        delRow: function (e) {
            var rowIdx = e.target.closest('tr').rowIndex,
                rows = null;
            if (rowIdx === 1) return; // Don't delete the first row
            table.deleteRow(rowIdx);
            // Update row numbers
            rows = table.rows;
            for (const row of rows) {
                let idx = row.rowIndex;
                if (idx < 1) continue; // Skip the header row
                row.firstElementChild.textContent = idx;
            }
            return;
        }
    };
    table.addEventListener('click', tableClicks);
    </script>
    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

如果仅是要计算总价,则应在javascript代码中进行操作,而不必为此而创建端点...