Update a table using javascript and arrays

Question

Update a table using javascript and arrays

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

What I need to do is simple, but as I'm a beginner in the PHP and Javascript art, I'm beating myself a little.

What I need to do is the following. I have a screen of requests, where I will register the data of the request, until then, okay. Soon below, I will enter the products in the order, and they will be shown below to be saved as soon as the order is saved.

What I want to do is select a product in a combobox , click on the add product button, add this product to an array or something and show this array in a table just below. But I would like to do this without updating the page.

Does anyone have any ideas or examples of how to do this?

php javascript tabela

asked by anonymous 02.04.2014 / 14:28

3 answers

Return of select objects (ComboBox) with Hibernate + JSP + VRaptor. Does not fill relationship between tables Search within a session

score 1 · Answer 1

Do you really need to send each new product immediately to the server? If so, you will need to use some kind of AJAX to communicate with the server without reloading the page.

But if you can "wait" to get it all done at once, your problem becomes just javascript: just read the fields and insert a row in a table or an element in a div . This is greatly facilitated by libraries such as jquery , for example:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script></head><body><form><h2>InserirNovoTelefone</h2>Nome:<inputid="nome" type="text"/><br>
    Telefone: <input id="telefone" type="text"/><br>
    <input type="button" onclick="$('#telefones').append('<div>Nome: '+$('#nome').val()+' - Telefone: '+$('#telefone').val()+' </div>')" value="Adicionar" />
</form>

<div id="telefones">
    <h2>Telefones</h2>
</div>
</body>
</html>

This code "registers" phones in javascript, placing within div called " phones ". To send to the server we would still need to put these values into forms, but you can generate these fields by changing the string within .append() to generate new inputs. I advise you to study this library a bit, it even makes it easy to use AJAX.

score 0 · Answer 2

In a answer to another question , I did an example of how to populate a table from an array in javascript.

Functional code in Jsfiddle.

I suggest using this example as a basis. Just update the array and call the paging method to include the product.

If you do not want pagination, just make a few small adjustments to loop to remove boundaries related to the current page, ie including all items.

score 0 · Answer 3

Here is a suggestion with jery. I do not know if you use pure javascript, jQuery, Mootools or other Javascript library ...

$('#adicionarFruta').on('click', function () {
    var $fruta = $('#frutas option:selected');

    // ignorar se fôr a primeira opção do select
    if ($fruta.val() == '0') return false;

    // verificar se o produto já está na tabela
    if ($('#carrinhoCompras input[name^=' + $fruta.val() + ']').length) return false;

    var novaLinha = '\
    <tr> \
    <td>' + $fruta.text() + '</td> \
    <td><input name="' + $fruta.val() + '" value="1" /></td> \
    <td><button>-</button></td> \
    </tr> ';

    // adicionar nova linha à tabela
    $('#carrinhoCompras ').append($(novaLinha));
});

// codigo para o botão que remove linhas da tabela
$('#carrinhoCompras').on('click', 'button', function () {
    $(this).closest('tr').remove();
});

Update a table using javascript and arrays

3 answers

Functional code in Jsfiddle.

Example