Click here to Skip to main content
11,486,023 members (71,263 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: PHP jQuery
Hi all,
I am creating a table dynamically on a button click but while i am trying to put a validation like if any field of the previous row is blank, next row could not be created on button click and show an alert msg please fill all information of previous row.
Here is the code
<SCRIPT>
    RowCount=0;
    stat=false;
    function AddRow()
    {
 //$("#message").hide();
 
        jQtable=$('#SaleTable');
        jQtable.each(function()
        {
 var count=RowCount+1;
            var LastRow="<tr><td align="center"><INPUT TYPE='text' value='"+count+"' disabled='disabled' name='Slno_"+RowCount+"' id='Slno_"+RowCount+"' size=1></td><td align="center"><INPUT type='checkbox' name='in_travel_"+RowCount+"' ID='in_travel_"+RowCount+"' value='in_terval'  size=10></td><td align="center"><INPUT type='text' name='date_"+RowCount+"' ID='date_"+RowCount+"' size=10></td><td align="center"><textArea name='cities_visit_"+RowCount+"' ID='cities_visit_"+RowCount+"' cols=10></textArea></td><td align="center"><select id='reimbursement_"+RowCount+"' name='reimbursement_"+RowCount+"'><option selected='selected' value='None'>--None--</option><option value='DA'>DA</option><option value='Ticket'>Ticket</option><option value='Misc'>Misc</option></select></td><td align="center"><INPUT  type='text' name='amount_"+RowCount+"' ID='amount_"+RowCount+"' size=10></td><td align="center"><textArea name='Remark_"+RowCount+"' ID='Remark_"+RowCount+"' cols=10></textArea></td><td align="center"><INPUT style='text-align:right' type='checkbox' name='bills_"+RowCount+"' ID='bills_"+RowCount+"' value='bills' size=10></td><td align="center"><INPUT style='text-align:right' type='submit' name='submit_"+RowCount+"' ID='submit_"+RowCount+"' onclick='getvalue()' value='Submit' size=10><p id="message_"+RowCount+"" name="message_"+RowCount+"" style="color:#CC0000;"></p></td><td align="center"></td></tr>";
         // $(this).append(LastRow);
 
 
  $(LastRow).find(':submit').click(getvalue).end().appendTo('#SaleTable');
            });
 RowCount++;
 
     }
    function removeTableRow()
    {
        jQtable=$('#SaleTable');
        if(RowCount > 0)
        {
            jQtable.each(function()
            {
                if($('tbody', this).length > 0)
                {
                    $('tbody tr:last', this).remove();
                }
                else
                {
                    $('tr:last', this).remove();
                }
            });
            RowCount--;
        }
 
    }
 
 
 
 ///corredt one
 function getvalue() {
     var row = $(this).closest('tr');
 if($('select[name="month"]').val()=="")
 {
 //alert("Please select a Month!");
//  var row = $(this).closest('tr');
 $('p[name^="message_"]', row).html('Please select a Month!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('select[name="month"]').focus();
//$('input:submit[name="addrow"]').attr("disabled", "disabled");
//$("#addrow").attr("disabled", "disabled");
 return false;
 }
 if($('input:text[name^="date_"]', row).val()=="")
{
 $('p[name^="message_"]', row).html('Please Fill a Date!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('input:text[name^="date_"]', row).focus();
 return false;
 
}
if($('textarea[name^="cities_visit_"]', row).val()=="")
{
 $('p[name^="message_"]', row).html('Please Fill Cities Visited!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('textarea[name^="cities_visit_"]', row).focus();
 return false;
 
}   
if($('select[name^="reimbursement_"]', row).val()=="" || $('select[name^="reimbursement_"]', row).val()=="None")
{
 $('p[name^="message_"]', row).html('Please Select Reimbursement Type!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('select[name^="reimbursement_"]', row).focus();
 return false;
 
}
if($('input:text[name^="amount_"]',row).val()=="")
{
 $('p[name^="message_"]', row).html('Please Fill Amount!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('input:text[name^="amount_"]',row).focus();
 return false;
 
}
if($('textarea[name^="Remark_"]', row).val()=="")
{
 $('p[name^="message_"]', row).html('Please Fill Remark!');
    $('p[name^="message_"]', row).hide();
    $('p[name^="message_"]', row).fadeIn(1500);
 $('textarea[name^="Remark_"]', row).focus();
 return false;
 
}
  var month = $('select[name="month"]').val();
    var sl = $('input:text[name^="Slno_"]', row).val();
  //  var in_tra = $('input[name^="in_travel_"]:checked', row).val();
 if($('input[name^="in_travel_"]', row).is(':checked'))
 {
  var in_tra="Yes";
 }
 else
 {
  var in_tra="No";
 }
   
  var date = $('input:text[name^="date_"]', row).val();
   
 var cities = $('textarea[name^="cities_visit_"]', row).val();
 
    var rm_type = $('select[name^="reimbursement_"]', row).val();
 
 var remarks = $('textarea[name^="Remark_"]', row).val();
 
 var amount=$('input:text[name^="amount_"]',row).val();
 
 //var bills = $('input[name^="bills_"]:checked', row).val();
 
 if($('input[name^="bills_"]', row).is(':checked'))
 {
  var bills="Yes";
 }
 else
 {
  var bills="No";
 }
 
 var row1=RowCount;
//alert(RowCount);
 $.post('add-data-sql.php', {sl: sl, in_tra: in_tra, date: date, cities: cities, rm_type: rm_type, remarks: remarks,amount: amount, bills: bills , row: row1,month:month},
function(data){
//$("#message_").html(data);
//$("#message").hide();
//$("#message").fadeIn(1500); //Fade in the data given by the insert.php file 'message_"+RowCount+"'
$('p[name^="message_"]', row).html(data);
$('p[name^="message_"]', row).hide();
$('p[name^="message_"]', row).fadeIn(1500);
 
});
 
 
}
 
</SCRIPT>

here is the button
<INPUT type="submit" id="addrow" name="addrow" value="Add" onclick='AddRow()'>
Thanks
Posted 16-Jan-13 0:20am
Edited 16-Jan-13 4:21am
v2
Comments
Sergey Alexandrovich Kryukov at 16-Jan-13 16:22pm
   
What exactly do you try to achieve?
—SA
Rajeshkrathor at 16-Jan-13 23:15pm
   
i want 2nd row only generate after fill data on first row..
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You cannot validate a click, the notion itself makes no sense. Smile | :)

—SA
  Permalink  
Comments
Rajeshkrathor at 16-Jan-13 23:49pm
   
we can at-least check the information on that click and return false if the conditions are not true.
Sergey Alexandrovich Kryukov at 16-Jan-13 23:53pm
   
Certainly. So, what's the problem? :-)
—SA
Rajeshkrathor at 17-Jan-13 0:06am
   
the problem is, either the sequence shattered or the add row function stop working.
Sergey Alexandrovich Kryukov at 24-Jan-13 15:51pm
   
Well, this is not an informative issue report :-)
—SA
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

i solved it myself here is the code.
    RowCount=0;
    stat=false;
    function AddRow()
    {
	//$("#message").hide();
 
        jQtable=$('#SaleTable');
        jQtable.each(function()
        {
		var count=RowCount+1;
            var LastRow="<tr><td valign="top" align="center"><INPUT TYPE='text' value='"+count+"' disabled='disabled' name='Slno_"+RowCount+"' id='Slno_"+RowCount+"' size=1></td><td valign="top" align="center"><select id='reimbursement_"+RowCount+"'  onchange='createbox()' name='reimbursement_"+RowCount+"'><option selected='selected' value=''>--None--</option><option value='TA'>TA</option><option value='Mobile'>Mobile</option><option value='Other'>Other</option></select><div id="re_other_"+RowCount+"" style="display: none"><input type='text' name='txtother_"+RowCount+"' id='txtother_"+RowCount+"' Value='' /></div></td><td valign="top" align="center"><INPUT type='text' name='noofdays_"+RowCount+"' ID='noofdays_"+RowCount+"' size=10></td><td valign="top" align="center"><INPUT style='text-align:right' type='checkbox' name='bills_"+RowCount+"' ID='bills_"+RowCount+"' value='bills' size=10></td><td valign="top" align="center"><textArea name='Remark_"+RowCount+"' ID='Remark_"+RowCount+"' cols=10></textArea></td><td valign="top" align="center"><INPUT  type='text' name='amount_"+RowCount+"' ID='amount_"+RowCount+"' onchange='checkamt()' size=10><p id="amt_"+RowCount+"" name="amt_"+RowCount+"" style="color:#CC0000;"></p></td><td valign="top" align="center"><INPUT style='text-align:right' type='submit' name='submit_"+RowCount+"' ID='submit_"+RowCount+"' onclick='getvalue()' value='Save' size=10><p id="message_"+RowCount+"" name="message_"+RowCount+"" style="color:#CC0000; margin-right:-20px;"></p></td><td valign="top" align="center"></td></tr>";
         // $(this).append(LastRow);
	 
	if (RowCount > 0 )
{
 var row1=RowCount-1;
      	 //var amt1= $('#amount_'+row1).val();
	     //alert(amt1);
		
		 if($('#reimbursement_'+row1).val()=="")
	   {
	   alert("Please Select the Reimbursement Type!");
       $('#reimbursement_'+row1).focus();
	   return false;
	   }
		
		 if($('#noofdays_'+row1).val()=="")
	  {
	  alert("Please fill No of Days!");
      $('#noofdays_'+row1).focus();
	  return false;
	   }
	    if($('#Remark_'+row1).val()=="")
	   {
	   alert("Please Fill the Remark!");
	   $('#Remark_'+row1).focus();
	   return false;
	   }
	  
	   if($('#amount_'+row1).val()=="")
	   {
	   alert("Please Fill the Amount!");
	   $('#amount_'+row1).focus();
	   return false;
	   }
	  
	 $(LastRow).find(':submit').click(getvalue).end().appendTo('#SaleTable');
	 }	
		else
		{
		$(LastRow).find(':submit').click(getvalue).end().appendTo('#SaleTable');
		}
	 
	 
            });
	//alert(RowCount);
		if (RowCount >0)
	   {
	 var row1=RowCount-1;
    	//  alert("Please fill the Date!");
       if($('#reimbursement_'+row1).val()=="")
	   {
	 //  alert("Please Select the Reimbursement Type!");
       $('#reimbursement_'+row1).focus();
	   return false;
	   }
	    if($('#noofdays_'+row1).val()=="")
	  {
	//  alert("Please fill No of Days!");
      $('#noofdays_'+row1).focus();
	  return false;
	   }
	    if($('#Remark_'+row1).val()=="")
	   {
	 //  alert("Please Fill the Remark!");
	   $('#Remark_'+row1).focus();
	   return false;
	   }
	   if($('#amount_'+row1).val()=="")
	   {
	//   alert("Please Fill the Amount!");
	   $('#amount_'+row1).focus();
	   return false;
	   }
	  
	   RowCount++;
	   }	
		else
		{
		  RowCount++;
	     }			
    }
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 8,888
1 OriginalGriff 8,147
2 Sascha Lefèvre 3,254
3 Maciej Los 2,886
4 Richard Deeming 2,370


Advertise | Privacy | Mobile
Web04 | 2.8.150520.1 | Last Updated 24 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100