Dynamic Dropdown

Using javascript i have created dynamic fields in a form with an "add" button.If i press "add" button the fields get repeated.

Now my problem is that,after entering the values in the form,the values in the dropdown box field gets refreshed if i press the "add" button.

my requirement is that the "add" button should be pressed each time after entering the data before repeating the form.

After entering all the required values for the required number of times the "Submit" button should be pressed which takes all the values to the database at once.

The number of times the "add" button should be pressed will vary time to time.

Aug 26 '08 #1

Subscribe Post Reply

1983

RamananKalirajan

608

512MB

Hi Divya, I was not able to follow ur requirement. can you please post ur code what u have tried so far. I cant clearly catch ur requirement. In a form you are dynamically populating some text field. when u fill up the text field ur drop down gets changed. i cant get this point clearly.

Regards
Ramanan Kalirajan

Aug 26 '08 #2

divyac

[HTML]<html>
<head>
<script language="javascript">
function createTable(id,ctr)
{
var tbody = document.getElementById(id).getElementsByTagName(" TBODY")[0];
var i;
for(i=1;i<=ctr;i++)
{

var row1td1=document.createElement('TD');
var row1td1sel=document.createElement('select' );
row1td1sel.setAttribute('id','PA'+i,'NAME','prefer ence_access');
row1td1.appendChild(row1td1sel);

var subrow1_y=document.createElement('option');
subrow1_y.innerHTML='Y';
subrow1_y.value=1;

var subrow1_n=document.createElement('option');
subrow1_n.innerHTML='N';
subrow1_n.value=2;

row1td1sel.appendChild(subrow1_y);
row1td1sel.appendChild(subrow1_n);

var row1td2=document.createElement('TD');
var row1td2sel=document.createElement('select' );
row1td2sel.setAttribute('id','RA'+i,'NAME','reques t_access');
row1td2.appendChild(row1td2sel);

var subrow2_y=document.createElement('option');
subrow2_y.innerHTML='Y';
subrow2_y.value=1;

var subrow2_n=document.createElement('option');
subrow2_n.innerHTML='N';
subrow2_n.value=2;
row1td2sel.appendChild(subrow2_y);
row1td2sel.appendChild(subrow2_n);

var row1=document.createElement('TR');

var row1td3=document.createElement('TD');
var row1td3_n=document.createElement('INPUT');
row1td3.appendChild(row1td3_n);
row1td3_n.setAttribute('TYPE','text');
row1td3_n.setAttribute('NAME','UID'+i);
row1td3_n.setAttribute('ID','UID'+i);

var row1td4=document.createElement('TD');
var row1td4_n=document.createElement('INPUT');
row1td4.appendChild(row1td4_n);
row1td4_n.setAttribute('TYPE','text');
row1td4_n.setAttribute('NAME','CID'+i);
row1td4_n.setAttribute('ID','CID'+i);

row1.appendChild(row1td1);
row1.appendChild(row1td2);
row1.appendChild(row1td3);
row1.appendChild(row1td4);

tbody.appendChild(row1);
}
}

function addRowToTable()
{
var tbl = document.getElementById('t1head');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// select cell
var cell1 = row.insertCell(0);
var sel1 = document.createElement('select');
sel1.name = 'Categories';
sel1.id='RA'+iteration;
sel1.options[0] = new Option('Y', '0');
sel1.options[1] = new Option('N', '1');
cell1.appendChild(sel1);

// select cell
var cell2 = row.insertCell(1);
var sel2 = document.createElement('select');
sel2.name = 'preferences_access';
sel2.id='PA'+iteration;
sel2.options[0] = new Option('Y', '0');
sel2.options[1] = new Option('N', '1');
cell2.appendChild(sel2);

// left cell
var cell3 = row.insertCell(2);
var textNode = document.createElement('input');
textNode.setAttribute('type','text','name','text'+ iteration,'id','txt'+iteration);
cell3.appendChild(textNode);

// right cell
var cell4 = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'text' + (iteration+1);
el.id = 'txt' + (iteration+1);
cell4.appendChild(el);
}
</script>
<body bgcolor="#fffcd0" onLoad=createTable('t1head',0)>
<form >
<table class="layout" border="4" align="center" width="100%" id=t1head>
<tr>
<td align="left"><b> Categories </b></td>
<td align="left"><b> Items </b></td>
<td align="left"><b> Quantity </b></td>
<td align="left"><b> Price </b></td>
</tr>
</table>
<table>
<tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</tr><tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</table>
<table class="layout" border="0" align="center" id=tabBtn>
<tr>
<td align="center" colspan="2">
<input type="button" value="ADD" name="add" onClick="addRowToTable()">
</td>

