It's Possible but don't know how to do

Question

vishalonne 12 Junior Poster in Training

14 Years Ago

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.

php

3 Contributors
8 Replies
156 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by vishalonne

cwarn23 387 Occupation: Genius

14 Years Ago

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.

rajabhaskar525 1 Junior Poster

14 Years Ago

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 14 Years Ago by rajabhaskar525 because: n/a

Reply to this topic

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.

vishalonne 12 Junior Poster in Training · Answer 1 · 2010-02-11T18:39:52+00:00

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.

vishalonne 12 Junior Poster in Training · Answer 2 · 2010-02-12T17:04:56+00:00

vishalonne 12 Junior Poster in Training

14 Years Ago

I don't want to show code to every body

cwarn23 387 Occupation: Genius Team Colleague Featured Poster · Answer 3 · 2010-02-12T18:34:51+00:00

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.

vishalonne 12 Junior Poster in Training · Answer 4 · 2010-02-12T19:16:42+00:00

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

cwarn23 387 Occupation: Genius Team Colleague Featured Poster · Answer 5 · 2010-02-12T19:36:06+00:00

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());
}

vishalonne 12 Junior Poster in Training · Answer 6 · 2010-02-15T18:40:24+00:00

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