How to add rows to a table from another table with search engine

Question

How to add rows to a table from another table with search engine

Navigation

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

0

I am making a simple system for my business everything is going well until now that I get stuck, I hope you can help me I would be grateful enough, I explain a bit of my code and its function first.

I have this input that searches for the products in my database and displays them in a table.

ventasgen.php

   <center>
      Buscar producto por: <B>NOMBRE</B> o <B>CODIGO</B> <br><br>
      <input type="text" id="bus" name="bus" onkeyup="loadXMLDoc()" required autofocus/>
      <br><br>
      <div id="myDiv"></div>
   </center>


<br><br>
<div class="row-fluid sortable">        
    <div class="box span12">
        <div class="box-header" data-original-title>
            <h2><i class="icon-usd"></i><span class="break"></span>PRODUCTOS AGREGADOS</h2>
            <!--<div class="box-icon">
                <a href="add_new_compra.php"><i class="halflings-icon white plus"></i>
                    <h7 style="color: white;"" >XXXXX</h7>
                </a>
            </div>-->
        </div>
        <div class="box-content">
            <table border="1">
              <thead>
                  <tr>
                      <th>ID</th>
                      <th>Nombre Producto</th>
                      <th>Unidad Producto</th>
                      <th>Stock</th>
                  </tr>
              </thead>
              <tbody>
                    <tr>
                        <td>Aqui aparezca el id del producto</td>
                        <td>Aqui aparezca el nombre del producto</td>
                        <td>Aqui aparezca la unidad del producto</td>
                        <td>Aqui aparezca el stock</b></center></td>
                    </tr>
              </tbody>
          </table>            
        </div>
    </div><!--/span-->

</div><!--/row-->

my ajax_concuerdan.js file

function loadXMLDoc()
{
var xmlhttp;

var n=document.getElementById('bus').value;

if(n==''){
document.getElementById("myDiv").innerHTML="";
return;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ventasgenBUSCAR.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+n);
}

and my file salesgenBUSCAR.php

