locked
Passing more than 1 parameter RRS feed

  • Question

  • User-1767698477 posted

    I'm trying to pass not only THIS but also a textbox to a javascript function. Based on which selection is made in the dropdown, the textbox which is just to the right of the dropdown is filled with the contents from another textbox on the page. There are maybe 100 dropdown boxes with the same number of text boxes. Here's a sample:

    <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, txtdiscountpayee)">
                        <asp:ListItem Value="0" Text="-Select-" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Investor"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Affiliate"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Other"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:TextBox ID="txtdiscountpayee" runat="server" Width="165" MaxLength="25"></asp:TextBox>

    The call to the function passes this ok, and I can access the dropdown. The value of the textbox is stored in tbox and I can access the value, but I don't know how to use it to access the textbox on the page and modify the contents. See below.

     <script type="text/javascript">
            function payees(ddinfo, tbox) {
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
              
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    var SelectElement = document.getElementById(ddinfo.id);
                    //var SelectElement = document.getElementById('<%=Dddiscountpaidto.ClientID%>');
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        console.log("Selected item loandiscount: " + selecteditem);
                        document.getElementById(tbox.id).value = txtbroker;
                       
                      
                    } else if (text == "-Select-") {
                       ;
                        document.getElementById(tbox.id).value = "";
                    }
                }
            }
        </script>

    The tbox variable hold the name of the textbox which needs to get populated.

    I don't know how to make this work syntactically. How does one extract the contents and use it in conjunction with :

    document.getElementById('<%="'" + tbox + "'".clientid%>').value = txtbroker;

     document.getElementById('<%=txtdiscountpayee.ClientID%>').value = txtbroker;

    Saturday, November 28, 2020 8:29 PM

Answers

  • User1535942433 posted

    Hi sking,

    Accroding to your description and codes,it's problem is cann't find the control. When you write a change function in the dropdownlist, the server side will identify payees(this, '<%=txtdiscountpayee.ClientID%>') as a string. And txtdiscountpayee.ClientID will be passed to tboxId. So, you cann't find contorl id as txtdiscountpayee.ClientID. I suggest you add ClientIDMode="Static" and pass txtdiscountpayee instead of txtdiscountpayee.ClientID.

    Just like this:

     <script type="text/javascript">
            function payees(ddinfo, tboxId) {
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
               
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    var SelectElement = document.getElementById(ddinfo.id);
                    console.log("Dropdown info ID: " + ddinfo.id);
                    //var SelectElement = document.getElementById('<%=Dddiscountpaidto.ClientID%>');
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        console.log("Selected item loandiscount: " + selecteditem);
                        //document.getElementById(tboxid).value = txtbroker;
                        var tbox = document.getElementById(tboxId);
                        //console.log("textbox: " + tboxId); 
                       tbox.value = txtbroker;
                    } else if (text == "-Select-") {
                        document.getElementById('<%=txtdiscountpayee.ClientID%>').value = "";
                    }
                }
            }
        </script>
     <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, 'txtdiscountpayee')">
                        <asp:ListItem Value="0" Text="-Select-" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Investor"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Affiliate"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Other"></asp:ListItem>
                    </asp:DropDownList>
                 <asp:TextBox runat="server" ID="txtdiscountpayee" ClientIDMode="Static" />
                <asp:CheckBox  runat="server" Checked="true" ID="cbbroker"/>
                 <asp:TextBox runat="server" ID="txtbroker" Text="Test" />

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 2, 2020 8:48 AM

