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(postgr es). 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)
addnew.php code
when page is rendered will have like this.
<textbox1 data> <add button>
<textbox1 data> <add button>
<textbox1 data> <add button>
...
<textbox10 data> <add button>
what I am trying is
1. Created each textbox and add button pair inside each form dynamically using for loop.
(for testing i created only one pair).Should I have form for every pair?
2. when add is clicked value within textbox (#da) should be send to addnew.php through ajax.
following code is displaying data correctly
but in addnew.php file I am not getting $_POST(['da']). Is that means data is not passed to the file or is there something wrong ajax code and finally can I have multiple form with same id. If not then how i can send the only one textbox data ie just before the add button when form is submitted.
In addnew.php data will we added to database(postgr es). 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)
Code:
<!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>
Code:
<? php
if( isset($_POST['da']) )
{
echo (da);
}
?>
<textbox1 data> <add button>
<textbox1 data> <add button>
<textbox1 data> <add button>
...
<textbox10 data> <add button>
what I am trying is
1. Created each textbox and add button pair inside each form dynamically using for loop.
(for testing i created only one pair).Should I have form for every pair?
2. when add is clicked value within textbox (#da) should be send to addnew.php through ajax.
following code is displaying data correctly
Code:
alert(da);
Comment