<td align="center" colspan="2">
<input type="submit" value="SAVE" name="save">
</td>

<td align="center" colspan="2">
<input type="button" value="CANCEL" name="cancel" onClick="history.go(0)">
</td>
</tr>
</table>
</form>
</body>
</html>
[/HTML]
The above code is taken from the same forum posted by u which is the required one for me..Now my problem is the two dropdown boxes in which i have used ajax..i cant incorporate it in ur above code...the code which i tried was:

Expand|Select|Wrap|Line Numbers

     function generateRow() {

    var d=document.getElementById("div");

    d.innerHTML+="Category : ";
 
    d.innerHTML+="<select name='Categories' id='Categories" + numLinesAdded + "' onChange='itemCollect(this.value," + numLinesAdded + ")'><option value=''>------Select Category------</option><?php while($resultset=mysql_fetch_array($category)){?><option value='<?=$resultset['category_id'];?>'><?=$resultset['Categories']; ?></option><?php }?></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
 
    d.innerHTML+="Items : ";
 
    d.innerHTML+="<select id='itemList" + numLinesAdded + "'><option value=''>------Select an Item------</option></select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
 
    d.innerHTML+="Quantity : ";
 
    d.innerHTML+="<input type='text' maxlength='5' name='Quantity" + numLinesAdded + "' onkeypress='focusNext(this)'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
 
    d.innerHTML+="Price : ";
 
    d.innerHTML+="<input type='text' name='Price" + numLinesAdded + "'><br><br>" ;

    numLinesAdded++; 

    }

The values for the dropdown are taken directly from the database through ajax...Is it possible to fulfill my requirement????pls help me...

The problem with my code is that whenever i click "submit",the values in the dropdown gets refreshed and not saved which is rectified in ur code..

Aug 26 '08 #3

RamananKalirajan

608

512MB

Why can't you go for DOM rather using innerHTML. This seems to be some what new for me. I will try to help you out. In your code

[HTML]d.innerHTML+="<select name='Categories' id='Categories" + numLinesAdded + "' onChange='itemCollect(this.value," + numLinesAdded + ")'><option value=''>------Select Category------</option><?php while($resultset=mysql_fetch_array($category)){?>< option value='<?=$resultset['category_id'];?>'><?=$resultset['Categories']; ?></option><?php }?></select>      ";[/HTML]

instead of using this just give some static data in d.innerHTML. Like this

[HTML]d.innerHTML+= <select name="Categories" id="Categories" onChange="itemCollect(this)"><option value="1">Y</option> <option value="0">N</option></select>[/HTML]

and try running your code. Instead of retrieving the values from the DB just hard code it and test it out. if it works, you have to use DOM rather using innerHTML. just try it and post back the result i will try to help u out

Regards
Ramanan Kalirajan

Aug 26 '08 #4

divyac

Why can't you go for DOM rather using innerHTML. This seems to be some what new for me. I will try to help you out. In your code

[HTML]d.innerHTML+="<select name='Categories' id='Categories" + numLinesAdded + "' onChange='itemCollect(this.value," + numLinesAdded + ")'><option value=''>------Select Category------</option><?php while($resultset=mysql_fetch_array($category)){?>< option value='<?=$resultset['category_id'];?>'><?=$resultset['Categories']; ?></option><?php }?></select>      ";[/HTML]

instead of using this just give some static data in d.innerHTML. Like this

