how to add table row that contains 2 select option

html807 · 12-09-2012, 07:32 AM

Hi guys need some guidance PHP + javascript..

I am having trouble creating the form PHP and javascript, I have a form which contains some information that should be filled in by the user.

in the form, I have 2 select option.
Fyi, that select option use the database.
second select option is dependent to select option first. Or Dynamically populate dropdown dependent on another dropdown using databases.

what i want to do is, every user who enter data will create one ticket number. and one ticket number can have more than one product and request.

select option first is for PRODUCT
second select option is for REQUEST

if only one request and one product for one ticket number, I can easily enter information into the database without any error

but if there is a user who has more than one PRODUCT & REQUEST, then with the help of javascript I add table rows containing select option according to user requirement. This section is also very easy, I can add table row as user demand

but when a table row is increased, the state began uncomfortable, I can not select the information that is in the select option, an error message appears, makes me very sad

is there anything that can give me instructions to resolve this mess ???, it's almost a month but do not know how to fix that code..

to clarify information from the image above, I will explain briefly:

Picture number 1 is the position where there are no additional rows of the table (the default state)

see the plus and minus, useful to add or delete table rows

sunfighter · 12-10-2012, 01:55 PM

Code is better than pictures. Please post your code or a link to your site.

html807 · 12-12-2012, 01:57 PM

Quote:

Originally Posted by sunfighter

Code is better than pictures. Please post your code or a link to your site.

Hi here so far i have made :

this code for input form indexip.php

Code:

<?php 
include('session_lock.php');
include('calendar/calendar/classes/tc_calendar.php');
header ( "Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0");
header ("Pragma: no-cache");
?>
<html>
<head>
<title>CRMposts - Attachment Management Sistem</title>
<!-- start style-->
-- some css file here --
<!-- end style-->

<!-- start js-->
-- some js file here --
<!-- end js-->



//this function is for dynamic dropdown passing parameter
<script type="text/javascript">
function AjaxFunction(prod_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
		  try
   			 		{
   				 httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    				}
  			catch (e)
    				{
    			try
      		{
      		httpxml=new ActiveXObject("Microsoft.XMLHTTP");
     		 }
    			catch (e)
      		{
      		alert("Your browser does not support AJAX!");
      		return false;
      		}
    		}
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {

var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.frmPost.subcat.options.length-1;j>=0;j--)
{
document.frmPost.subcat.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.frmPost.subcat.options.add(optn);

} 
      }
    }
	var url="dd.php";
url=url+"?prod_id="+prod_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>


//this function is for adding some row to table 
<SCRIPT language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
            }catch(e) {
                alert(e);
            }
        }
 
    </SCRIPT>

</head>


<body class="yui-skin-sam">

<?php

include"config\koneksi.php";

?>

<div class="ewLayout">
<!-- header (begin) -->
<?php include "header.php";?>
<!-- header (end) -->

<div class="ewMenuRow">
<!-- Begin Main Menu -->
<?php include "mainmenu.php";?>
<!-- End Main Menu -->

</div>

<!-- content (begin) -->
 
<?php //echo $_SESSION['id'];?>

<div id="ewContainer">
<?php include("indexlist.php");?>
</div>
<table width="100%" border="1">
<tr>
<td width="30%">

<form enctype="multipart/form-data" action="post_act.php" method="post" name="frmPost" style="margin:0px; padding:0px" onSubmit="return verifikasi_input()">
<table class="ewTable ewTableSeparate" >
<tr>
	<td>
	Branch Code
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="cabang" size="35" value="<?php echo $_SESSION['kod']." ".$_SESSION['izin']." ". $_SESSION['kantor'];?>"/>
	<input type="hidden" name="kode" value="<?php echo $_SESSION['kod'];?>"/>
	</td>
</tr>

<tr>
	<td>
	Customer Service NIP
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="nip" size="35"/>
	</td>
</tr>

<tr>
	<td>
	Customer Service Name
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="petugas" size="35"/>
	</td>
</tr>

<tr>
	<td>
	CRM Number
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="crmnum" size="35"/>
	</td>
</tr>

<tr>
	<td>
	Customer Name
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="nasabah" size="35"/>
	</td>
</tr>

<tr>
	<td>
	Card Number
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="kartu" size="35"/>
	</td>
</tr>

<tr>
	<td>
	Date Of Birth
	</td>
	<td>
	:
	</td>
	<td>
	
	<?php
	

