CODEWITHSUNDEEP
javascripthtml
user550738
user550738

Reputation:

how to pass contents of an html table as form data on a POST?

I have a list of groups in a <select> and a <input type="button" value="Add Selected"> to add the selected group to a <table> of values.

The list of groups that's been added is displayed in a <table>, rows are dynamically added by javascript on each click of the "Add Selected" button. Each row in the table has a "remove" link that removes the item from the table.

Everything works fine, except now I want to POST the contents of the table to a URL, and I'm not sure how to do this.

Should I add an hidden field for each row in the table? Or is there a better way to do this?

Any suggestions are greatly appreciated!

Rob

Upvotes: 17

Views: 59727

Answers (5)

Javier Gutierrez
Javier Gutierrez

Reputation: 559

I have done it:

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);
                }
        )
    }

in the controller

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

So It's my 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;
}

I'm using it and it's too usefull, hope it help you too

Upvotes: 6

khaled_webdev
khaled_webdev

Reputation: 1430

name of select as array by adding [] like this

<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>

i think after submit you will have an array in your $_POST named for this example modules

Upvotes: 0

Zachary
Zachary

Reputation: 6532

I did something like this the other day, my solution was to create an array of objects from my table that I could sent to a web service. The web service should expect an array of objects.

// 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;
}

Upvotes: 2

Michael Durrant
Michael Durrant

Reputation: 96484

<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>

Upvotes: 2

Michael Robinson
Michael Robinson

Reputation: 29498

Wrap your table in a form and put the data you want to post but not display to the user in hidden inputs

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

Upvotes: 12

Related Questions