[HTML]d.innerHTML+= <select name="Categories" id="Categories" onChange="itemCollect(this)"><option value="1">Y</option> <option value="0">N</option></select>[/HTML]

and try running your code. Instead of retrieving the values from the DB just hard code it and test it out. if it works, you have to use DOM rather using innerHTML. just try it and post back the result i will try to help u out

Regards
Ramanan Kalirajan

No Ramanan,
Each and every change in the project deals with the database.The contents in the dropdown are not static.It will increase or decrease day by day...so the values have to be retrieved from the database...i have to replace that "Y" and "N" with my data from the database...so i have used that technique..No other go....Thanks for your help.dont put much effort...i ll try it out myself.......

Aug 26 '08 #5

RamananKalirajan

608

512MB

Wether you are getting the DB values getting loaded in the Select. Your problem is when you submit the data you are not getting the selected value. Instead the select gets refreshed itself. You want the Selected value also to be saved/submitted when the form is submitted

Regards
Ramanan Kalirajan

Aug 26 '08 #6

divyac

Yes exactly but now i ve come out with a new one..I am getting what i am expecting but i could not submit the values into the database...the javasript function is:

Expand|Select|Wrap|Line Numbers

   <script>

  var numLinesAdded = 0;

  var i=0;
 
    function generateRow() {
 
    var placeHolder=document.getElementById('appendElem');

    var placeHolderDiv=document.createElement('div');

    var Category=document.createElement('select');

    var Item=document.createElement('select');

    var itemQuantity=document.createElement('input');

    var itemPrice=document.createElement('input');

    var itemControl='itemList' + i;
 
            Category.setAttribute('id','catList','NAME','catList[]');

                Category.onchange=function(){itemCollect(this.value, itemControl);}
 
            Item.setAttribute('id',itemControl,'NAME','itemList[]');

                Item.innerHTML="<option value=''>------Select an Item------</option>";
 
            itemQuantity.setAttribute('id','itemQty','NAME','itemQty[]');
 
            itemPrice.setAttribute('id','itemPrice','NAME','itemPrice[]');
 
                    placeHolderDiv.appendChild(Category);

                    placeHolderDiv.appendChild(Item);

                    placeHolderDiv.appendChild(itemQuantity);

                    placeHolderDiv.appendChild(itemPrice);
 
                placeHolder.appendChild(placeHolderDiv);
 
        i++;

    } 

</script>

and the ajax function is:

Expand|Select|Wrap|Line Numbers

 var xmlHTTP

var itemXMLHTTP

var categoryXMLHTTP

var refId

//function to select Items

function itemCollect(str,ref)

//function itemCollect(str)

{

    refId=ref

    itemXMLHTTP = GetXmlHttpObject()

    if(itemXMLHTTP == null)

    {

        alert("XML-HTTP object was not Created")

        return;

    }

        var URL="items.php?c=" + str +"&randID=" + Math.random()

        itemXMLHTTP.onreadystatechange = categoryChanged

        itemXMLHTTP.open("GET",URL,"true")

        itemXMLHTTP.send(null)
 
}

//category list

function categoryCollect()

{
 
    categoryXMLHTTP = GetXmlHttpObject()

    if(categoryXMLHTTP == null)

    {

        alert("XML-HTTP object was not Created")

        return;

    }

        var URL="categoryListCollection.php?randID=" + Math.random()

        categoryXMLHTTP.onreadystatechange = listCategory

        categoryXMLHTTP.open("GET",URL,"true")

        categoryXMLHTTP.send(null)
 
}
 
//lists the category

function listCategory(){
 
    if(categoryXMLHTTP.readyState == 4){

        var categoryListing    = document.getElementById('catList')

        categoryListing.innerHTML=categoryXMLHTTP.responseText

    }
 
}
 
//calls this function on selectCategory onreadystatechange

function categoryChanged()

{
 
    if(itemXMLHTTP.readyState == 4)

    {
 
        document.getElementById(refId).innerHTML = itemXMLHTTP.responseText

    }
 
}
 
