Auto populate and generate dynamic row

Vote count:

0

I'm creating auto populate text fields from database and dynamic add and remove rows. But there is problem coming in the script. when i add new row the script doesn't work
This is my HTML file.


<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>


  <script src="js/bootstrap.min.js"></script>

<script>

$(window).load(function() {
$(".loader").fadeOut("fast");
});

<div class="my-form">
    <form name="form" action="demo.php" method="post">
        <input type="hidden" value="1" id="rows" name="rows" class="rows"/>
        <p class="text-box" id="input_1">
     <table><tr>
        <td width="180px">item</td>
        <td width="180px">description</td>
        <td width="180px">price</td>
        <td width="180px">quantity</td>
        <td>total</td>
    </tr></table>

     <input type='text' id='item' name='item'/>
    <input type='text' id='desc' name='description'/>
    <input name="boxa1" id="boxa1" class="boxa" type="text" value="" />
    <input name="boxb1" id="boxb1" class="boxb" type="text" value="" />
   = <input name="answer1" id="answer1" class="answer" type="text" value="" />
       <a class="add-box" href="#"><img src="images/add.png"></a>
        </p>
        <input type="submit" name="sub" id="sub">
        </form>
        </div>
        Grand Total: <span class="GrandTotal">0.00</span><br/><br/>



This is my ajax-php file name(ajax.php). This file helps to fetch data from database without refresh the page again and again. This work properly

    <?php

require_once 'config.php';

if($_GET['type'] == 'product'){
    $result = mysql_query("SELECT name FROM product where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");  
    $data = array();
    while ($row = mysql_fetch_array($result)) {
        array_push($data, $row['name']);    
    }   
    echo json_encode($data);
}

if($_GET['type'] == 'product_table'){
    $row_num = $_GET['row_num'];
    $result = mysql_query("SELECT name, description, cost_price FROM product where name LIKE '".strtoupper($_GET['name_startsWith'])."%'"); 
    $data = array();
    while ($row = mysql_fetch_array($result)) {
        $name = $row['name'].'|'.$row['description'].'|'.$row['cost_price'].'|'.$row_num;
        array_push($data, $name);   
    }   

    echo json_encode($data);
}
?>

Here is my script file for create auto populate text fields.

<script>

// Autopopulate

$('#item').autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url : 'ajax.php',
                        dataType: "json",
                        data: {
                           name_startsWith: request.term,
                           type: 'product'
                        },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        return {
                            label: item,
                            value: item

                        }
                    }));

                }
            });

        },
        autoFocus: true,
        minLength: 0        

      });    
    $('#item').autocomplete({
    source: function( request, response ) {

        $.ajax({
            url : 'ajax.php',
            dataType: "json",
            data: {

               name_startsWith: request.term,
               type: 'product_table',
               row_num : 1

            },
             success: function( data ) {
                 response( $.map( data, function( item ) {
                    var code = item.split("|");
                    return {

                        label: code[0],
                        value: code[0],
                        data : item

                    }
                }));

            }
        });

    },
autoFocus: true,            
minLength: 0,
select: function( event, ui ) {

    var names = ui.item.data.split("|");
    console.log(names[0], names[1], names[2]);                      
    $('#item').val(names[0]);
    $('#desc').val(names[1]);
    $('#boxa1').val(names[2]);
    }               
  });
              // End of autopoplate 

// creating limited textfield

this script is for creating and remove dynamic rows

  jQuery(document).ready(function($){
  $('.my-form .add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 1000 < n ) {
            alert('Stop it!');
            return false;
        }

        // adding new rows of textfield  
    var box_html = $('<p class="text-box" id="input_'+ n +'">  <input type="text" id="item' + n + '" name="item ' + n + '"/>  <input type="text" id="desc' + n + '" name="description' + n + '"/>   <input type="text" name="boxa' + n + '" value="" id="boxa' + n + '" class="boxa" />  <input type="text" name="boxb' + n + '" value="" id="boxb' + n + '" class="boxb" /> = <input name="answer' + n + '" class="answer" id="answer' + n + '"  value="" /> <a href="#" class="remove-box"><img src="images/remove.png"></a></p>');

    jQuery('#my-form').append(box_html);
    box_html.hide();

    $('.my-form p.text-box:last').after(box_html);
    box_html.fadeIn('fast');
    return false;
});
// remove existing rows   

$('.my-form').on('click', '.remove-box', function(){
    $(this).parent().css( 'background-color', '' );
    $(this).parent().fadeOut("fast", function() {

        $(this).remove();
        $('.box-number').each(function(index){
            $(this).text( index + 1 );

            });

        // decresing the value of rows

            calTotal();
            var $a=($('#rows').val());
           --$a;
           $('#rows').val($a);

        });

        return false;
    });

//increasing the value of rows

$(function () {
$('.add-box')

.click(function () {
var $a=($('#rows').val());
       ++$a;
       $('#rows').val($a);

          //  alert("Rows = " + $a);

        })
    });

 // show the sum of calculation      

    function calTotal(){
      var total = 0;
      $(".my-form .text-box .answer").each(function(){       
      total += Number($(this).val());
      });

    $(".GrandTotal").text("");
    $(".GrandTotal").text(total);
}

//calculating the values of two text fields

$(".my-form").on('input', '.boxb', function(){
var total_row = $(this).val();
total_row *= $(this).siblings(".boxa").val();
$(this).siblings(".answer").val(total_row);
    calTotal();
});

$(".my-form").on('change', '.boxa', function(){

var total_row = $(this).val();
total_row *= $(this).siblings(".boxb").val();
$(this).siblings(".answer").val(total_row);
    calTotal();
});

});

Please check this code. I tried too much but not get the desired output.

asked 1 min ago

Ganga Singh

1

Auto populate and generate dynamic row