Member Avatar for vishalonne

Hi Every One

I am designing one site in Zen Cart 1.3.8a almost every thing is completed, here I came for one simple help from you all.

I want few text fields and drop down boxes should generate when user click on Add new item Button and the previous entered item should be displayed along with new fields. You all can see this on www.oemxtrade.com but actual page(myNewPage.php) can be viewed after login (its free)
http://www.oemxtrade.com/index.php?main_page=myNewPage

I know this is possible with Ajax. Here is the code of HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>oemXtrade.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<body>
<!-- start header -->
<div id="main">
<div id="cantaner">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">    
    <tr>
      <td align="left" valign="top" class="formheadtext">Create New Excess Part List (Manually) <br />
         <div class="formtext" id="helpbox">
          <div id="help">
            <ol>
              <li>Click on the &quot;Parts List/BOM Manager&quot; link.</li>
              <li>Click on the &quot;Create New Parts List       (Manually)&quot; link.</li>
              <li><span class="headingtext">To add items, enter a DK part number or Mfg part number, customer reference number (optional), quantity (qty), and press &quot;Enter&quot; or click the &quot;Add&quot; button.</span></li>
              <li><span class="headingtext">Note: if multiple qtys are desired, enter qty in 2 and 3 as well.</span></li>
              <li><span class="headingtext">Once all items are entered or added click on the &quot;Create Order,&quot; &quot;Create BOM,&quot; or &quot;Create Quote &quot; button to &nbsp;create an Order, BOM, or Quote.</span></li>
            </ol>
          </div>
          </div>        
        </td>
    </tr>
    <tr>
      <td align="center" valign="top" class="">&nbsp;&nbsp;<div align="center">
        <div id="box2">
          <div align="left"></div>
          <table width="1102" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="35" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>S.no</strong></div></td>
              <td width="71" align="left" valign="top" class="tdcolour"><p align="center" class="headingtext">Sell Part no. </p></td>
              <td width="103" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Category</strong></div></td>
              <td width="77" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Manu part</strong></div></td>
              <td width="103" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Manu name </strong></div></td>
              <td width="50" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Quantity</strong></div></td>
              <td width="35" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>SPQ</strong></div></td>
              <td width="75" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext">Currency</div></td>
              <td width="53" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Pur price</strong></div></td>
              <td width="104" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong> Device&nbsp;Package </strong></div></td>
              <td width="118" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Package&nbsp;type</strong></div></td>
              <td width="32" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>Date&nbsp;code </strong></div></td>
              <td width="51" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>ROHS</strong></div></td>
              <td width="51" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext"><strong>COC</strong></div></td>
              <td width="103" align="left" valign="top" class="tdcolour"><p align="center" class="headingtext">Procure&nbsp;souce</p>              </td>
              <td width="136" align="left" valign="top" class="tdcolour"><div align="center" class="headingtext">
                  <p><strong>STK&nbsp;Loc</p>
              </div></td>
            </tr>
            <tr>
              <td align="left" valign="top" class="td"><strong>1</strong></td>
              <td align="left" valign="top" class="td"><input name="textfield4" type="text" size="10" /></td>
              <td align="left" valign="top" class="td"><select name="select">
                  <option>---Select--</option>
              </select></td>
              <td align="left" valign="top" class="td"><input name="textfield42" type="text" size="20" /></td>
              <td align="left" valign="top" class="td"><select name="select2">
                  <option>---Select--</option>
              </select></td>
              <td class="td"><input name="textfield422" type="text" size="7" /></td>
              <td class="td"><input name="textfield423" type="text" size="5" /></td>
              <td class="td"><select name="select8">
                  <option>US $</option>
                  <option>EURO</option>
                  <option>INR</option>
              </select></td>
              <td class="td"><input name="textfield52" type="text" size="8" /></td>
              <td class="td"><select name="select3">
                  <option>BULK,ORIG</option>
                  <option>BULK,BR</option>
                  <option>T&amp;R,ORIG</option>
                  <option>T&amp;R, BR</option>
              </select></td>
              <td class="td"><select name="select4">
                  <option>DIRECT (DM)</option>
                  <option>DISTI (DI)</option>
                  <option>DEALER (DR)</option>
                  <option>OTHER (OT)</option>
              </select></td>
              <td class="td"><input name="textfield424" type="text" size="4" /></td>
              <td align="left" valign="top" class="td"><select name="select5">
                  <option>Y</option>
                  <option>N</option>
              </select></td>
              <td class="td"><select name="select6">
                  <option>Y</option>
                  <option>N</option>
              </select></td>
              <td class="td"><select name="select7">
                  <option>---Select--</option>
              </select></td>
              <td class="td"><input name="textfield522" type="text" size="5" /></td>
            </tr>
            <tr>
              <td colspan="16" align="left" valign="top" class="td">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="submit" name="Submit2" value="Add another part" />
                &nbsp;&nbsp;&nbsp;
              <input type="submit" name="Submit" value="Send Part List"  />
              <a href="excess_unique_name.html" class="logintext">link</a></td>
            </tr>
          </table>
        </div>
      </div></td>
    </tr>
    <tr>
      <td align="left" valign="top"></td>
    </tr>
    <tr>
      <td align="center" valign="top"><div style="padding-right:10px">
	    <div align="right" class="normaltext"><a href="oemXtrade_signin.html"><strong><img src="images/img13left.gif" alt="" border="0" width="4" height="7" />&nbsp;Back to Add Excess Inventory / Back to Search Page </strong></a><strong> </strong></div>
	  </div>
   
        </p></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  
