sorry for bad english. so i want try make to dynamically add an new input field on key down with using autocompelete(auto suggestion) for evey new dynamically add. so every add an new input field will be have autocompelete(suggestion) too.but i confuse in javascript ,this all my coding
<html>
<head>
<form method = "POST" action="text.php" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>
<link href="css/inputpo.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>-->
<script type="text/javascript">
$(document).ready(function(){
$("#code1").autocomplete({
source: 'autosuggest.php',
select:function(event, ui){
$('#descrip1').val(ui.item.descrip1);
$('#color1').val(ui.item.color1);
$('#type1').val(ui.item.type1);
$('#qty1').val(ui.item.qty1);
}
});
});
</script>
<script type="text/javascript">
$txt=new Array();
$(function(){
$('#go').on('click',function(){
console.log($('form').serialize());
})
$('body').on('keydown','.last',function(){
$('.last').removeClass('last');
$('#go','body').before(
'<table><tr><td><input class="last" type="input" id="code1" name="code'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value="<?php echo $code1; ?>"></td><td><input class="last" type="text" id="descrip" name="descrip'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td><td><input class="last" type="text" id="type" name="type'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td><td><input class="last" type="text" id="color" name="color'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value=""></td></tr></table>');
})
})
</script>
</head>
<body>
<?php
if($_GET) {
$code1 = isset($_POST['code']) ? $_POST['code1'] : '';
$descrip = isset($_POST['descrip1']) ? $_POST['descrip1'] : '';
$color = isset($_POST['color1']) ? $_POST['color1'] : '';
$type = isset($_POST['type1']) ? $_POST['type1'] : '';
$qty = isset($_POST['qty1']) ? $_POST['qty1'] : '';
}
$code1="";
?>
<div class="isi">
<table height="51" border="0" cellspacing="2">
<tr>
<td width="99" align="center" label for="suggestionbox">
<div align="center">Code Product</div></label>
</td>
<td>
<div align="center">Description</div>
</td>
<td>
<div align="center">Type</div>
</td>
<td>
<div align="center">Color</div>
</td>
</tr>
<tr>
<td>
<input class="last" type="text" id="code1" name='code1' value="<?php echo $code1;?>">
</td>
<td>
<input class="last" type="text" id="descrip1" name='descrip1' value="">
</td>
<td>
<input class="last" type="text" id="type1" name='type1' value="">
</td>
<td>
<input class="last" type="text" id="color1" name='color1' value="">
</td>
</tr>
</table>
<input id="go" name="" type="submit" /></td>
</div>
</body>
</html>
it's almost correct for autocomplete(auto suggestion) in dynamically just error in Javascript in here
<td><input class="last" type="input" id="code1" name="code'+(Number($(this).attr('name').match(/[0-9]+/g))+1)+'" value="<?php echo $code1; ?>"></td>
if value=" " its correct but cant give autocomplete(suggestion) for second field, supposed value is "<?php echo $code1; ?>"but its will view in field is "<?php echo $code1; ?>" anybody can help me??
$code1=""; is after the if condition so whatever the value is coming from post it in $code1 = isset($_POST['code']) ? $_POST['code1'] : ''; it will again assigned at the end $code = ""; which make it empty every time.
So do it like this
<?php
$code1="";
if($_GET) {
$code1 = isset($_POST['code']) ? $_POST['code1'] : '';
$descrip = isset($_POST['descrip1']) ? $_POST['descrip1'] : '';
$color = isset($_POST['color1']) ? $_POST['color1'] : '';
$type = isset($_POST['type1']) ? $_POST['type1'] : '';
$qty = isset($_POST['qty1']) ? $_POST['qty1'] : '';
}
?>
now it first asign velue "" to $code1 and if $_GET has value new value is been assigned to it
or you can add else and put it in there
Try using a session + ajax. I'm not 100% sure if it will suit your needs or not:
page1.php
<?php
session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>
<link href="css/inputpo.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h1>Form</h1>
<form method = "POST" action="text.php" id="masterform">
<div id="adder">Add</div><div id="delete">Clear</div>
<div id="loader"></div>
<input id="go" name="" type="submit" />
</form>
<script type="text/javascript">
function AddFormRow(IdElem,Func)
{
$("#"+IdElem).html("Loading...");
if(Func == 1)
Qfunc = 'command=true';
if(Func == 0)
Qfunc = 'command=false';
$.ajax({
url: "page2.php?"+Qfunc,
cache: false,
success: function(result) {
$("#"+IdElem).html(result);
}
});
}
$(document).ready(function(){
AddFormRow('loader',1);
$("#adder").click(function() {
AddFormRow('loader',1);
});
$("#delete").click(function() {
AddFormRow('loader',0);
});
});
</script>
</body>
</html>
page2.php
<?php
error_reporting(E_ALL);
session_start();
if(isset($_GET['command']) && $_GET['command'] !== 'true')
unset($_SESSION['myform']);
$_SESSION['myform'][] = 1;
for($i = 0; $i < count($_SESSION['myform']); $i++) { ?>
<table height="51" border="0" cellspacing="2">
<tr>
<td width="99" align="center" label for="suggestionbox"><div align="center">Code Product</div></label></td>
<td><div align="center">Description <?php echo $i; ?></div></td>
<td><div align="center">Type <?php echo $i; ?></div></td>
<td><div align="center">Color <?php echo $i; ?></div></td>
</tr>
<tr>
<td><input class="last" type="text" id="code<?php echo $i; ?>" name='code<?php echo $i; ?>' value="code<?php echo $i; ?>"></td>
<td><input class="last" type="text" id="descrip<?php echo $i; ?>" name='descrip<?php echo $i; ?>' value=""></td>
<td><input class="last" type="text" id="type<?php echo $i; ?>" name='type<?php echo $i; ?>' value=""></td>
<td><input class="last" type="text" id="color<?php echo $i; ?>" name='color<?php echo $i; ?>' value=""></td>
</tr>
</table>
<?php } ?>