All replies

  • User1535942433 posted

    Hi sking,

    Accroding to your description,I don't understand your requirment clearly.Do you need to combine to use javascript and pass parameter?

    I have created a test like this:

     function payees(ddinfo, tbox) {
                var ddinfo = document.getElementById('<%=Dddiscountpaidto.ClientID%>');
                var tbox = document.getElementById('<%=txtdiscountpayee.ClientID%>');
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
              
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    //var SelectElement = document.getElementById(ddinfo.id);
                    var SelectElement = ddinfo;
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        console.log("Selected item loandiscount: " + selecteditem);
                        tbox.value = txtbroker;
                    } else if (text == "-Select-") {
                        tbox.value = "";
                    }
                }
            }
     <asp:DropDownList runat="server" ID="Dddiscountpaidto" onchange="payees()">
                    <asp:ListItem Value="0" Text="-Select-"></asp:ListItem>
                    <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                    <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                    <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                </asp:DropDownList>
                <asp:TextBox runat="server" ID="txtdiscountpayee" />
                <asp:CheckBox  runat="server" Checked="true" ID="cbbroker"/>
                 <asp:TextBox runat="server" ID="txtbroker" Text="Test" />

    Result:

    Best regards,

    Yijing Sun

    Monday, November 30, 2020 8:08 AM
  • User-474980206 posted

    you should pass the id, rather than variable name:

    <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, '<%=txtdiscountpayee.ClientID%>')">

    then lookup the element:

           function payees(ddinfo, tboxId) {
                var tbox = document.getElementById(tboxid);



     

    Monday, November 30, 2020 5:05 PM
  • User-1767698477 posted

    Thanks for your help on it Bruce and passing the ClientID is the preferred method so I don't have to hard code every single textbox I'm trying to change into the function. I'm able to get this below into my debugger so the tbox is there holding the ClientID.  The problem is getting this line to work:   document.getElementById("'" + tbox + "'").value = txtbroker;

    Dropdown info ID: ctl00_ContentPlaceHolder2_Dddiscountpaidto
    fees.aspx:27 Selected item loandiscount: 1
    fees.aspx:30 textbox: <%=txtdiscountpayee.ClientID%>

    Uncaught TypeError: Cannot set property 'value' of null
        at payees (fees.aspx:31)

    <script type="text/javascript">
            function payees(ddinfo, tboxId) {
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
               
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    var SelectElement = document.getElementById(ddinfo.id);
                    console.log("Dropdown info ID: " + ddinfo.id);
                    //var SelectElement = document.getElementById('<%=Dddiscountpaidto.ClientID%>');
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        console.log("Selected item loandiscount: " + selecteditem);
                        //document.getElementById(tboxid).value = txtbroker;
                        var tbox = document.getElementById(tboxId);
                        //console.log("textbox: " + tboxId); 
                        document.getElementById("'" + tbox + "'").value = txtbroker;  <--not working. 
    
                    } else if (text == "-Select-") {
                        document.getElementById('<%=txtdiscountpayee.ClientID%>').value = "";
                    }
                }
            }
        </script>
    
    
     <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, '<%=txtdiscountpayee.ClientID%>')">
                        <asp:ListItem Value="0" Text="-Select-" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Investor"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Affiliate"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Other"></asp:ListItem>
                    </asp:DropDownList>
    

    Tuesday, December 1, 2020 2:59 AM
  • User1535942433 posted

    Hi sking,

    Accroding to your description and codes,it's problem is cann't find the control. When you write a change function in the dropdownlist, the server side will identify payees(this, '<%=txtdiscountpayee.ClientID%>') as a string. And txtdiscountpayee.ClientID will be passed to tboxId. So, you cann't find contorl id as txtdiscountpayee.ClientID. I suggest you add ClientIDMode="Static" and pass txtdiscountpayee instead of txtdiscountpayee.ClientID.

    Just like this:

     <script type="text/javascript">
            function payees(ddinfo, tboxId) {
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
               
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    var SelectElement = document.getElementById(ddinfo.id);
                    console.log("Dropdown info ID: " + ddinfo.id);
                    //var SelectElement = document.getElementById('<%=Dddiscountpaidto.ClientID%>');
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        console.log("Selected item loandiscount: " + selecteditem);
                        //document.getElementById(tboxid).value = txtbroker;
                        var tbox = document.getElementById(tboxId);
                        //console.log("textbox: " + tboxId); 
                       tbox.value = txtbroker;
                    } else if (text == "-Select-") {
                        document.getElementById('<%=txtdiscountpayee.ClientID%>').value = "";
                    }
                }
            }
        </script>
     <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, 'txtdiscountpayee')">
                        <asp:ListItem Value="0" Text="-Select-" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Investor"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Affiliate"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Other"></asp:ListItem>
                    </asp:DropDownList>
                 <asp:TextBox runat="server" ID="txtdiscountpayee" ClientIDMode="Static" />
                <asp:CheckBox  runat="server" Checked="true" ID="cbbroker"/>
                 <asp:TextBox runat="server" ID="txtbroker" Text="Test" />

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 2, 2020 8:48 AM
  • User-1767698477 posted

    Thanks! Got it working now.

     <script type="text/javascript">
            function payees(ddinfo, tboxId) {
                var cbbroker = document.getElementById('<%=cbbroker.ClientID%>');
                var txtbroker = document.getElementById('<%=txtbroker.ClientID%>').value;
                var cblender = document.getElementById('<%=cblender.ClientID%>');
                var txtlender = document.getElementById('<%=txtlender.ClientID%>').value;
                var cbinvestor = document.getElementById('<%=cbinvestor.ClientID%>');
                var txtlender = document.getElementById('<%=txtinvestor.ClientID%>').value;
    
                if ((cbbroker.checked == true) && (txtbroker.length > 0)) {
                    var SelectElement = document.getElementById(ddinfo.id);
                    console.log("Dropdown info ID: " + ddinfo.id);
                    var selecteditem = SelectElement.options[SelectElement.selectedIndex].value;
                    var text = SelectElement.options[SelectElement.selectedIndex].text;
                    if (text == "Broker") {
                        var tbox = document.getElementById(tboxId);
                        document.getElementById(tboxId).value = txtbroker;
                        tbox.value = txtbroker;
                        console.log("text: " + text);
                    } else if (text == "-Select-") {
                        var tbox = document.getElementById(tboxId);
                        tbox.value = "";
                        //document.getElementById('<%=txtdiscountpayee.ClientID%>').value = "";
                    }
                }
            }
        </script>
    
    
    <asp:DropDownList ID="Dddiscountpaidto" runat="server" onchange="payees(this, 'txtdiscountpayee')">
                        <asp:ListItem Value="0" Text="-Select-" Selected="True"></asp:ListItem>
                        <asp:ListItem Value="1" Text="Broker"></asp:ListItem>
                        <asp:ListItem Value="2" Text="Broker Affiliate"></asp:ListItem>
                        <asp:ListItem Value="3" Text="Lender"></asp:ListItem>
                        <asp:ListItem Value="4" Text="Lender Affiliate"></asp:ListItem>
                        <asp:ListItem Value="5" Text="Investor"></asp:ListItem>
                        <asp:ListItem Value="6" Text="Affiliate"></asp:ListItem>
                        <asp:ListItem Value="7" Text="Other"></asp:ListItem>
                    </asp:DropDownList>
     <asp:TextBox ID="txtdiscountpayee" runat="server" Width="165" MaxLength="25" ClientIDMode="Static"></asp:TextBox>
    

    Wednesday, December 2, 2020 1:50 PM