value from dropdownlist to textbox on selection

Question

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 3-Jan-14 21:54pm

amit1992

Updated 3-Jan-14 22:02pm

Karthik_Mahalingam

v3

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Aarti Meswania · Answer 1 · 2014-01-03T22:08:00

Solution 1

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!
:)

Posted 3-Jan-14 22:08pm

Aarti Meswania

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

Karthik_Mahalingam 4-Jan-14 5:01am

in IE its not working..

Aarti Meswania 4-Jan-14 5:15am

strange but it's working in IE too..

Karthik_Mahalingam 4-Jan-14 5:20am

my bad :( ..

Aarti Meswania 4-Jan-14 5:24am

actually I goggled also if any issue like this to confirm but no one have problem like this "IE not support add word as function name"

Karthik_Mahalingam 4-Jan-14 5:30am

might be problem with my machine only :) ..

but sandeep also mentioned to rename the method in his solution2..

Aarti Meswania 4-Jan-14 5:34am

hmm it might be related to ie version don't know but it worked on my machine

Karthik_Mahalingam 4-Jan-14 5:38am

cool :)

amit1992 4-Jan-14 6:29am

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 · Answer 2 · 2014-01-03T22:25:00

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[^]

Sandeep Singh Shekhawat · Answer 3 · 2014-01-03T22:12:00

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>

value from dropdownlist to textbox on selection

3 solutions

Solution 1

Solution 3

Solution 2

Add your solution here

Preview 0