Click here to Skip to main content
15,877,915 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I m creating a dropdownlist with four values 1,2,5,10.and have a text box. i want to print value in text box when i select any value from dropdownlist.
i.e when i select 1 then tb(textbox) show 25
when i select 2 then tb(textbox) show 48
when i select 5 then tb(textbox) show 200
when i select 10 then tb(textbox) show 390

And i m creating a function add() and assigning the values to all...as below..
where ddl1 is id for dropdownlist.
and up1 is the id for textbox.

Its not working Properly.Plzz tell me wt is problem with this code or right code for this
HTML
 .style2
        {
            width: 100%;
        }
<script type="text/javascript">
    function add()
     {
         if (document.getElementById("ddl1").value== "1") 
         { 
         document.getElementById("up1").value=="25"
         }
         if (document.getElementById("ddl1").value == "2") 
         {
         document.getElementById("up1").value == "48"
         }
         if(document.getElementById("ddl1").value=="5")
         {
         document.getElementById("up1").value=="200"
         }
         if (document.getElementById("ddl1").value == "10") 
         { 
         document.getElementById("up1").value=="390"
         }

 }
 </script>



<form action="tryforddl1.aspx" method="post">
                            <select id="ddl1"  name="ddl1"  önchange="add()">
                            <option value="1">1</option> 
                            <option value="2">2</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                            </select>
                            <input type="text" id="up1"  /> 
    </form>
Posted
Updated 3-Jan-14 22:02pm
v3

to assign value use single equal sign =
and to compare value use double equal sign ==
instead of...
document.getElementById("up1").value=="25"

write...
document.getElementById("up1").value = "25"

Happy coding!
:)
 
Share this answer
 
Comments
Karthik_Mahalingam 4-Jan-14 4:12am    
5, good catch..
Aarti Meswania 4-Jan-14 4:43am    
Thank u! :)
Karthik_Mahalingam 4-Jan-14 4:45am    
Aarti, one thing i have to point is
we cannot use the keyword add(),
i tried in my local machine ..
check my solution too :)
Aarti Meswania 4-Jan-14 4:58am    
hi I have tried with 'add' function name
it is working
go to link
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
and paste code run and check it is working
<!DOCTYPE html>
<html>
<script type="text/javascript">
function add()
{
alert(1);
}
</script>
<body>
<button type="button" önclick="add()">Click Me!</button>
</body>
</html>
Karthik_Mahalingam 4-Jan-14 5:00am    
but in Internet explorer it is throwing an exception as "invalid pointer" if i use as "add1" it works fine .. weird ;)
HI Amit


add() is not supported in some IE browsers.
try with some other names as add1 ( apart from add() )

and also for assigning use = not ==

use simplified coding as:

JavaScript
function add1() { 
            var ddlvalue = document.getElementById("ddl1").value;
            var up1 = document.getElementById("up1");
            //console.log(ddlvalue);
            if (ddlvalue == '1')
                up1.value = '25';
            else if (ddlvalue == '2')
                up1.value = '48';
            else if (ddlvalue == '5')
                up1.value = '200';
            else if (ddlvalue == '10')
                up1.value = '390';

        }



HTML
<select id="ddl1"  onchange="add1()">
       <option  value="1">11</option>
       <option value="2">21</option>
       <option value="5">51</option>
       <option value="10">101</option>
   </select>
   <input type="text" id="up1" />



based on the conversation..
this might help you..
this is just the sample , you can start modifying to fulfill your needs.


HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.js.js"></script>

    <script type="text/javascript">
        function calculate() {
            var ddlqty = document.getElementById('ddlqty');
            var ddlweight = document.getElementById('ddlweight');
            var lblup = document.getElementById('lblup');
            var lbllp = document.getElementById('lbllp');
            lblup.innerText = ddlweight.value;
            var qty = parseFloat(ddlqty.value) * parseFloat(ddlweight.value)
            lbllp.innerText = qty;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">


        <table border="1">
            <tr>
                <td>QTY</td>
                <td>DESCRIPTION</td>
                <td>WEIGHT</td>
                <td>U/P</td>
                <td>L/P</td>
            </tr>
            <tr>
                <td>
                    <asp:DropDownList ID="ddlqty" onchange="calculate();" runat="server">
                        <asp:ListItem Text="1" />
                        <asp:ListItem Text="2" />
                        <asp:ListItem Text="3" />
                        <asp:ListItem Text="4" />
                        <asp:ListItem Text="5" />
                    </asp:DropDownList>
                </td>
                <td>Cadburry Dairy Milk
                </td>
                <td>
                    <asp:DropDownList ID="ddlweight" onchange="calculate();" runat="server">
                        <asp:ListItem Text="65 gms" Value="55.00" />
                        <asp:ListItem Text="165 gms" Value="125.00" />
                    </asp:DropDownList></td>
                <td>
                    <asp:Label ID="lblup" runat="server"></asp:Label></td>
                <td>
                    <asp:Label ID="lbllp" runat="server"></asp:Label></td>
            </tr>
        </table>




    </form>

</body>
</html>


ideas from site : http://www.chennaionlinegrocery.com/grocery/default.asp[^]
 
Share this answer
 
v4
Comments
amit1992 4-Jan-14 6:19am    
If i use this on large scale then its nt better methood. i want to perform this functionality for 300 items(each has 1,2,5,10 kg pkg. with different different mrps.) then according to this me should create 300 functions. how can i prevent use of functions on large amount using sql..plzz help me..i m confusing in this from last 4 days.
wt can i do.
Karthik_Mahalingam 4-Jan-14 6:31am    
then you can use arrays or comma seperated strings or objects to handle huge data ....

my solution is for only few check conditions..

post your reply.. i wil be back in 50 mins ...
amit1992 4-Jan-14 6:50am    
@Karthik sir.. i m prepairing a project for retail shop,have 300 items with different different size packings. (if we see another side after deliverd this project owner can update prices according to his wishes.{prices aren't always fix} so owner(non technical person) can not change every time in function) so me should use database bt how please give me some idea for use database and grid view(how can i use. plzz provide any way to solve this.)
Karthik_Mahalingam 4-Jan-14 7:47am    
ok. u need to create a page for fixing the price and store the values in the database..

in the front end you can read the values from db and do the validations as per the needs..
amit1992 4-Jan-14 11:04am    
kk sir..can u provide me a sample code for this type...Thnxx.If possible...plzzz on my email id or here..plzzz..
jainamit.it@gmail.com...plzzz
Change the function name: add() to any other like show()

and use = instead of ==

XML
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!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 runat="server">
    <title></title>
<script type="text/javascript">
    function Show() {
        if (document.getElementById("ddl1").value == "1")
        {
            document.getElementById("up1").value = "25";
        }
        if (document.getElementById("ddl1").value == "2")
         {

            document.getElementById("up1").value ="48"
        }
        if (document.getElementById("ddl1").value == "5")
         {
            document.getElementById("up1").value = "200"
        }
        if (document.getElementById("ddl1").value == "10")
        {
            document.getElementById("up1").value = "390"
        }
    }
</script>

</head>
<body>

<form action="tryforddl1.aspx" method="post">

<select id="ddl1" name="ddl1" onchange="Show()">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
<input type="text" id="up1" />
</form>
</body>
</html>
 
Share this answer
 
Comments
Karthik_Mahalingam 4-Jan-14 4:16am    
5, good catch
Sandeep Singh Shekhawat 4-Jan-14 6:29am    
Thank You @Karthik
amit1992 4-Jan-14 5:04am    
Thnxx for ur Replies.Its Working nw.
Sandeep Singh Shekhawat 4-Jan-14 6:29am    
Welcome dear @amit
Karthik_Mahalingam 4-Jan-14 6:32am    
:)

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900