//function to create XMLHTTP object

function GetXmlHttpObject()

{

    var xmlHttp = null

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp = new XMLHttpRequest()

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")

      }

    catch (e)

      {

      try

        {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

        }

      catch (e)

        {

        alert("Your browser does not support AJAX!")

        }

      }

    }

   return xmlHttp

}

Here,items.php and categoryListCollection.php are the files from where the values are taken from the database for the dropdown boxes...
can u get me....can u understand what i am expecting...

Aug 26 '08 #7

RamananKalirajan

608

512MB

Hi, I am really happy that you over come ur previous problem. Now you are not able to save/submit the values in the DB. If yes means, can u post me the code how u are doing it

Regards
Ramanan Kalirajan

Aug 26 '08 #8

divyac

Hi, I am really happy that you over come ur previous problem. Now you are not able to save/submit the values in the DB. If yes means, can u post me the code how u are doing it

Regards
Ramanan Kalirajan

sorry for the delay in reply ramanan.i was on leave for the past 2 days....i ll send u my total code...today i am getting problem with foreach statement...and the appended values are not getting submitted...pls help me...

[HTML]<?php
include "connection.php";
session_start();
$select= mysql_query("select * from master_items");
$category = mysql_query("select * from master_category");
$supplier=mysql_query("select * from master_suppliers");

if(isset($_GET['submit']))
{
$result=mysql_query("select * from master_expenses where Item_id='$_GET[Items]'");
$resultset=mysql_fetch_array($result);
$item =mysql_query("select * from master_items where Item_id='$_GET[Items]'");
$items=mysql_fetch_array($item);

$current_Stock=$items['stock'];
$avgPrice=$items['avgPrice'];

$catList = $_GET['Categories'];
$itemControl= $_GET['itemList'];
$itemQty = $_GET['Quantity'];
$itemPrice = $_GET['Price'];

foreach($catList as $newQty)
{
$closing_Stock= $current_Stock + $itemQty;
$averagePrice= (float) ((($avgPrice*$current_Stock) + ($itemQty * $itemPrice)) / $closing_Stock );
$quantity=$itemQty;
$amount=$quantity*$itemPrice;

$insert=mysql_query("INSERT INTO master_expenses(Date,
category_id,
Item_id,
transaction,
Quantity,
Price,
Total,
supplier_Name,
invoice_Number,
closing_Stock,
Average,
preStock)
VALUES(curdate(),
'$_GET[Categories]',
'$_GET[Items]',
'$_GET[transaction]',
'$quantity',
'$itemPrice',
'$amount',
'$_GET[supplier_Name]',
'$_GET[invoice_Number]',
'$closing_Stock',
'$averagePrice',
'$current_Stock')") or die(mysql_error());

$update=mysql_query("update master_items set stock='$closing_Stock', avgPrice= $averagePrice where Item_id='$_GET[Items]'");
header('location:inward.php');
}
}
?>

<html>
<head>
<script language="javascript" src="deajax.js"></script>

<script>
var numLinesAdded = 0;
var i=0;

function generateRow() {

var placeHolder=document.getElementById('appendElem');
var placeHolderDiv=document.createElement('div');
var Categories=document.createElement('select');
var itemList=document.createElement('select');
var Quantity=document.createElement('input');
var Price=document.createElement('input');
var itemControl='itemList' + i;

Categories.setAttribute('id','catList','NAME','Cat egories[]');

Categories.onchange=function(){itemCollect(this.va lue, itemControl);}

itemList.setAttribute('id',itemControl,'NAME','ite mList[]');
itemList.innerHTML="<option value=''>------Select an Item------</option>";

Quantity.setAttribute('id','itemQty','NAME','Quant ity[]');

Price.setAttribute('id','itemPrice','NAME','Price[]');

placeHolderDiv.appendChild(Categories);
placeHolderDiv.appendChild(itemList);
placeHolderDiv.appendChild(Quantity);
placeHolderDiv.appendChild(Price);

placeHolder.appendChild(placeHolderDiv);

i++;
}
</script>
</head>