</div>
</div>
</div>


<!-- end header -->
<!-- start page --><!-- end page -->
<!-- start footer -->
<!-- end footer -->
</body>
</html>

Thank you every body in advance.

  • 3 Contributors
  • 8 Replies
  • 156 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by vishalonne
Member Avatar for cwarn23

I would suggest using javascript (not ajax). Simply put an empty div field at the end and when the user clicks the button to add a row then javascript will append to that div making another row. That's the theory but I am guessing you want code. Below is a little snippet.

var newrow;
newrow='<input type="text" name="blah"><input type="text name="test">';
document.getElementById("rowid").innerHTML=document.getElementById("rowid").value+newrow;

That is just some code to give you a rough idea.

Member Avatar for rajabhaskar525

try like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script  language="javascript">
function createsize()
{
s_count=document.getElementById('si_count').value;
sz_count=document.getElementById('size_count').value;
var tbl = document.getElementById('table2');
sz_count1=sz_count;
if(s_count!=1)
{
//alert(sz_count);
sz_count=parseInt(sz_count)+ parseInt(s_count)-1;
//alert(sz_count);
}
  var lastRow = tbl.rows.length;
  for(i=lastRow;i>s_count+1;i--)
  {
  tbl.deleteRow(i);
  }
for(i=sz_count1;i<=sz_count;i++)
{
var j=parseInt(i)+1;
var oTR = tbl.insertRow(i);
var oC1TD = oTR.insertCell(0);
//alert("<input name='size"+ j+"' type='text' class='txtboxlong' id='size"+ j+"' value=''>");
oC1TD.innerHTML = "<input name='angle"+ j+"' type='text'  id='angle"+ j+"' value=''>";
var oC2TD = oTR.insertCell(1);
oC2TD.align="left";
oC2TD.innerHTML = "<input name='product_image"+j+"' type='file'  id='product_image"+j+"'>";

}
document.getElementById('size_count').value=i;
}
</script>
</head>

<body>
<form name="UserDetails" action="" method="post"  enctype="multipart/form-data" onSubmit="">
<table width="95%"  border="0" align="center" cellpadding="0" cellspacing="0">
 <tr align="center">
              <td>&nbsp;</td>
              <td align="left">No of Images </td>
              <td><strong>:</strong></td>
              <td align="left">
			 
			 <input name="si_count" type="text" id="si_count" value="1"  size="3">&nbsp;&nbsp;
				<input name="Button" type="button" class="buttons" value="Create Boxes" onClick="createsize();">
			 <?php /*?><input type="hidden" name="limage" value="<?=$logo_image?>">
			  <input type="file" name="logoimage"><?php */?>		  </td>
              <td>&nbsp;</td>
            </tr>
			<tr align="center">
			 <td>&nbsp;</td>
              <td align="left"></td>
              <td><strong>:</strong></td>
              <td align="left">
			   <input type="hidden" name="size_count" id="size_count" value="1">
			  <table width="40%" cellpadding="4"  cellspacing="0" id="table2">
			  	<tr>
					<td><strong>Product Angle</strong></td>
					<td><strong>Product Images</strong></td>
				</tr>
				<tr>
					<td><input name="angle1" type="text"  id="angle" value="" ></td>
					<td><input name="product_image1" type="file"  id="product_image1" ></td>
					</tr>
				    </table>
			   </td>
			    <td>&nbsp;</td>
            </tr>
			</table>
