Getting the selected value from a dropdown list in a gridview using JavaScript

Can you provide guidance on how to access the value of a dropdownlist labeled [ddrateplan] in the following JavaScript code? The dropdown is situated within the gridview [DataExtensionList].

<asp:GridView ID="DataExtensionList" Width="100%" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:TemplateField HeaderText="Service No.">
        <ItemTemplate>
            <asp:HiddenField ID="hdid" runat="server" Value='<%#Eval("tran_id") %>' />
            <asp:DropDownList ID="drpphn" runat="server" CssClass="form-control" AutoPostBack="true"
                OnSelectedIndexChanged="drpphn_SelectedIndexChanged" SelectedValue='<%# Eval("phone_no") %>'>
                <asp:ListItem Value="0">Existing no</asp:ListItem>
                <asp:ListItem Value="1">New no</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="txtservicenumber" runat="server" Text='<%#Eval("service_number") %>'></asp:TextBox>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Rate Plan">
        <ItemTemplate>
            <asp:DropDownList ID="ddrateplan" runat="server" CssClass="form-control" AutoPostBack="true" onchange="mul();"
                OnSelectedIndexChanged="ddrateplan_SelectedIndexChanged"
                Style="margin: 0 !important; padding: 0 !important;" SelectedValue='<%# Eval("rate_plan") %>'>
                <asp:ListItem Value="0">Select Rate Plan</asp:ListItem>
                <asp:ListItem Value="35">p35</asp:ListItem>
                <asp:ListItem Value="59">p59</asp:ListItem>
                <asp:ListItem Value="89">p89</asp:ListItem>
            </asp:DropDownList>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Address">
        <ItemTemplate>
            <label>
                <asp:TextBox ID="txt_address" AutoPostBack="true" runat="server" Text='<%# Eval("address")%>'></asp:TextBox>
            </label>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

I attempted to use the following JavaScript example, but encountered issues...

 <script type="text/javascript">
     function mul() {

        var gv = document.getElementById("<%=DataExtensionList.ClientID %>");
         var dropvalue = gv.getElementsByTagName('ddrateplan');


         var rowcount = document.getElementById('<%=DataExtensionList.ClientID%>').rows.length;
         var textmonth = document.getElementById('<%=txtcontactperiod.ClientID%>').value;

        var total = 0;
        for (var i = 0; i < rowcount - 1; i++) {
            total += parseInt(dropvalue) * parseInt(textmonth)
        }
        if (textmonth > 0) {
            $("<%=hdvalue.ClientID%>").val(total);
            document.getElementById('<%=txttotalpayble.ClientID%>').value = total;
        }
        else {
            $("<%=hdvalue.ClientID%>").val("");
            document.getElementById('<%=txttotalpayble.ClientID%>').value = '';
        }
    }
</script>

Answer №1

For the solution, simply include the property of dropdown [ddrateplan] as clientidmode="static" and update the line of code in the JavaScript.

     var gv = document.getElementById("<%=DataExtensionList.ClientID %>");
     var dropvalue = gv.getElementsByTagName('ddrateplan');

Replace it with:

     var dropvalue = $("#ddrateplan").val();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Ajax in a custom WordPress page

I have created a customized page in my WordPress child theme and included it in the child theme function. Now I am trying to retrieve data from a database table using Ajax, but instead of showing the actual result, it just displays the same webpage. Can an ...

What is the best way to strip the text from a link that encompasses both text and an image using jquery?

I have a website with a list of items. Each item in the list has a link that includes both text and an image. Here is an example of the HTML structure: <li class="li-one" style=""> <a href="#" onclick="return ...

Develop an XML document with the use of either Javascript or PHP

I have an XML file that contains information about bracelets with photo details. <bracelets> <photo filename="b1.jpg" thumbnail="a1.jpg" description="aa" /> <photo filename="b2.jpg" thumbnail="a2.jpg" description="aa" /> & ...

Incorporate mobX into your completely functional component

