I am trying to code a form that has multiple textbox without refershing page using ajax, then after each textbox threre will be link called add which POST call the other php called addnew.php.
In addnew.php data will we added to database(postgres). But I am geting problem while getting the post variable itself.For testing I added the alert in script.
this is my code for form (I will chage for multiple textbox once it works fine)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> - jsFiddle demo</title>
<script type='text/javascript' src='fade delete_files/jquery-1.4.2.js'></script>
<link rel="stylesheet" type="text/css" href="fade delete_files/normalize.css"/>
<link rel="stylesheet" type="text/css" href="fade delete_files/result-light.css"/>
<style type='text/css'>
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
jQuery(document).ready(function() {
jQuery('.add').live('click', function(event) {
//var da='da='+ $('#da').attr('value');
//var da = 'test';
var da = $('form#myform').serialize();
alert(da);
$.ajax({
type: "POST",
url: "addnew.php",
data:da,
success: function(data) {
if (data === "ok") {
$(this).parent().fadeOut();
$('#results').html(data);
}
else {
alert(data);
}
}
});
});
});
});
//]]>
</script>
</head>
<body>
<ul>
<li>One | <a href='#' class='add'>Delete</a></li>
<li>Two | <a href='#' class='add'>Delete</a></li>
<li>Three | <a href='#' class='add'>Delete</a></li>
<li>Four | <a href='#' class='add'>Delete</a></li>
</ul>
<?php
for ($i=1;$i<2;++$i) {//currently only one textbox for testing purpose
echo "<form name='myform' id='myform'>";
echo "<input name='da' type='text' id='da' value='none'>";
echo "<a href='#' class='add'>Add</a>";
echo "</form>";
}
?>
<div id="results"><div>
</body>
</html>
addnew.php code
<? php
if( isset($_POST['da']) )
{
echo (da);
}
?>