locked
When selecting particualar dropdown selected value and click on add button 2 dropdown values should be added to the listbox RRS feed

  • Question

  • User-2131921655 posted

    1) I have a text Box customername 

    2)Dropdown Containing Languages like (Arabic,Europe,French(candian),French(Europe),English,English(Asia),English(Hispanic), India,Europe,English,English(Asia),English(Hispanic),Dutch).

    3)When I enter a customer name in textbox and select drop down value as English(Asia) then in listbox customer name with English(Asia) will be added.

    Example:  John- English(Asia)

    4)But now when I select  French(Canadian) in drop downand click on add I need to get both the french(canadian) And French(Europe) in the listbox with same Customer Name.

    It Shouldbe Like

    John- French(candian)

    John- French(Europe).

    5)If there is already french(Europe) in the list box then if I select French(canadian) And click on add button then only french(canadian) should be added with customer name.

    Code:::

    <td class="label-left" align="left" rowspan="2">Alternate-Language Customer Name(s)</td>

    <asp:TextBox ID="txtAltLangAccName" runat="server" CssClass="input-text" MaxLength="360"

    Width="480px"></asp:TextBox>

    <td class="label-left" align="left">Language</td>

    <asp:DropDownList ID="ddlLangauge" runat="server" CssClass="input-text" Width="150px">

    </asp:DropDownList>                                                            <asp:ListBox ID="lstAltCustNames" runat="server" CssClass="input-text" Width="600px"

    Rows="4" SelectionMode="Single" EnableViewState="true"></asp:ListBox>

    <input type="hidden" id="hdnAltLangCustNamesColl" name="hdnAltCustNamesColl" runat="server" />

    <asp:Button ID="btnAltCustAdd" CssClass="button" Width="64px" Text="Add" CausesValidation="False" onclick="return UpdateAlternateCustomerNamesList('Add');"                                                                 runat="server"></asp:Button>

     

    <asp:Button ID="btnAltCustRemove" CssClass="button" Width="64px" Text="Remove" CausesValidation="False"                                                   runat="server"></asp:Button>

    javascript code::

    function UpdateAlternateCustomerNamesList(action) {

        if (action == "Add") {

            if ((!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) && (!(document.getElementById("ddlLangauge").selectedIndex > 0))) {

                alert("Alternate-Language Customer Name cannot be empty and please select a Language");

            } else if (!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) {

                alert("Alternate-Language Customer Name cannot be empty");

            } else if (!(document.getElementById("ddlLangauge").selectedIndex > 0)) {

                alert("Please select a Language");

            } else {

                var sNewLIText = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;

                var sNewLIValue = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).value;

                var lstAltCustNames = document.getElementById("lstAltCustNames");

                var count = 0;

                for (var i = 0; i < lstAltCustNames.options.length; i++) {

                    var lstAltCustName = lstAltCustNames[i].text.toString();

                    var lstAltCust = lstAltCustName.split(' - ');

                    if (lstAltCust[1] == (document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text)) {

                        count++;

                    }

                }

                if (count == 0) {

                    var nListItem = document.createElement("Option");

                    nListItem.text = sNewLIText;

                    nListItem.value = sNewLIValue;

                    document.getElementById("lstAltCustNames").options.add(nListItem);

                    document.getElementById("hdnAltLangCustNamesColl").value = sNewLIText + "[@#$$#@]" + sNewLIValue + "[@#$$#@]" + document.getElementById("hdnAltLangCustNamesColl").value;

     

                    var sLanguage = document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;

                    if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))

                        alert("Please check Colines");

     

                    document.getElementById("txtAltLangAccName").value = "";

                    if ($("#lstAltCustNames").children().length > 0) {

                        SortListbox('#lstAltCustNames');

                    }

                }

                else {

                    alert("An alternate name with the same language already exists for this customer.");

                }

            }

        }

        else {

     

            if (document.getElementById("lstAltCustNames").selectedIndex > -1) {

     

                var sAltCustName = document.getElementById("lstAltCustNames").options[document.getElementById("lstAltCustNames").selectedIndex].text;

                var sLanguage = sAltCustName.substring(sAltCustName.lastIndexOf("-") + 2, sAltCustName.length);

                if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))

                    alert("Please check Colines");

     

                document.getElementById("lstAltCustNames").options.remove(document.getElementById("lstAltCustNames").selectedIndex);

     

                var iNoOfAltLangCustNames = document.getElementById("lstAltCustNames").length;

                if (iNoOfAltLangCustNames > 0) {

                    var sUpdatedListOfAltLangCustNames = "";

                    for (var iIndex = 0; iIndex <= iNoOfAltLangCustNames - 1; iIndex++) {

                        if (sUpdatedListOfAltLangCustNames == "") {

                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value;

                        }

                        else {

                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value + "[@#$$#@]" + sUpdatedListOfAltLangCustNames;

                        }

                    }

                    document.getElementById('hdnAltLangCustNamesColl').value = "";

                    document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;

                }

                else {

                    //                        document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;

                    document.getElementById('hdnAltLangCustNamesColl').value = "";

                }

                if ($("#lstAltCustNames").children().length > 0) {

                    SortListbox('#lstAltCustNames');

                }

            }

            else

                alert("Please select Alternate-Language Customer Name");

        }

        return false;

    }

    Monday, July 29, 2019 1:06 PM

