I have a dynamic DOM with add and save button to add a new elements and to save all the data in DOM elements, respectively. Meanwhile each row has its own remove button to remove the corresponding line.
When user log in to the system, she will be redirected to homepage by controller. (I am using codeigniter framework for PHP). This controller will pass all the session and another data to populate user's home page including the DOM data that I mentioned in the previous paragraph.
So I have two different forms in the same page. Here is the first form
<form class="frm_GP" name="frm_GP" id="frm_GP" enctype="multipart/form-data" action="<?php echo base_url();?>index.php/users/save_preference" method="post">
<div class="table" id="preference_GP">
<?php echo $userGP_html ?>
</div>
<div class="tr">
<div class="td">
<input class="button" type="button" name="btn_Add_GP" id="btn_Add_GP" value="Add category" />
</div>
<div class="td">
<input class="button" type="submit" name="btn_Save_GP" id="btn_Save_GP" value="Save" />
</div>
</div>
<input type="hidden" id="formName" name="formName" value="GP" />
<!--<input type="hidden" id="Dropdown_GP" name="Dropdown_GP" value="<?php echo $Dropdown_GP;?>" />-->
</form>
and the second one
<form class="frm_GP" name="frm_GP" id="frm_GP" enctype="multipart/form-data" action="<?php echo base_url();?>index.php/users/save_preference" method="post">
<div class="table" id="preference_GP">
<?php echo $userGP_html ?>
</div>
<div class="tr">
<div class="td">
<input class="button" type="button" name="btn_Add_GP" id="btn_Add_GP" value="Add category" />
</div>
<div class="td">
<input class="button" type="submit" name="btn_Save_GP" id="btn_Save_GP" value="Save" />
</div>
</div>
<input type="hidden" id="formName" name="formName" value="GP" />
<!--<input type="hidden" id="Dropdown_GP" name="Dropdown_GP" value="<?php echo $Dropdown_GP;?>" />-->
</form>
And here is my jQuery codes :
<script type="text/javascript">
jQuery(document).ready(function(){
var fileId = 0;
var wrapperGP = jQuery("#preference_GP");
var wrapperCP = jQuery("#preference_CP");
var logout_button = jQuery("#btn_Logout");
var x = 0;
jQuery('.datepicker').datepicker({
minDate: new Date()
});
jQuery('[name^=frm_]').on('submit', '[name*="btn_Save"]', (function(e){
alert('aa');
var elementID = jQuery(this).closest('[name^=frm_]').attr('id');
var preference = jQuery.fn.getPreference(elementID);
var len = jQuery('.selCat'+preference).length;
var selCat = jQuery('.selCat'+preference);
var selSubCat = jQuery('.selSubCat'+preference);
var score = jQuery('.score');
var valid_score = ["10","20","30","40","50","60","70","80","90","100"];
for(i=0;i<len;i++){
var j = eval(i+1);
alert(jQuery(score).eq(i));
if(jQuery(selCat).eq(i).val()==='0'){
jQuery(selCat).get(i).focus();
jQuery('[name=error'+preference+']').html('Please select the category of row '+ j);
return false;
}
if(jQuery(selSubCat).eq(i).val()==='0'){
jQuery(selSubCat).get(i).focus();
jQuery('[name=error'+preference+']').html('Please select the sub category of row '+ j)
return false;
}
if(jQuery(score).eq(i).val()==='0' || jQuery(score).eq(i).val()==0 || jQuery(score).eq(i).val()===''){
jQuery(score).get(i).focus();
jQuery('[name=error'+preference+']').html('Please fill the score of row '+ j)
return false;
}
if(valid_score.indexOf(jQuery(score).eq(i).val())<0){
//jQuery(score).get(i).focus();
jQuery('[name=error'+preference+']').html('Please fill with the valid score at row '+ j)
return false;
}
}
//jQuery( "#frm"+preference ).submit();
return false;
}));
jQuery.fn.getPreference = function(elementID) {
var index = elementID.lastIndexOf('_');
var preference = elementID.substr(index,elementID.length);
return preference;
}
jQuery('[name^=frm_]').on('click', '[name*="btn_Add"]', (function(e){
alert('this');
/*
var elementID = jQuery(this).attr('id');
var preference = jQuery.fn.getPreference(elementID);
alert('this');
var dropdown = jQuery(".Dropdown"+preference).val();
e.preventDefault();
x++;
if(preference==="_GP"){
jQuery('#preference'+preference).append(dropdown);
}else{
jQuery('#preference'+preference).append(dropdown);
}
*/
/*
$.post('<?php echo base_url();?>'+'index.php/client/ajax_cat',{preference:preference}, function(returned){
jQuery('#preference'+preference).append(returned);
jQuery("[name*='selCat']").change(function(){
var elementID = jQuery(this).attr('class');
var preference = jQuery.fn.getPreference(elementID);
var index = jQuery(this).index('.selCat'+preference);
var value = jQuery(this).val();
var selSubCat = (".selSubCat"+preference);
jQuery('[name=error'+preference+']').html('');
$.post('<?php echo base_url();?>'+'index.php/client/ajax_subcat',{id:value}, function(returned){
jQuery(selSubCat+":eq("+index+")").html(returned);
});
});
});
*/
return false;
}));
jQuery("[name*='selCat']").change(function(){
var elementID = jQuery(this).attr('class');
var preference = jQuery.fn.getPreference(elementID);
var index = jQuery(this).index('.selCat'+preference);
var value = jQuery(this).val();
var selSubCat = (".selSubCat"+preference);
jQuery('[name=error'+preference+']').html('');
$.post('<?php echo base_url();?>'+'index.php/client/ajax_subcat',{id:value}, function(returned){
jQuery(selSubCat+":eq("+index+")").html(returned);
});
return false;
});
jQuery(wrapperGP).on("click","#btnRemove", function(e){
e.preventDefault();
jQuery(this).closest(".tr").remove();
x--;
return false;
});
jQuery(wrapperCP).on("click","#btnRemove", function(e){
e.preventDefault();
jQuery(this).closest(".tr").remove();
x--;
return false;
});
});
</script>
Any idea why the submit, click and change functions are not firing? meanwhile the remove is working ?
