php - Auto populate and generate dynamic row -
i'm creating auto populate text fields database , dynamic add , remove rows. there problem coming in script. when add new row script doesn't work.
this 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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery-ui-1.10.3.custom.min.js"></script> <script src="js/bootstrap.min.js"></script> <body> <script> $(window).load(function() { $(".loader").fadeout("fast"); ); </script> <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 ajax-php file name(ajax.php). file helps fetch data database without refresh page again , again. work properly
<?php require_once 'config.php'; if($_get['type'] == 'product'){ $result = mysql_query("select name product name '".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 product name '".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 script file 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 creating , 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');
$("#item").autocomplete({source:function(t,a){$.ajax({url:"ajax.php",datatype:"json",data:{name_startswith:t.term,type:"product"},success:function(t){a($.map(t,function(t){return{label:t,value:t}}))}})},autofocus:!0,minlength:0}),$("#item").autocomplete({source:function(t,a){$.ajax({url:"ajax.php",datatype:"json",data:{name_startswith:t.term,type:"product_table",row_num:1},success:function(t){a($.map(t,function(t){var a=t.split("|");return{label:a[0],value:a[0],data:t}}))}})},autofocus:!0,minlength:0,select:function(t,a){var e=a.item.data.split("|");console.log(e[0],e[1],e[2]),$("#item").val(e[0]),$("#desc").val(e[1]),$("#boxa1").val(e[2])}}),jquery(document).ready(function(t){function a(){var a=0;t(".my-form .text-box .answer").each(function(){a+=number(t(this).val())}),t(".grandtotal").text(""),t(".grandtotal").text(a)}t(".my-form .add-box").click(function(){var a=t(".text-box").length+1;if(a>1e3)return alert("stop it!"),!1;var e=t('<p class="text-box" id="input_'+a+'"> <input type="text" id="item'+a+'" name="item '+a+'"/> <input type="text" id="desc'+a+'" name="description'+a+'"/> <input type="text" name="boxa'+a+'" value="" id="boxa'+a+'" class="boxa" /> <input type="text" name="boxb'+a+'" value="" id="boxb'+a+'" class="boxb" /> = <input name="answer'+a+'" class="answer" id="answer'+a+'" value="" /> <a href="#" class="remove-box"><img src="images/remove.png"></a></p>');return jquery("#my-form").append(e),e.hide(),t(".my-form p.text-box:last").after(e),e.fadein("fast"),!1}),t(".my-form").on("click",".remove-box",function(){return t(this).parent().css("background-color",""),t(this).parent().fadeout("fast",function(){t(this).remove(),t(".box-number").each(function(a){t(this).text(a+1)}),a();var e=t("#rows").val();--e,t("#rows").val(e)}),!1}),t(function(){t(".add-box").click(function(){var a=t("#rows").val();++a,t("#rows").val(a)})}),t(".my-form").on("input",".boxb",function(){var e=t(this).val();e*=t(this).siblings(".boxa").val(),t(this).siblings(".answer").val(e),a()}),t(".my-form").on("change",".boxa",function(){var e=t(this).val();e*=t(this).siblings(".boxb").val(),t(this).siblings(".answer").val(e),a()})});
Comments
Post a Comment