All replies

  • User665608656 posted

    Hi Mouni,

    According to your description, what I want to confirm to you is whether your needs are dynamic or fixed?

    Are they special processing only for French(candian) and French(Europe) data?

    If so, you can do this by making additional judgments when adding options.

    For more details , you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    function UpdateAlternateCustomerNamesList(action) {
    
        if (action == "Add") {
    
            if ((!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) && (!(document.getElementById("ddlLangauge").selectedIndex > 0))) {
    
                alert("Alternate-Language Customer Name cannot be empty and please select a Language");
    
            } else if (!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) {
    
                alert("Alternate-Language Customer Name cannot be empty");
    
            } else if (!(document.getElementById("ddlLangauge").selectedIndex > 0)) {
    
                alert("Please select a Language");
    
            } else {
    
                var sNewLIText = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;
    
                var sNewLIValue = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).value;
    
                var lstAltCustNames = document.getElementById("lstAltCustNames");
    
                var count = 0;
                var isAddFrench= false;
                for (var i = 0; i < lstAltCustNames.options.length; i++) {
    
                    var lstAltCustName = lstAltCustNames[i].text.toString();
    
                    var lstAltCust = lstAltCustName.split(' - ');
    if(lstAltCust[1].indexOf('French(Europe)')>-1)
    {
    isAddFrench = true;
    }
    
                    if (lstAltCust[1] == (document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text)) {
                         
                        count++;
    
                    }
    
                }
    
                if (count == 0) {
    
                    var nListItem = document.createElement("Option");
    
                    nListItem.text = sNewLIText;
    
                    nListItem.value = sNewLIValue;
    
                    document.getElementById("lstAltCustNames").options.add(nListItem);
    
    
                    document.getElementById("hdnAltLangCustNamesColl").value = sNewLIText + "[@#$$#@]" + sNewLIValue + "[@#$$#@]" + document.getElementById("hdnAltLangCustNamesColl").value;
               
     
    
                    var sLanguage = document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;
    
                    if(!isAddFrench && sLanguage.indexOf('French(canadian)')>-1)
                    {
     var nListItem = document.createElement("Option");
    
     nListItem.text = document.getElementById("txtAltLangAccName").value.trim() + " - French(Europe)";
    nListItem.value =document.getElementById("txtAltLangAccName").value.trim() + " - "+ $("option").filter(function() {
      return $(this).text() === "French(Europe)";
    }).first().attr("value");
     
                    document.getElementById("lstAltCustNames").options.add(nListItem);
    
                     }
                    if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))
    
                        alert("Please check Colines");
    
     
    
                    document.getElementById("txtAltLangAccName").value = "";
    
                    if ($("#lstAltCustNames").children().length > 0) {
    
                      //  SortListbox('#lstAltCustNames');
    
                    }
    
                }
    
                else {
    
                    alert("An alternate name with the same language already exists for this customer.");
    
                }
    
            }
    
        }
    
        else {
    
     
    
            if (document.getElementById("lstAltCustNames").selectedIndex > -1) {
    
     
    
                var sAltCustName = document.getElementById("lstAltCustNames").options[document.getElementById("lstAltCustNames").selectedIndex].text;
    
                var sLanguage = sAltCustName.substring(sAltCustName.lastIndexOf("-") + 2, sAltCustName.length);
    
                if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))
    
                    alert("Please check Colines");
    
     
    
                document.getElementById("lstAltCustNames").options.remove(document.getElementById("lstAltCustNames").selectedIndex);
    
     
    
                var iNoOfAltLangCustNames = document.getElementById("lstAltCustNames").length;
    
                if (iNoOfAltLangCustNames > 0) {
    
                    var sUpdatedListOfAltLangCustNames = "";
    
                    for (var iIndex = 0; iIndex <= iNoOfAltLangCustNames - 1; iIndex++) {
    
                        if (sUpdatedListOfAltLangCustNames == "") {
    
                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value;
    
                        }
    
                        else {
    
                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value + "[@#$$#@]" + sUpdatedListOfAltLangCustNames;
    
                        }
    
                    }
    
                    document.getElementById('hdnAltLangCustNamesColl').value = "";
    
                    document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;
    
                }
    
                else {
    
                    //                        document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;
    
                    document.getElementById('hdnAltLangCustNamesColl').value = "";
    
                }
    
                if ($("#lstAltCustNames").children().length > 0) {
    
                    SortListbox('#lstAltCustNames');
    
                }
    
            }
    
            else
    
                alert("Please select Alternate-Language Customer Name");
    
        }
    
        return false;
    
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table>
    
                <tr>
                    <td class="label-left" align="left" rowspan="2">Alternate-Language Customer Name(s)</td>
    
                    <asp:TextBox ID="txtAltLangAccName" runat="server" CssClass="input-text" MaxLength="360"
                        Width="480px"></asp:TextBox>
    
                    <td class="label-left" align="left">Language</td>
                </tr>
            </table>
            <asp:DropDownList ID="ddlLangauge" runat="server" CssClass="input-text" Width="150px" DataTextField="Language" DataValueField="Language">
            </asp:DropDownList>
            <asp:ListBox ID="lstAltCustNames" runat="server" CssClass="input-text" Width="600px"
                Rows="4" SelectionMode="Single" EnableViewState="true"></asp:ListBox>
    
            <input type="hidden" id="hdnAltLangCustNamesColl" name="hdnAltCustNamesColl" runat="server" />
    
    
            <asp:Button ID="btnAltCustAdd" runat="server" CssClass="button" Width="64px" Text="Add" CausesValidation="False" OnClientClick="return UpdateAlternateCustomerNamesList('Add');" />
    
    
            <asp:Button ID="btnAltCustRemove" CssClass="button" Width="64px" Text="Remove" CausesValidation="False" runat="server" />
        </form>
    </body>
    </html>

    The result of this work demo:

    If not, I hope you can explain your needs more detailed.

    Best Regards,

    YongQing.

    Tuesday, July 30, 2019 5:56 AM
  • User-2131921655 posted

    My need is dynamic. I need to get the data from Db when only selecting French(Canadian) option from Dropdown Need Both French(Canadian) and French(Europe). And this is special processing only  for french(Canadian) And French(Europe) Data.

    Tuesday, July 30, 2019 6:17 AM
  • User665608656 posted

    Hi Mouni,

    In my last reply, the data in the dropdownlist was actually retrieved from the database.

    If you're just specializing in French(Canadian) and French(European) data, you can use my last reply code to fulfill that requirement.

    Best Regards,

    YongQing.

    Tuesday, July 30, 2019 8:51 AM
  • User-2131921655 posted

    Thank u  Yongqing Yu....I will try This ....

    Tuesday, July 30, 2019 9:12 AM
  • User-2131921655 posted

    hi,

     if(!isAddFrench && sLanguage.indexOf('French(canadian)')>-1

    this condition is not making to go inside the loop so am using

    var sLanguage = document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;

    if (sLanguage == "French (Canadian)") {
    nListItem.text = document.getElementById("txtAltLangAccName").value.trim() + " - French (Europe)";
    nListItem.value = document.getElementById("txtAltLangAccName").value.trim() + " - " + $("option").filter(function () {
    return $(this).text() === "French (Europe)";
    }).first().attr("value");

    document.getElementById("lstAltCustNames").options.add(nListItem);
    }

    After going inside the loop am getting exception(Invalid Argument) in this line .

    document.getElementById("lstAltCustNames").options.add(nListItem);

    Can u Please give any alternate to add french(Europe) along with french(canadian) to the listbox

    Tuesday, July 30, 2019 10:34 AM
  • User665608656 posted

    Hi Mouni,

    this condition is not making to go inside the loop so am using

    I find that your data source is slightly different from mine.

    Your data source is French (Canadian) and mine is French(canadian). The spaces and capitals in it cause your code not to enter this interpretation.

    If you use my js code and your own data source directly, you will have this issue.

    My suggestion is that you need to check the code I've provided you and change some fixed data sources, such as French(canadian), to match your data sources, such as French (Canadian).

    The following code marks where you need to modify :

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    function UpdateAlternateCustomerNamesList(action) {
    
        if (action == "Add") {
    
            if ((!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) && (!(document.getElementById("ddlLangauge").selectedIndex > 0))) {
    
                alert("Alternate-Language Customer Name cannot be empty and please select a Language");
    
            } else if (!(document.getElementById("txtAltLangAccName").value.trim().length > 0)) {
    
                alert("Alternate-Language Customer Name cannot be empty");
    
            } else if (!(document.getElementById("ddlLangauge").selectedIndex > 0)) {
    
                alert("Please select a Language");
    
            } else {
    
                var sNewLIText = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;
    
                var sNewLIValue = document.getElementById("txtAltLangAccName").value.trim() + " - " + document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).value;
    
                var lstAltCustNames = document.getElementById("lstAltCustNames");
    
                var count = 0;
                var isAddFrench= false;
                for (var i = 0; i < lstAltCustNames.options.length; i++) {
    
                    var lstAltCustName = lstAltCustNames[i].text.toString();
    
                    var lstAltCust = lstAltCustName.split(' - ');
    if(lstAltCust[1].indexOf('French(Europe)')>-1)
    {
    isAddFrench = true;
    }
    
                    if (lstAltCust[1] == (document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text)) {
                         
                        count++;
    
                    }
    
                }
    
                if (count == 0) {
    
                    var nListItem = document.createElement("Option");
    
                    nListItem.text = sNewLIText;
    
                    nListItem.value = sNewLIValue;
    
                    document.getElementById("lstAltCustNames").options.add(nListItem);
    
    
                    document.getElementById("hdnAltLangCustNamesColl").value = sNewLIText + "[@#$$#@]" + sNewLIValue + "[@#$$#@]" + document.getElementById("hdnAltLangCustNamesColl").value;
               
     
    
                    var sLanguage = document.getElementById("ddlLangauge").item(document.getElementById("ddlLangauge").selectedIndex).text;
    
                    if(!isAddFrench && sLanguage.indexOf('French(canadian)')>-1)
                    {
     var nListItem = document.createElement("Option");
    
     nListItem.text = document.getElementById("txtAltLangAccName").value.trim() + " - French(Europe)";
    nListItem.value =document.getElementById("txtAltLangAccName").value.trim() + " - "+ $("option").filter(function() {
      return $(this).text() === "French(Europe)";
    }).first().attr("value");
     
                    document.getElementById("lstAltCustNames").options.add(nListItem);
    
                     }
                    if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))
    
                        alert("Please check Colines");
    
     
    
                    document.getElementById("txtAltLangAccName").value = "";
    
                    if ($("#lstAltCustNames").children().length > 0) {
    
                      //  SortListbox('#lstAltCustNames');
    
                    }
    
                }
    
                else {
    
                    alert("An alternate name with the same language already exists for this customer.");
    
                }
    
            }
    
        }
    
        else {
    
     
    
            if (document.getElementById("lstAltCustNames").selectedIndex > -1) {
    
     
    
                var sAltCustName = document.getElementById("lstAltCustNames").options[document.getElementById("lstAltCustNames").selectedIndex].text;
    
                var sLanguage = sAltCustName.substring(sAltCustName.lastIndexOf("-") + 2, sAltCustName.length);
    
                if (($("#hdnIsCNWCustomer").val() == "1") && (sLanguage == "English" || sLanguage == "French (Canadian)"))
    
                    alert("Please check Colines");
    
     
    
                document.getElementById("lstAltCustNames").options.remove(document.getElementById("lstAltCustNames").selectedIndex);
    
     
    
                var iNoOfAltLangCustNames = document.getElementById("lstAltCustNames").length;
    
                if (iNoOfAltLangCustNames > 0) {
    
                    var sUpdatedListOfAltLangCustNames = "";
    
                    for (var iIndex = 0; iIndex <= iNoOfAltLangCustNames - 1; iIndex++) {
    
                        if (sUpdatedListOfAltLangCustNames == "") {
    
                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value;
    
                        }
    
                        else {
    
                            sUpdatedListOfAltLangCustNames = document.getElementById("lstAltCustNames").options[iIndex].text + "[@#$$#@]" + document.getElementById("lstAltCustNames").options[iIndex].value + "[@#$$#@]" + sUpdatedListOfAltLangCustNames;
    
                        }
    
                    }
    
                    document.getElementById('hdnAltLangCustNamesColl').value = "";
    
                    document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;
    
                }
    
                else {
    
                    //                        document.getElementById('hdnAltLangCustNamesColl').value = sUpdatedListOfAltLangCustNames;
    
                    document.getElementById('hdnAltLangCustNamesColl').value = "";
    
                }
    
                if ($("#lstAltCustNames").children().length > 0) {
    
                    SortListbox('#lstAltCustNames');
    
                }
    
            }
    
            else
    
                alert("Please select Alternate-Language Customer Name");
    
        }
    
        return false;
    
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table>
    
                <tr>
                    <td class="label-left" align="left" rowspan="2">Alternate-Language Customer Name(s)</td>
    
                    <asp:TextBox ID="txtAltLangAccName" runat="server" CssClass="input-text" MaxLength="360"
                        Width="480px"></asp:TextBox>
    
                    <td class="label-left" align="left">Language</td>
                </tr>
            </table>
            <asp:DropDownList ID="ddlLangauge" runat="server" CssClass="input-text" Width="150px" DataTextField="Language" DataValueField="Language">
            </asp:DropDownList>
            <asp:ListBox ID="lstAltCustNames" runat="server" CssClass="input-text" Width="600px"
                Rows="4" SelectionMode="Single" EnableViewState="true"></asp:ListBox>
    
            <input type="hidden" id="hdnAltLangCustNamesColl" name="hdnAltCustNamesColl" runat="server" />
    
    
            <asp:Button ID="btnAltCustAdd" runat="server" CssClass="button" Width="64px" Text="Add" CausesValidation="False" OnClientClick="return UpdateAlternateCustomerNamesList('Add');" />
    
    
            <asp:Button ID="btnAltCustRemove" CssClass="button" Width="64px" Text="Remove" CausesValidation="False" runat="server" />
        </form>
    </body>
    </html>

    Best Regards,

    YongQing.

    Wednesday, July 31, 2019 2:55 AM