Update a table using javascript and arrays

Asked

Viewed 4,136 times

1

What I need to do is simple, but as I am a beginner in the art of PHP and Javascript, I am hitting myself a little.

What I need to do is the following. I have an order screen, where I will register the order data, until then, okay. Just below, I will insert the products in the order, and they will be shown below to be saved as soon as the order is saved.

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

Does anyone have any idea or example of how to do this?

javascript php table

  • Ariel, just to clarify: when you say table you mean table in database right? you know what AJAX is? Do you have any javascript framework (jQuery, Mootools, etc) or do you want to do it with pure JS? Answer/explain these 3 questions better, gather the code you already have and you will have a very splendid answer I promise :)

  • It’s actually an HTML table. What I’m doing is an order screen. I select the product in a combo, click the "Insert in Order" button, and the product will appear in a table below. When I save the request, I will scan this table, whose data will be in an array (or something worth it) and insert it into the database.

3 answers

1

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

But if you can "wait" to send everything 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 like 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>Inserir Novo Telefone</h2>
    Nome: <input id="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 "register" phones in javascript, placing inside the div called "telephones". To send to the server we would still need to put these values in Forms, but you can generate these fields by changing the string inside the .append() to generate new inputs. I advise to study this library a little, it even facilitates the use of AJAX.

0

Here’s a hint with jquery. I don’t know if you use pure javascript, jQuery, Mootools or another 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();
});

Example

0

In a answer to another question, made an example of how to popular a table from a javascript array.

Functional code in Jsfiddle.

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

If you don’t want paging, just make a few minor adjustments to loop to remove limits related to the current page, that is, including all items.

Browser other questions tagged javascript php table

You are not signed in. Login or sign up in order to post.