Jquery and Ajax not working
I have 3 buttons in my page. they are new buttons, delete, and edit. if I click the new button will display a add_new form , and if I click to change the edit_form will appear.
My question is why the new_form does not appear after I click submit in my edit_form or click delete button to delete data.
My code is like this
<div id="list_address">
<table>
<tr valign="top">
<th>Name</th>
<th>Address</th>
<th>Action</th>
</tr>
<tr valign="top">
<td>Name 1</td>
<td>Adress 1</td>
<td>
<span><a href="#" onclick="javascript:show_editform(<?php echo $id_address;?>);">
Edit|</a></span><span><a href="#"
onclick="javascript:deleteAddress(<?php echo $id_address;?>);">Delete</a></span>
</td>
</tr>
<tr>
<td colspan="3"><span>
<button id="btn_add">Add New</button></span>
</td>
</tr>
</table>
<div>
<div id="boxform">
<div id="edit" style="display:none">
<form id="fm_edit" class="fm_address">
<input type="hidden" value="1" name="submitted" id="submitted"/>
<input type="hidden" id="id_address" name="id_address"/>
<fieldset>
<h3>Edit</h3>
<p>
<label>Address</label>
<input type="text" name="address1" id="address1" >
<sup>*</sup>
</p>
<p>
<label>Address (2)</label>
<input type="text" name="address2" id="address2" >
</p>
<p><input type="submit" value="Save"/></p>
</fieldset>
</form>
</div>
</div>
<div id="add" style="display:none">
<form id="fm_add" class="fm_address">
<input type="hidden" value="2" name="submitted" id="submitted"/>
<fieldset>
<h3>Edit</h3>
<p>
<label>Address</label>
<input type="text" name="address1" id="address1" >
<sup>*</sup>
</p>
<p>
<label>Address (2)</label>
<input type="text" name="address2" id="address2" >
<sup>*</sup>
</p>
<p><input type="submit" value="Save"/></p>
</fieldset>
</form>
</div>
</div>
</div>
<script>
function getAddress(){
$.ajax({
type: "POST",
url: "getAddress.php",
success: function(response){
$("#list_address").html(response);
}
});
}
function clear_form() {
$(".fm_address").find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
function show_editform(id){
$("#add").hide();
$("#edit").show();
$("#id_address").val(id);
}
function show_insertform(){
$("#edit").hide();
$("#add").show();
}
$(document).ready(function() {
$("#btn_add").bind('click',function(){
clear_form();
show_insertform();
});
$("form#fm_edit").submit(function() {
var data = $("form#fm_edit").serialize();
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
$("form#fm_add").submit(function() {
var data = $("form#fm_add").serialize();
alert(data);
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
});
</script>
Please help me.. Thanks.
Answers
You add below script in your both ajax pages like getAddress.php and address.php after the try it. i am sure it will be working.
one more thing you have over write list_address div. after ajax response all list_address div data replace on ajax response data.
$("#list_address").html(response);
<script>
function getAddress(){
$.ajax({
type: "POST",
url: "getAddress.php",
success: function(response){
$("#list_address").html(response);
}
});
}
function clear_form() {
$(".fm_address").find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
function show_editform(id){
$("#add").hide();
$("#edit").show();
$("#id_address").val(id);
}
function show_insertform(){
$("#edit").hide();
$("#add").show();
}
$(document).ready(function() {
$("#btn_add").bind('click',function(){
clear_form();
show_insertform();
});
$("form#fm_edit").submit(function() {
var data = $("form#fm_edit").serialize();
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
$("form#fm_add").submit(function() {
var data = $("form#fm_add").serialize();
alert(data);
$.ajax({
type: "POST",
url: "address.php",
data: data,
success: function(response){
alert(response);
getAddress();
}
});
return false;
});
});
</script>