$myCalendar = new tc_calendar("date5", true, false);
$myCalendar->setIcon("calendar/calendar/images/iconCalendar.gif");
//$myCalendar->setDate(date('d'), date('m'), date('Y'));
$myCalendar->setAutoHide(false);
$myCalendar->setPath("calendar/calendar/");
$myCalendar->setYearInterval(1902, 2015);
$myCalendar->dateAllow('1902-01-01', '2015-12-31');
$myCalendar->setDateFormat('j F Y');
$myCalendar->writeScript();
	
	?>
	<input type="button" name="button" id="button" value="Check" onclick="javascript:alert(this.form.date5.value);" />
	</td>
</tr>

<tr>
	<td>
	Phone

   //this is two button for adding & deleting row
   <INPUT type="button" value="+" onclick="addRow('dataTable')" />
    <INPUT type="button" value="-" onclick="deleteRow('dataTable')" />
	</td>
	<td>
	:
	</td>
	<td>
	<input type="text" name="phone" size="35"/>
	</td>
</tr>
//##############################################
<tbody id="dataTable">  <-- this where the row must increase -- start
<tr>
	<td>
	<INPUT type="checkbox" name="chk"/>
	</td>
	<td>
	:
	</td>
	<td>

<select name="cat" onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>

<?php

$q=mysql_query("select * from product");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[prod_id]>$n[product]</option>";
}

?>
</select>
<select name="subcat"></select>
	</td>
</tr>
</tbody>  <-- this closing row for id dataTable
//##################################################
<tr>
	<td>
	Attachment
	</td>
	<td>
	:
	</td>
	<td>
	<input type="file" name="uploaded" size="20"/>
	</td>
</tr>

<tr>
	<td>
	Remarks
	</td>
	<td>
	:
	</td>
	<td>
	<textarea name="keterangan" cols="35" rows="5"></textarea>
	</td>
</tr>

<tr>
	<td colspan="3" align="center">
	<span class="phpmaker">
	<input type="submit" class="msButton" name="btnsubmit" id="btnsubmit" value="Input"></span>&nbsp;&nbsp;
    <input type="reset" name="reset" class="msButton" id="Reset" value="Batal">
	<input type="hidden" name="cab_pending" value="<?php echo $_SERVER['SCRIPT_NAME'];?>"/>

	</td>
</tr>
</table>
</form>
</td>
<td valign="top">

<table class="ewTable ewTableSeparate">
	 <tr>
	    <td colspan="8">
		<form name="frmSearch" method="get" action="<?php echo $_SERVER['SCRIPT_NAME'];?>" style="margin:0px; padding:0px"> 
		<input name="txtKeyword" type="text" id="txtKeyword"  value="<?php echo $_GET["txtKeyword"];?>" style="height:24px;width=200px"/>  <input type="submit"  class="msButton" value="FIND PENDING PROSES"/>
	    </form>
		</td>
	  </tr>
<?php 

if($_GET["txtKeyword"] != "") {

$sql="select* from
(select datapost.* FROM datapost where datapost.kodcabPost='$_SESSION[kod]' AND datapost.custPost like'%$_GET[txtKeyword]%') a INNER JOIN
(select `update`.* FROM `update` order by idUpdate desc)b ON a.idPost=b.idPost
GROUP BY a.idPost having b.status='pending'
ORDER BY a.idPost desc";

//$sql="SELECT * FROM datapost WHERE kodcabPost='$_SESSION[kod]' AND custPost like'%$_GET[txtKeyword]%' ORDER BY idPost desc";
//echo $sql;
//exit();
$batas=20;
$query=mysql_query($sql);
$data=mysql_num_rows($query);
$jumhal=ceil($data/$batas);
$page=$_GET["page"];
if(!isset($_GET["page"])){
	$mulai=0;
}else{
	$mulai=$page * $batas;
}

$sql="select* from
(select datapost.* FROM datapost where datapost.kodcabPost='$_SESSION[kod]' AND datapost.custPost like'%$_GET[txtKeyword]%') a INNER JOIN
(select `update`.* FROM `update` order by idUpdate desc)b ON a.idPost=b.idPost
GROUP BY a.idPost having b.status='pending'
ORDER BY a.idPost desc 
limit $mulai,$batas";

//$sql="SELECT * FROM datapost WHERE kodcabPost='$_SESSION[kod]' AND custPost like'%$_GET[txtKeyword]%' ORDER BY idPost desc limit $mulai,$batas";
$query=mysql_query($sql);
$pages=$page + 1;

} else {

$sql="select* from
(select datapost.* FROM datapost where datapost.kodcabPost='$_SESSION[kod]') a INNER JOIN
(select `update`.* FROM `update` order by idUpdate desc)b ON a.idPost=b.idPost
GROUP BY a.idPost having b.status='pending'
ORDER BY a.idPost desc";

//$sql="SELECT * FROM datapost WHERE kodcabPost='$_SESSION[kod]' ORDER BY idPost desc";
//echo $sql;
//exit();
$batas=20;
$query=mysql_query($sql);
$data=mysql_num_rows($query);
$jumhal=ceil($data/$batas);
$page=$_GET["page"];
if(!isset($_GET["page"])){
	$mulai=0;
}else{
	$mulai=$page * $batas;
}

$sql="select* from
(select datapost.* FROM datapost where datapost.kodcabPost='$_SESSION[kod]') a INNER JOIN
(select `update`.* FROM `update` order by idUpdate desc)b ON a.idPost=b.idPost
GROUP BY a.idPost having b.status='pending'
ORDER BY a.idPost desc
limit $mulai,$batas";


//$sql="SELECT * FROM datapost WHERE kodcabPost='$_SESSION[kod]' ORDER BY idPost desc limit $mulai,$batas";
$query=mysql_query($sql);
$pages=$page + 1;


}

