Php – Html Dinamik Textbox – Form Yapımı Jquery Ajax

Php ile yapılan projelerde olmazsa olmazlardan birtanesi dinamic form – textbox lardır . benimde kullandığım yurtdışı bir kaynaktan bulduğum jquery ile dinamik textbox işlemini kısadan özetliyim

 

input.php Dosyamızın İçeriği

<DIV class=”product-item float-clear” style=”clear:both;”>
<DIV class=”float-left”><input type=”checkbox” name=”item_index[]” /></DIV>
<DIV class=”float-left”><input type=”text” name=”ad[]” /></DIV>
<DIV class=”float-left”><input type=”text” name=”soyad[]” /></DIV>
</DIV>

 

index.php Dosyamızın İçeriği

<?php
if(!empty($_POST[“kaydet”])) {
$conn = mysql_connect(“localhost”,”root”,””);
mysql_select_db(“phppot_examples”,$conn);
$itemCount = count($_POST[“ad”]);
$itemValues=0;
$query = “INSERT INTO isimler(ad,soyad) VALUES “;
$queryValue = “”;
for($i=0;$i<$itemCount;$i++) {
if(!empty($_POST[“ad”][$i]) || !empty($_POST[“soyad”][$i])) {
$itemValues++;
if($queryValue!=””) {
$queryValue .= “,”;
}
$queryValue .= “(‘” . $_POST[“ad”][$i] . “‘, ‘” . $_POST[“soyad”][$i] . “‘)”;
}
}
$sql = $query.$queryValue;
if($itemValues!=0) {
$result = mysql_query($sql);
if(!empty($result)) $message = “Eklenme Başarılı”;
}
}
?>
<HTML>
<HEAD>
<TITLE>PHP ile Dynamic Textbox İşlemleri – Yusuf KÖKEN</TITLE>
<LINK href=”style.css” rel=”stylesheet” type=”text/css” />
<SCRIPT src=”http://code.jquery.com/jquery-2.1.1.js”></SCRIPT>
<SCRIPT>
function addMore() {
$(“<DIV>”).load(“input.php”, function() {
$(“#product”).append($(this).html());
});
}
function deleteRow() {
$(‘DIV.product-item’).each(function(index, item){
jQuery(‘:checkbox’, this).each(function () {
if ($(this).is(‘:checked’)) {
$(item).remove();
}
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”frmProduct” method=”post” action=””>
<DIV id=”outer”>
<DIV id=”header”>
<DIV class=”float-left”>&nbsp;</DIV>
<DIV class=”float-left col-heading”>ad</DIV>
<DIV class=”float-left col-heading”>soyad</DIV>
</DIV>
<DIV id=”product”>
<?php require_once(“input.php”) ?>
</DIV>
<DIV class=”btn-action float-clear”>
<input type=”button” name=”add_item” value=”Add More” onClick=”addMore();” />
<input type=”button” name=”del_item” value=”Delete” onClick=”deleteRow();” />
<span class=”success”><?php if(isset($message)) { echo $message; }?></span>
</DIV>
<DIV class=”footer”>
<input type=”submit” name=”kaydet” value=”kaydet” />
</DIV>
</DIV>
</form>
</BODY>
</HTML>

 

style.css Dosyasının İçeriği

body{font-family: “Helvetica Neue”, HelveticaNeue, Helvetica, Arial, sans-serif;font-size: 14px;background-color: #CCCCCC;}
.float-clear{clear:both;}
.float-left{float:left;}
#outer {margin: 0 auto;width: 50%;border-top: #333 2px solid;background-color: #FFFFFF;}
.product-item input[type=”text”] {padding: 5px;border:#ccc 1px solid;border-radius:4px;margin: 0px 10px;}
.product-item input[type=”checkbox”] {margin: 10px;}
#header div{padding: 20px 5px 15px;margin: 0px 10px;}
.col-heading{width:150px;font-size:16px;font-weight:bold;}
.footer{padding:10px; background:#333;margin-top:20px;}
.btn-action{padding:10px;}
.btn-action input[type=”button”]{padding:5px; border:#CCCCCC 1px solid; border-radius: 4px;}
input[type=”submit”]{padding:5px 20px; border:#000000 1px solid; border-radius: 4px; background-color:#09f;color:#fff;}
.success{color:#66CC00;padding: 5px; font-weight:bold;}

Bir Cevap Yazın