Click here to Skip to main content
14,579,188 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am trying to use JavaScript to update the value in a textbox when there is a change to the selected value of a dropdownlist. There are a lot of posts about this and none of them have worked for me. So I must be missing something.

This is where the dropdownlist come in.
<div runat="server" id="DivNoOfFlights" style="white-space: nowrap; height: 34px;">
<asp:Label CssClass="pcnt51left" ID="Label22" runat="server" Text="Number Of Flights"></asp:Label>
<asp:DropDownList CssClass="pcnt20right" Style="text-align: right;" ID="ddl_NoOfFlights" runat="server" onclick="myFunction()"></asp:DropDownList>
</div>

This is the textbox.
<div runat="server" id="DivGenPlty1" style="white-space: nowrap; height: 34px;">
<asp:Label CssClass="pcnt51left" ID="lblGenPlty1" runat="server" Text="General Penalty"></asp:Label>
<asp:TextBox CssClass="pcnt20right" ID="GenPlty1" runat="server"></asp:TextBox>
</div>


And here is the JavaScript.
<script type="text/javascript">

      function myFunction()
      {
          var ddl = document.getElementById("<%=ddl_NoOfFlights.ClientID%>");
          var Value = ddl.options[ddl.selectedIndex].value;
          var txtbx = document.getElementById("<%=GenPlty1.ClientID %>");
          if (Value == 0) { txtbx.text = "0"; }
          if (Value == 1) { txtbx.text = "0"; }
          if (Value == 2) { txtbx.text = "10"; }
          if (Value == 3) { txtbx.text = "20"; }
      }

  </script>

I have spent days trying to get this to work without success.
Hopefully somebody can help me with this.
Thanks,
Gerry

What I have tried:

Searched the internet for days looking at posts about a similar issue. They helped get me to this point but didn't get me over the line.
Posted
Updated 21-Jun-20 11:14am
Comments
0x01AA 21-Jun-20 8:03am
   
No idea, but is "runat="server" onclick="myFunction()" vs. Javascript not something contrary?
Rate this:
Please Sign up or sign in to vote.

Solution 1

I googled "update textbox using javascript" and the first result was

textbox - How to update an input text from javascript? - Stack Overflow[^]

compare this;

document.getElementById('txtField').value='new value here'


to what you have

txtbx.text = "0";


you set the "value" not the "text" so amend your code like so

function myFunction()
{
    var ddl = document.getElementById("<%=ddl_NoOfFlights.ClientID%>");
    var Value = ddl.options[ddl.selectedIndex].value;
    var txtbx = document.getElementById("<%=GenPlty1.ClientID %>");
    if (Value == 0) { txtbx.value = "0"; }
    if (Value == 1) { txtbx.value = "0"; }
    if (Value == 2) { txtbx.value = "10"; }
    if (Value == 3) { txtbx.value = "20"; }
}
   
Comments
0x01AA 21-Jun-20 9:56am
   
Please help a noob for more understanding this web stuff: But does "runat="server" not bite executing browser's Javascript? Thank you very much in advance.
F-ES Sitecore 21-Jun-20 10:05am
   
No, but if there is a server-side event like "OnClick" and you want to use the client-side event to run js there is usually a different property to set like OnClientClick. That's for buttons though, there is no server-side onclick event for a drop down so setting onclick="..." just renders that as a normal html attribute.
0x01AA 21-Jun-20 10:15am
   
Thank you very much.
Rate this:
Please Sign up or sign in to vote.

Solution 2

Thank you so much F-ES Sitecore for taking the time to answer this.
I did exactly as you suggested and it worked straight away.
The only thing that I had to change was the dropdownlist event from 'onclick' to 'onchange'. After doing that it now works exactly as I intended.
I never would have guessed that targeting the property 'text' instead of 'value' could be the problem.

Update 2020/07/09
Having thought over the issue for some time I have rationalised what is going on here.
I am no expert in this but this is just how I see it.

When the asp:textbox is rendered by the browser it is rendered as an HTML input element of type text like this
<input type="text" ...../>

This element has a property called 'value' and JavaScript is able to update it.
The change is able to be seen on the screen.

But it seems JavaScript is not able to update the 'text' property of the asp:textbox.

So, even though what we see on the screen has changed, the asp:textbox text property has not changed.

And that is why the new value on the screen is not posted back to the server.

The solution is to replace the asp:textbox with an HTML input element of type 'text'. Then the screen update works and the postback of the value also works.

It would be ideal if JavaScript could update the text property of the asp:textbox directly.

If anybody knows how to do that I am sure that a lot of people would like to know.
   
v2

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100