<?php
  @session_start();
  error_reporting(E_ALL ^ E_DEPRECATED);
  include("includes/connection1.php");
  $q=$_POST['q'];

  $res=mysqli_query($conn,"select * from 'tblproducts' 
    where nombre_producto LIKE '".$q."%'
    OR id_producto LIKE '".$q."%'
    OR CONCAT(nombre_producto,' ',unidad_producto) LIKE '".$q."%'
    ");


  if(mysqli_num_rows($res)==0){

    echo '<b>¡ NO EXISTEN PRODUCTOS CON ESA BUSQUEDA !</b>';
  ?>
  <!DOCTYPE HTML>
  <CENTER>
    <br>
    AGREGA EL PRODUCTO EN LA SECCION DE PRODUCTOS</a>
  </CENTER>


  <?php
  }else{
    echo '<b>Seleccionar producto:</b><br><br>';
  ?>

  <!DOCTYPE HTML>

  <table border="1px">
   <tr>
    <th>PRODUCTO </th>
    <th>PRESENTACION</th>
    <th></th>
   </tr>
   <?php  while($fila=mysqli_fetch_array($res)){?>
   <tr>
    <td><?php echo $fila['nombre_producto']; ?> </td>
    <td align="center"><?php echo $fila['unidad_producto']; ?></td>
    <td><img src="img/add.png" width="20px" height="20px">
   </tr>
   <?php }?>
  </table>
  </html>

  <?php } ?>

all this generates a page that when writing the name of the product appears a table with the same or similar products that there are, like the image that I attached ...

**

My question is how can I do that by clicking on the green plus sign of each product that I have in the table are added in the table below ....

**

Thank you very much for your time and reply greetings.

mysql jquery php ajax

asked by vickmt 23.02.2018 в 23:54

source

2 answers

How to block the virtual back button on android device React Native Input text (String type) throws java.lang.NumberFormatException when sending aSpring boot

score 0 · Answer 1

Your PHP code has serious security problems. If someone searches for the product coca-cola';drop table tblproducts;-- , you will imagine what happens.

Responding only to the javascript behavior:

You need to put the same information in your search results that you need to fill in the table below. For example, add the "stock" field and the "id" field. The first as the column of the table and the second, if you prefer, as the ID attribute of the row in the table above:

function add(element) {
var fila = element.parentNode.parentNode,
    id=fila.id,
    nombre = fila.querySelector('.nombre').cloneNode(true),
    cantidad = fila.querySelector('.cantidad').cloneNode(true),
    stock = fila.querySelector('.stock').cloneNode(true),
    id_producto=document.createElement('td'),
    nueva_fila=document.createElement('tr');
    
    id_producto.textContent = id;
    id_producto.className='id';
    
    nueva_fila.appendChild(id_producto);
    nueva_fila.appendChild(nombre);
    nueva_fila.appendChild(cantidad);
    nueva_fila.appendChild(stock);
    
    var carrito =document.getElementById('carrito');
    carrito.querySelector('tbody').appendChild(nueva_fila);
    
    
}

table {
border:1px solid;
}
 td {
border: 1px solid;
padding: 3px;
}
 th {
font-weight: bold;
border: 1px solid;
padding: 3px;
}

Productos que coinciden:

<table id="busqueda">
<thead>
  <tr>
    <th class="nombre">Nombre Producto</th>
    <th class="cantidad">Cantidad Producto</th>
    <th class="stock">Stock Producto</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr id="1">
    <td class="nombre">Nombre 1</td>
    <td class="cantidad">Cantidad 1</td>
    <td class="stock">Stock 1</td>
    <td>
    <a href="javascript:void(0);" onclick="add(this)">
      <img src="https://cache.addthiscdn.com/icons/v2/thumbs/32x32/addthis.png"/>
     </a>
   </td>
  </tr>
  <tr id="2">
    <td class="nombre">Nombre 2</td>
    <td class="cantidad">Cantidad 2</td>
    <td class="stock">Stock 2</td>
    <td>
    <a href="javascript:void(0);" onclick="add(this)">
      <img src="https://cache.addthiscdn.com/icons/v2/thumbs/32x32/addthis.png"/>
     </a>
   </td>
  </tr>
</tbody>
</table>

<p>Su carrito de compras</p>

<table id="carrito">
<thead>
  <tr>
    <th class="id">ID Producto</th>
    <th class="nombre">Nombre Producto</th>
    <th class="cantidad">Cantidad Producto</th>
    <th class="stock">Stock Producto</th>
  </tr>
</thead>
  <tbody>
  </tbody>
</table>

There are shorter ways to do it but I found that this path was the most didactic to show you what happens behind the scenes.

score 0 · Answer 2

Placing the code that you show me in the file ventasgenUSBUS, in the following way, already placing the data that I need from another table.

      <?php
  @session_start();
  error_reporting(E_ALL ^ E_DEPRECATED);
  include("includes/connection.php");
  $q=$_POST['q'];


    $sql = "SELECT * FROM tblproducts INNER JOIN tblinventory
                      WHERE tblproducts.id_producto=tblinventory.id_producto
                      AND nombre_producto LIKE '".$q."%'";
    $res=mysql_query($sql);

  ?>
  <!DOCTYPE HTML>
  <head>
    <script type="text/javascript">
    function add(element) {
      var fila = element.parentNode.parentNode,
      id=fila.id,
      nombre_producto = fila.querySelector('.nombre_producto').cloneNode(true),
      unidad_producto = fila.querySelector('.unidad_producto').cloneNode(true),
      stock = fila.querySelector('.stock').cloneNode(true),
      id_producto=document.createElement('td'),
      nueva_fila=document.createElement('tr');

      id_producto.textContent = id;
      id_producto.className='id';

      nueva_fila.appendChild(id_producto);
      nueva_fila.appendChild(nombre_producto);
      nueva_fila.appendChild(unidad_producto);
      nueva_fila.appendChild(stock);

      var carrito =document.getElementById('carrito');
      carrito.querySelector('tbody').appendChild(nueva_fila);
  }
  </script>
  </head>


  <?php
  if(mysql_num_rows($res)==0){

    echo '<b>¡ NO EXISTEN PRODUCTOS CON ESA BUSQUEDA !</b>';
  ?>
  <!DOCTYPE HTML>
  <CENTER>
    <br>
    AGREGA EL PRODUCTO EN LA SECCION DE PRODUCTOS</a>
  </CENTER>


  <?php
  }else{
    echo '<b>Seleccionar producto:</b><br><br>';
  ?>

  <!DOCTYPE HTML>

  <table border="1px" id="busqueda">
   <tr>
    <th>ID PRODUCTO </th>
    <th>PRODUCTO </th>
    <th>PRESENTACION</th>
    <th>STOCK</th>
    <th></th>
   </tr>
   <?php  while($fila=mysql_fetch_array($res)){?>
   <tr>
    <td class="id_producto"><?php echo $fila['id_producto']; ?> </td>
    <td class="nombre_producto"><?php echo $fila['nombre_producto']; ?> </td>
    <td align="center" class="unidad_producto"><?php echo $fila['unidad_producto']; ?></td>
    <td align="center" class="stock"><?php echo $fila['stock']; ?></td>
    <td><a href="javascript:void(0);" onclick="add(this)"><img src="img/add.png" width="20px" height="20px"></a></td>
   </tr>
   <?php }?>
  </table>

  <p>Su carrito de compras</p>

  <table id="carrito">
  <thead>
    <tr>
      <th class="id_producto">ID Producto</th>
      <th class="nombre_producto">Nombre Producto</th>
      <th class="unidad_producto">Cantidad Producto</th>
      <th class="stock">Stock Producto</th>
    </tr>
  </thead>
    <tbody>
    </tbody>
  </table>


  </html>

  <?php } ?>

by clicking on add does not show anything or do anything I do not know what is wrong, another doubt this suppose it works correctly if I need to do the search for another product would be removed the products that I already have added?

Greetings, thank you very much,