</body>
</html>

this shows adding of textboxs and uploadfiles . change it as per yours need.

Edited by rajabhaskar525 because: n/a
Member Avatar for vishalonne

try like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script  language="javascript">
function createsize()
{
s_count=document.getElementById('si_count').value;
sz_count=document.getElementById('size_count').value;
var tbl = document.getElementById('table2');
sz_count1=sz_count;
if(s_count!=1)
{
//alert(sz_count);
sz_count=parseInt(sz_count)+ parseInt(s_count)-1;
//alert(sz_count);
}
  var lastRow = tbl.rows.length;
  for(i=lastRow;i>s_count+1;i--)
  {
  tbl.deleteRow(i);
  }
for(i=sz_count1;i<=sz_count;i++)
{
var j=parseInt(i)+1;
var oTR = tbl.insertRow(i);
var oC1TD = oTR.insertCell(0);
//alert("<input name='size"+ j+"' type='text' class='txtboxlong' id='size"+ j+"' value=''>");
oC1TD.innerHTML = "<input name='angle"+ j+"' type='text'  id='angle"+ j+"' value=''>";
var oC2TD = oTR.insertCell(1);
oC2TD.align="left";
oC2TD.innerHTML = "<input name='product_image"+j+"' type='file'  id='product_image"+j+"'>";

}
document.getElementById('size_count').value=i;
}
</script>
</head>

<body>
<form name="UserDetails" action="" method="post"  enctype="multipart/form-data" onSubmit="">
<table width="95%"  border="0" align="center" cellpadding="0" cellspacing="0">
 <tr align="center">
              <td>&nbsp;</td>
              <td align="left">No of Images </td>
              <td><strong>:</strong></td>
              <td align="left">
			 
			 <input name="si_count" type="text" id="si_count" value="1"  size="3">&nbsp;&nbsp;
				<input name="Button" type="button" class="buttons" value="Create Boxes" onClick="createsize();">
			 <?php /*?><input type="hidden" name="limage" value="<?=$logo_image?>">
			  <input type="file" name="logoimage"><?php */?>		  </td>
              <td>&nbsp;</td>
            </tr>
			<tr align="center">
			 <td>&nbsp;</td>
              <td align="left"></td>
              <td><strong>:</strong></td>
              <td align="left">
			   <input type="hidden" name="size_count" id="size_count" value="1">
			  <table width="40%" cellpadding="4"  cellspacing="0" id="table2">
			  	<tr>
					<td><strong>Product Angle</strong></td>
					<td><strong>Product Images</strong></td>
				</tr>
				<tr>
					<td><input name="angle1" type="text"  id="angle" value="" ></td>
					<td><input name="product_image1" type="file"  id="product_image1" ></td>
					</tr>
				    </table>
			   </td>
			    <td>&nbsp;</td>
            </tr>
			</table>
</body>
</html>

this shows adding of textboxs and uploadfiles . change it as per yours need.

Yes It works but I have a big problem my page must be PHP page it can't be simple HTML page.

Member Avatar for vishalonne

I don't want to show code to every body

Member Avatar for cwarn23

I don't want to show code to every body

Could you elaborate on that. Php is server-side so php can't replace html however php can replace some sections of javascript. So please expand on that sentence.

Member Avatar for vishalonne

My main concern is that I have to send data of this form to database. How can I achieve that?

Member Avatar for cwarn23

Simply use method="POST" in your html form and some php code along the lines of the following.

if (isset($_POST) && !empty($_POST)) {
mysql_query('INSERT INTO `table` SET `column1`="'.mysql_real_escape_string(stripslashes($_POST['fieldname'])).'", `anothercolumn`="'.mysql_real_escape_string(stripslashes($_POST['anotherfield'])).'"') or die(mysql_error());
}
Member Avatar for vishalonne

Hi Raja

Code is working fine but after changing as my requirement I am facing 1 simple issue. Row is not increasing more that 10 how can I make it 11. Please guide me.

Thanking you in advance please solve my problem.
Vishal

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.