Dynamic Form Using Ajax PHP - php

Question

I'm working on the ajax for the first time.
I've one dynamic form which adds similar form on clicking "Add Button" and also there is a field in each form "Get Data" which is used to retrieve data from database for individual filed. The problem is "Get Data" not working for all field.
<style>
td {
border: solid 1px lightGrey;
padding: 0 4px 0 4px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
var count = 0;
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
var loadUrl = "ajaxfunc.php";
$("#submit").click(function(){
count += 1;
$("#result").load(loadUrl,{name:document.getElementById('fields'+count).value},function(responseText){
});
});
$(function(){
$('p#addField').click(function(){
count += 1;
$('#fields1').append(
'<div id="fields">'
+'<table border="0">'
+'<tr>'
+'<td width="100">'
+'ISBN NO :'
+'</td>'
+'<td>'
+' <input type="text" id="cIsbn1" name="cIsbn[]" />'
+'</td>'
+'<td>'
+'<button name="submitit" id="submit' + count + '" type="button" class="btn " style="float:left;">Get Data</button>'
+'</td>'
+'</tr>'
+'<tr>'
+'<td> Book Name:</td>'
+'<td> <input type="text" id="bookName' + count + '" name="bookName[]" style="width:200px;" /> </td>'
+'<td> Price : </td>'
+'<td> RM<input type="text" id="price' + count + '" name="price[]" style="width:50px;"/>'
+' $<input type="text" id="other_price' + count + '" name="other_price[]" style="width:50px;" readonly="readonly"/> </td>'
+'</tr>'
+'<tr>'
+'<td> Quantity :</td>'
+'<td><input type="text" id="quantity' + count + '" name="quantity[]" /></td>'
+'<td> Discount (in %): </td>'
+'<td> <input type="text" id="discount' + count + '" name="discount[]" /></td>'
+'</tr>'
+'<tr>'
+'<td>'
+'Net Price :'
+'</td>'
+'<td>'
+'<input type="text" id="netPrice' + count + '" name="netPrice[]" />'
+'</td>'
+'</tr>'
+'<tr>'
+'<td>'
+'Remarks :'
+'</td>'
+'<td style="height:45px;">'
+'<textarea id="ind_remarks' + count + '" name="ind_remarks[]" style="resize:none; position:absolute;"></textarea>'
+'</td>'
+'</tr>'
+'</div>'
+'</table><hr>'
+'</div>');
});
});});
</script>
<div id="contentWrapper">
<?php include('includes/sidebar_left.php');?>
<div class="content">
<h2>Add New Customer & Issue Quotation</h2>
<hr />
<form id="newBook" action="newBookProcess.php" method="post" enctype="multipart/form-data">
<table border="0">
<tr>
<td width="152">Customer Name *</td>
<td width="231">:
<input class="validate[required] text-input" type="text" name="cName" /></td>
<td width="272" rowspan="6"><p>Remarks:</p>
<p>
<textarea name="remarks" rows="7" cols="33" style="resize:none;"></textarea>
</p></td>
</tr>
<tr>
<td>Address</td>
<td> :
<input type="text" name="cAddress1" /><br />
: <input type="text" name="cAddress2" /></td>
</tr>
<tr>
<td>Telephone </td>
<td>:
<input type="text" name="cTelephone" /></td>
</tr>
<tr>
<td>Fax</td>
<td>:
<input type="text" name="cFax" /></td>
</tr>
</table>
<hr />
<p style="width:100%;">
<h2 style="font-size:16px;">Add Book To Quotation </h2>
<p id="addField" style="border:none; background:none; width:100%;cursor:pointer; right:0; float:right;"><img src="images/addNew.png" width="100" style="border:none;"/> <p>
<hr />
</p>
<div id="fields1">
<table border="0">
<tr>
<td width="100">
ISBN NO :
</td>
<td>
<input type="text" name="cIsbn[]" id="cIsbn" />
</td>
<td>
<button name="submitit" id="submit2" type="button" class="btn " style="float:left;">Get Data</button>
</td>
</tr>
<tr>
<td>
Book Name:
</td>
<td>
<input type="text" name="bookName[]" style="width:200px;" />
</td>
<td>
Price :
</td>
<td>
RM<input type="text" name="price[]" style="width:50px;"/>
$<input type="text" name="other_price[]" style="width:50px;" readonly/>
</td>
</tr>
<tr>
<td>
Quantity :
</td>
<td>
<input type="text" name="quantity[]" />
</td>
<td>
Discount (in %):
</td>
<td>
<input type="text" name="discount[]" />
</td>
</tr>
<tr>
<td>
Net Price :
</td>
<td>
<input type="text" name="netPrice[]" />
</td>
</tr>
<tr>
<td>
Remarks :
</td>
<td style="height:45px;">
<textarea name="ind_remarks[]" style="resize:none; position:absolute;"></textarea>
</td>
<td>
<button id="addField">Add New </button>
</td>
</tr>
</table>
<hr />
</div>
<p>
<input type="submit" value="Add Book" style="cursor:pointer;" />
<input type="reset" style="cursor:pointer;" /> <span class="req">* required fileds</span>
</p>
</form>
<div id="result" style="overflow:hidden;" >
</div>
</div>
</div>
</div>
<?php include('includes/footer.php');?>
Above code is my code.
Please help me.

Answer 1

For a start, the value of the id attribute of an element has to be unique; it's an identifier, it can't uniquely identify a specific element if you have multiple elements with the same id. Use a class instead.
Now, when you do $('#submit') in your jQuery code, that will only select elements that exist on the page at the time the code is executed. And, because it's an ID selector, it will only select at most one element.
If you want to bind event handlers to elements that are added after the page loads, you'll need to use event delegation:
$('#fields1').on('click', '.submit-button', function(e) {
count += 1;
$("#result").load(loadUrl,{name:document.getElementById('fields'+count).value});
});
Note that I've removed the empty callback function; if you don't want to do anything inside it then you don't need to pass it - it's an optional argument. I've also used .submit-button as the selector for the call to .on(); I'm assuming that rather than id="submit" you'll be using class="submit-button".

Answer 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
var loadUrl = "ajaxfunc.php";
var count=1
$("button").live('click', function(){
$("#result").load(loadUrl,{name:document.getElementById('fname1').value, email:document.getElementById('mytext').value, id:document.getElementById('id'+count).value },function(responseText){
count=count+1;
});
});
});
$(document).ready(function(){
var i = $('input').size() + 1;
var count=1
$('#add').click(function() {
$('<div><input type="text" id="fname'+count+'" /><input type="text" id="id'+count+'" /><button id="submit'+count+'" type="button" style="float:left;">Submit'+count+'</button><div id="result" style="font-size:0px;width:30px;overflow:hidden;" ></div></div>').fadeIn('slow').appendTo('#form');
var bj = count;
count = count+1;
var test = bj;
document.getElementById("mytext").value = test;
});
});
function printIt(){
var sj = document.getElementById('mytext').value;
alert(sj);
}
</script>
</script>
Add
<form id="contact" action="" method="post" enctype="multipart/form-data" >
<div id="form"></div>
<div id="printHere"></div>
<input type="hidden" name="countC" id="mytext" />
<input type=button value="Get Value" onclick="printIt()" />
</form>