?>
<tr bgcolor="#898991">
<th>No CRM</th>
<th>Nama Nasabah</th>
<th>No Kartu</th>
<th>Permintaan</th>
<th>Status</th>
<th>Remarks</th>
<th>Download</th>
<th>Reply</th>
</tr>
<?php 
while($cetak=mysql_fetch_array($query)) { 
?>
<tr>
	<td><?php echo $cetak['crmNum'];?></td>
	<td><?php echo $cetak['custPost'];?></td>
    <td><?php echo $cetak['cardPost'];?></td>
    <td><?php echo $cetak['request'];?></td>
    <td><?php echo $cetak['status'];?></td>
    <td><?php echo $cetak['notePost'];?></td>
    <td><a href='../CRMposts/upload/<?php echo $cetak['filePost'];?>'><?php echo $cetak['filePost'];?></a></td>
    <td><a href='reply.php?ID=<?php echo $cetak['idPost'];?>&PG=pending'><?php echo "Reply";?></a></td>	
</tr>
	<?php } if($_GET["txtKeyword"] != "") { ?>

<tr>
	<td colspan="8">
	<center>
	<a href="indexip.php?page=<?php echo max($page-1,0);?>&txtKeyword=<?php echo $_GET[txtKeyword];?>">Prev</a> 
	|| Total Record : <b><?php echo $data;?></b> || Total Page : <b><?php echo $jumhal;?></b> || Current Page : <b><?php echo $pages;?></b> ||
	<a href="indexip.php?page=<?php echo min($page+1,$jumhal-1);?>&txtKeyword=<?php echo $_GET[txtKeyword];?>">Next</a>
    </center>
	</td>
</tr>	
	<?php } else { ?>
	
<tr>
	<td colspan="8">
	<center>
	
	<?php if ($data==0) {
	
	echo "No Data Found";
	
	}else{?>
	
	<a href="indexip.php?page=<?php echo max($page-1,0);?>">Prev</a> 
	
	<?php } ?>
	
	|| Total Record : <b><?php echo $data;?></b> || Total Page : <b><?php echo $jumhal;?></b> || Current Page : <b><?php echo $pages;?></b> ||
	
	<?php if ($data==0) {
	
	echo "No Data Found";
	
	}else{?>
	
	<a href="indexip.php?page=<?php echo min($page+1,$jumhal-1);?>">Next</a>
	
	<?php } ?>
	
    </center>
	</td>
</tr>	

	<?php } ?>
</table>

</td>
</tr>
</table>
<div id="ewContainer">
<span class="ewTitle" style="white-space: nowrap;"></span>
</div>

<?php echo $_SESSION['login']; ?>

<!-- content (end) -->


 <!-- footer (begin) -->
<div class="ewFooterRow" id="container">
<div class="ewFooterText">
<?php include"footer.php";?>
</div>
<!-- Place other links, for example, disclaimer, here -->
</div>
<!-- footer (end) -->  
</div>
</body>
</html>

tks master , ill wait your guidance for this...

tks verymuch...

html807 · 12-17-2012, 06:55 AM

still wating for some explanation...up..up..up