<body >

<form method="get">
<h3>Inward Transactions</h3>
<div><b>Select a supplier:</b></div>
<div>
<select name="supplier_Name" id="supplier_Name">
<option value="">------Select a Supplier------</option>
<?php while($resultset=mysql_fetch_array($supplier)){?>
<option value="<? echo $resultset['supplier_id']; ?>"><? echo $resultset['supplier_Name']; ?>
</option>
<?php }?>
</select>
</div>
<br>
<div><b>Invoice Number:</b></div>
<div><input type="text" size="30" name="invoice_Number" id="invoice_Number"/></div>
<br>
<div id="div"></div>
<br>
<div id='appendElem'></div>
<input type="button" value="Add Product(s)" onClick="generateRow(), categoryCollect()"/>
<input type="submit" name="submit" id="submit">
</form>
</body>
</html>[/HTML]

Aug 29 '08 #9

RamananKalirajan

608

512MB

After this line,
[HTML] placeHolder.appendChild(placeHolderDiv);[/HTML]
pls insert a line
[HTML]placeHolder.innerHTML=placeHolder.innerHTML;[/HTML]

This is a silly code but it refreshes ur container. Just try it out and post it back in the forum.

[Note: I am not very good at PHP. May be Acoder can help u out]

Regards
Ramanan Kalirajan.

Aug 29 '08 #10

acoder

16,027

Expert Mod 8TB

Firstly, test that your PHP code works as expected. If you have problems with your PHP code, ask in the PHP forum.

Aug 30 '08 #11

by: Bob Alston | last post by:

In 2002, "GrayJay" posted the following code: I did this in a jazz record catalogue to find composers - On a form "frmComposers" Create a text box - txtFindComposer, and add the following sub...

Microsoft Access / VBA

Events not firing (First time only) in a dynamic user control. Please help.

by: Shourie | last post by:

I've noticed that none of the child controls events are firing for the first time from the dynamic user control. Here is the event cycle. 1) MainPage_load 2) User control1_Load user clicks a...

ASP.NET

viewstate and dynamic table

by: russ | last post by:

Hi all, Here's a problem I'm having with a dynamic table. Following the guidelines here (http://www.codeproject.com/aspnet/dynamiccontrols.asp), which make perfect sense. The problem is that...

ASP.NET

Form Submit, Dynamic Dropdown

by: Jeff Uchtman | last post by:

I know I have done this but my mind is fried. I have a dynamic dropdown in a form. I need to pull both the dynamic dropdown's ID and name listed in the dropdown. Need a little help with grey...

ASP / Active Server Pages

dynamic datagrid dropdown valuechanged repopulate 2nd list editmo

by: cindy | last post by:

I have a dynamic datagrid. I have custom classes for the controls public class CreateEditItemTemplateDDL : ITemplate { DataTable dtBind; string strddlName; string strSelectedID; string...

ASP.NET

creating dynamic controls out of static controls

by: Tarscher | last post by:

hi all, I have this seemingly simple problem. I have lost a lot of time on it though. When a user selects a value from a dropdownlist (static control) a dynamic control is generated. I have...

ASP.NET

Creating a dynamic drop down menu

by: phpnewbie2007 | last post by:

I have 2 dynamic PHP dropdowns: The second dropdown populates from the first, depending on what is selected in the first. The page is showing issues in a department: The first dropdown...

PHP

Create Dynamic Dropdownlist Controls and related event - ASP.NET

by: MaryamSh | last post by:

Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button...

.NET Framework

Create Dynamic Dropdownlist Controls and related event

by: MaryamSh | last post by:

Create Dynamic Dropdownlist Controls and related event -------------------------------------------------------------------------------- Hi, I am creating a Dynamic Search in my application. I...

.NET Framework

Dynamic Dropdown Box

by: raamay | last post by:

I want to have a dynamic dropdown box whose entries would depend on the selection of an entry in the first dropdown box. BUT the second dropdown box should not reload, only the entries inside should...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Similar topics