如何在POST上传递html表的内容作为表单数据?

时间:2012-05-07 20:59:31

标签: javascript html

我在<select><input type="button" value="Add Selected">中有一个群组列表,可将所选群组添加到<table>个值中。

已添加的组列表显示在<table>中,每次单击“添加所选项”按钮时,javascript会动态添加行。表格中的每一行都有一个“删除”链接,可以从表格中删除该项目。

一切正常,但现在我想将表的内容发布到URL,我不知道该怎么做。

我应该为表格中的每一行添加隐藏字段吗?或者有更好的方法吗?

非常感谢任何建议!

罗布

5 个答案:

答案 0 :(得分:10)

将表格包裹在表格中,并将要发布的数据放入隐藏的输入中但不显示给用户

<form method="post" action="">
    <!-- your table -->
    <input type="hidden" name="name" value="your value"/>
    <button type="submit">Post</button>
</form>

答案 1 :(得分:6)

我做到了:

function sendTableArticles() {
        var columns = [
            'articulo.id',
            'articulo.descripcion',
            'unidadMedida.descripcion',
            'precio',
            'importe',
            'totalRequerido',
            'totalIngresado'
        ];

        var tableObject = $('#table_articles tbody tr').map(function (i) {
            var row = {};
            $(this).find('td').each(function (i) {
                var rowName = columns[i];
                row[rowName] = $(this).text();
            });

            return row;
        }).get();


        $.post('@{OrdenComprasDetalles.update()}',
                {objects:tableObject},
                function (response) {
                    console.log(response);
                }
        )
    }
控制器中的

public static void update(List<OrdenCompraDetalle> objects){
        int i=0;
        renderJSON(i);
    }

所以这是我的DTO

@Entity(name = "ordencompradetalle")
public class OrdenCompraDetalle extends AbstractTableMapper {

    @ManyToOne
    public Articulo articulo;

    public Float precio;

    public Float importe;

    public Boolean ingresado;

    @Column(name = "total_requerido")
    public Float totalRequerido;

    @Column(name = "total_ingresado")
    public Float totalIngresado;

    @ManyToOne
    public OrdenCompra ordenCompra;

    @ManyToOne
    public UnidadMedida unidadMedida;

    @OneToMany(mappedBy = "ordenCompraDetalle")
    public List<Movimiento> movimientos;
}

我正在使用它并且它太有用了,希望它也能帮到你

答案 2 :(得分:3)

<form method="post" action="your_server_action">
  <table>
    <!-- Table row display elements -->
    <input type="hidden" name="name" value="your value"/>
  </table>
  <input type="submit" value="Submit"/>
</form>

答案 3 :(得分:3)

前几天我做了类似的事情,我的解决方案是从我的表中创建一个可以发送到Web服务的对象数组。 Web服务应该期望一组对象。

// Read all rows and return an array of objects
function GetAllRows()
{
    var myObjects = [];

    $('#table1 tbody tr').each(function (index, value)
    {
        var row = GetRow(index);
        myObjects.push(row);
    });

    return myObjects;
}

// Read the row into an object
function GetRow(rowNum)
{
    var row = $('#table1 tbody tr').eq(rowNum);

    var myObject = {};

    myObject.ChangeType = row.find('td:eq(1)').text();
    myObject.UpdateType = row.find('td:eq(2)').text();
    myObject.CustomerPart = row.find('td:eq(3)').text();
    myObject.ApplyDate = row.find('td:eq(9)').text();
    myObject.Remarks = row.find('td:eq(10)').text();

    return myObject;
}

答案 4 :(得分:1)

通过像这样添加[]来选择数组的名称

<select name="modules[]" id="modules" class="inputbox" size="10" multiple="multiple">
<option value="1">Module 01</option>
<option value="2">Module 02</option>
<option value="3">Module 03</option>
</select>

我认为在提交之后,您将在$ _POST中为此示例模块

命名一个数组