After delving into React and React Native for 3 months, I have become quite proficient in functional components. Right from the start, I dove into writing a "hello world" function and have stuck with functions ever since. I focused on functional components ...

Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copie ...

Utilizing Javascript to maintain an ongoing sum within a <span> tag

I'm working on a code snippet to create a running total feature. Essentially, every time a user clicks a button to add the subtotal to the total, I want it to keep accumulating in the running total. Currently, the setup involves a dropdown menu with t ...

Searching for an element with a changing name using jQuery - Struggling with quotes

Looking to navigate my DOM based on the value of an option in a select box. The value of "searchkey" can vary based on user input, for example: searchkey = dell'anno searcheky = dell"anno These options, particularly the first one, can cause issues ...

Use leaflet.js in next js to conceal the remainder of the map surrounding the country

I'm currently facing an issue and would appreciate some assistance. My objective is to display only the map of Cameroon while hiding the other maps. I am utilizing Leaflet in conjunction with Next.js to showcase the map. I came across a helpful page R ...

The data visualization tool Highchart is struggling to load

As I try to integrate highcharts into my website, I encounter an unexpected error stating TypeError: $(...).highcharts is not a function. Below is the code snippet in question: @scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" ty ...

What is the process Wikipedia uses to transform keywords into clickable links?

Currently, I am working on a Node.js project involving a model called "tags". I am looking for a way to automatically turn any tags mentioned in comments into links leading to the relevant tag page. For instance, if a user types out "What is a chicken?", I ...

Tips for incorporating error messages based on specific errors in HTML

In the current setup, a common error message is displayed for all errors. However, I want to customize the error messages based on the specific type of error. For example, if the password is invalid, it should display "invalid password", and for an invalid ...

Executing a call back function after a successful POST, PUT, or DELETE request can be achieved through redux-observable

I have been using the code below for performing GET, POST, PUT, DELETE calls. While it works perfectly fine for GET requests, I am encountering an issue with entering the success(mergeMap) block for POST, PUT, and DELETE requests. Despite receiving a statu ...

What is the process for animating elements on the Mountain Dew website?

After searching extensively, I was unable to locate a JavaScript library that can animate elements in a similar manner as demonstrated here. Take a moment to explore the website beyond the introduction, experiment with applying different filters from the t ...

Unable to pass observable data when closing the pop-up

return{ // The following code can be found in index.js addItem: function () { alert("working"); Newram.show().then(function (response) `***// Calling show functionin Newram.js***` { var c = response; ...

Tips for successfully passing an array containing both String and JSX elements as props in NextJs

When I passed an array of strings and JSX as props, I encountered an error message stating "Missing 'key' prop for element in array eslint react/jsx-key" <Sec1Header MainText={[ "Your ", <span className= ...

Ways to eliminate unnecessary items from a JavaScript object array and generate a fresh array

My JavaScript object array contains the following attributes: [ { active: true conditionText: "Really try not to die. We cannot afford to lose people" conditionType: "CONDITION" id: 12 identifier: "A1" ...

A Vue button that toggles between three states depending on the value in an array

In my Vue project, I am working on loading an array when the page loads. I need to check the status of each line item in the array and display a specific button for each status using a 3-way toggle. Although I believe I understand the main concept, I am s ...

Cannot see the created item in Rails application when using RSpec, Capybara, Selenium, and JavaScript

Currently, I am in the process of developing a web store. The key functionality is already implemented where all products are displayed on one screen along with the list of ordered items. Whenever a product is selected for ordering, it should instantly app ...

Is there a way for me to determine when the modal animation has completed?

I'm currently using the modal feature in twitter-bootstrap and I am curious about how long it takes for the modal to appear before triggering an alert. To better illustrate my point, you can check out this example: HTML <button id="mod" class="b ...

I am looking to transmit a JWT token to my backend using next-auth

In my current project using Next.js, I have implemented authentication with next-auth. This project follows the MERN stack architecture. I am facing an issue where I need to retrieve the JWT token and send it to my backend server using next-auth along wit ...