[RESOLVED]Need help with jQuery or JS function – how to check if a duplicate string from other DDL on the same page?

Hi,

I’m working on a MVC3 web app, with c#, razor view. On 1 page, there are a list of DDLs with the same list to select from. The list has 10 options, and every DDL will have the same list, plus a "Custom" field; if the user select "Custom" then an input textbox
will replace the DDL, and user can input something — all this is already in place and working.

What I want to achieve is: I want to add a "duplicate check" jQuery or JS function, on this page, to do the following:

1) If for the 1st DDL, user already selected "FirstName", then for the rest of DDLs, they can not select "FirstName" anymore – the option "FirstName" will become "greyed-out" or unselectable; or – if user can still select it, then an error message will be
immediately displayed at the right side of the 2nd DDL.

2) Same concept for all other existing <select> fields – if there are 5 DDLs on this page, and "FirstName" and "LastName" and "Phone" are already selected/present, then for the 4th and 5th DDL, user can not select any of the 3 existing options;

3) Taking the "Custom" input fields into consideration – now, if there are also 3 Custom <input> fields, and the user has typed in "AAA" in the 1st <input> filed, then he can not type in "AAA" again in any other <input> fields; plus – he cannot type in anything
on the existing list of 10 options; e.g. he should not be able to type in "First Name" as it already exists on the standard list to be selected.

This page has a mix of <select> fields and <input> fields, to be considered for the duplication check – which I’m not sure what is the simplest approach…

Can someone suggest some direction? sample code to show the concept will be great!

Thanks,
Claudia

Make all the ddls and custom input boxes into one group with class. so that u can select all of them togather in jquery

  var inputs=$('.givenclass');
        inputs.each(function(){
            $(this).change(function(){
                var current=$(this);
                inputs.each(function(){
                    if(current.val() == $(this).val())
                    {
                        current.next().html("'"+current.val()+"' already entered");
                        break;
                    }
                });
            });

        });

Thanks cnuonline for your suggestion!

However, I don’t understand this comparison line of code:

if(current.val() == $(this).val())

You have already assigned $(this) to the var current…then, will this line of comparison already produce TRUE?

I must be missing something here..do you mind elaborating a bit?

Also – there is a 2nd comparison: for every <input> filed, the user cannot type in any of the 10 values already on the list for <select> – I think I know how to do this one: I’ll make an ajax call to a controller action to verify this in the action, compare
the <input> value to the 10 values, then return a message. — do you feel that this is a good approach?

Thanks,

Claudia

claudia888

You have already assigned $(this) to the var current…then, will this line of comparison already produce TRUE?

                var current=$(this);
                inputs.each(function(){
                    if(current.val() == $(this).val())

from third statement, $(this) is other control from each loop.

$(this) makes different depending on where it is been used

Hi cnuonline,

Thanks for the explanation. I tried the code exactly as you suggested, but VS shows an error on the line saying "break;", so I made 1 minor modification there; the rest is the same code.

Unfortunately, it does not work yet; Here is the html source generated below – please see if you can point out what is wrong, and what I should change:

here is the HTML for the DDL – there are multiple DDLs just like this one below; I added a class  "noDup" to every select field, per your suggestion:

 <table class="fieldTable">
            <tr>
                <td style="width: 200px">
                    <div class="editor-field">
                        <input id="LeadFieldName" name="LeadFieldName" type="hidden" value="" />
                        <input id="IsCustomField" name="IsCustomField" type="hidden" value="" />
                        <select class="noDup" id="LeadFieldID" name="LeadFieldID"><option value="0">- Select -</option>
<option value="1">FirstName</option>
<option value="2">LastName</option>
<option value="3">Phone</option>
<option value="4">CellPhone</option>
<option value="5">Email</option>
<option value="6">Address1</option>
<option value="7">Address2</option>
<option value="8">City</option>
<option value="9">State</option>
<option value="10">Zip</option>
<option value="11">Country</option>
<option value="30">Custom</option>
</select>
                        <span class="field-validation-valid" data-valmsg-for="LeadFieldID" data-valmsg-replace="true"></span>

                        <div class="errMessage"> </div>
                    </div>
                </td>
                <td>
                    <a class="removeLink" href="#">Remove</a>
                </td>
            </tr>

Here is the jQuery – I have made minor modification, add debugging lines:

<script type="text/javascript">
    $(document).ready(function () {
        
        var inputs = $(‘.noDup’);
        inputs.each(function () {
            $(this).change(function () {
                var current = $(this);
                var t = $.trim(current.val());
                current.next(".errMessage").text("");
               

                alert("current is: " + t); // this window always shows up

                inputs.each(function () {
                    if (t == $(this).val()) {

                        alert("current is: " + t + "; and $(this) is" + $(this).val()); 
// this window does show up; however, the next 2 lines don’t work

                        current.parents(‘tr’).find(".errMessage").text("You have already selected or entered the field.");
// this line does not work
                        current.parents(‘tr’).find(".noDup").focus(); // this line does not work
                        //break; // with this line in, the jQuery code does not run at all; I see the point of using this – but what is the replacement for this?
                        return false;
                    }
                    else {
                        alert("not a dup");

                        current.parents(‘tr’).find(".errMessage").text("");
                    }
                });
            });
        });

    });
</script>

Note: as you see, I’m trying to display the error message in the <div class="errMessage"> part. Please take this into consideration.

Please see if you have any further suggestion…I have a tight deadline on this page, and really appreciate your help!

Thanks,

Claudia

if work around, it works

I tested this. check it out

  var inputs = $('.noDup');
    inputs.each(function () {
        $(this).change(function () {
            var current = $(this);
            var isthisexistsinothers = false;            
                inputs.each(function () {
                    if (current.val() != "30" && $(this).attr("id") != current.attr("id") && current.val() == $(this).val()) {
                        isthisexistsinothers = true;
                    }
                });
                if (isthisexistsinothers) {
                    current.next().html("'" + $("#" + $(current).attr("id") + " option:selected").text() + "' already entered");
                }
                else
                    current.next().html("");
           
        });

    });

Hi cnuonline,

Thanks so much for the new suggestion – I tried it exactly as it is…however, it still does not work.

When I select "FirstName" in the 1st DDL, then select "FirstName" again in the 2nd and 3rd DDL – no error message shows up.

I will send you more html rendered..please take a look.

Thanks,
Claudia

Make sure the id of each select controls are unique.

LeadFieldID1,LeadFieldID2

Thanks cnuonline.

However, the next action is expecting a list – so these IDs should be the same; they are Enumerable. And the existing logic already works – so I cannot change the IDs.

Do you mind taking another look at the jQuery code again? You said it works on your end…but I tried the exact code, but it is not working for me.

Thanks,

Claudia

An update – I made the checking field part working, but the error message does not show; also, on this page, I can click a link and add a new <input> field, and add as many as I want.

For those "newly added fields" – since they were not there initially when the page was loaded, the "var inputs = $(".noDup")" line does not include them.

How can I force a "refresh" of executing this line, so all the newly added field are included in var inputs?

Any suggestions?

Here is the latest code:

var inputs = $(‘.noDup’);
        inputs.each(function () {
            $(this).change(function () {
                var current = $(this);
                var t = $.trim(current.val());
                current.parents(‘tr’).find(".errMessage").text("");

                alert("current is: " + t);

                inputs.each(function () {
                    if (t == $(this).val()) {

                        alert("Dup found. current is: " + t + "; and $(this) is" + $(this).val());

                        current.parents(‘tr’).find(".errMessage").text("You have already selected or entered the field."); // also, this line does not work
                        current.parents(‘tr’).find(".noDup").focus(); // this line does not work either
                        //break;
                        return false;
                    }
                    else {
                        alert("not a dup");

                        current.parents(‘tr’).find(".errMessage").text("");
                    }
                });
            });
        });

Thanks,
Claudia

claudia888

$(this).change(function () {

change to

  $(this).on("change",function () {

Thanks cnuonline – I will try that and report back.

BTW – any suggestion on how to make the error message show up? The alert window pops up, but this message does not show up (it should show up right below the input field).

current.parents(‘tr’).find(".errMessage").text("You have already selected or entered the field."); // also, this line does not work

Thanks,

Claudia

Update – I tried it; it does not work.

Any other suggestions?

Thanks,

Claudia

Hi Claudia,

claudia888

<tr>
                <td style="width: 200px">
                    <div class="editor-field">
                        <input id="LeadFieldName" name="LeadFieldName" type="hidden" value="" />
                        <input id="IsCustomField" name="IsCustomField" type="hidden" value="" />
                        <select class="noDup" id="LeadFieldID" name="LeadFieldID"><option value="0">- Select -</option>
<option value="1">FirstName</option>
<option value="2">LastName</option>
<option value="3">Phone</option>
<option value="4">CellPhone</option>
<option value="5">Email</option>
<option value="6">Address1</option>
<option value="7">Address2</option>
<option value="8">City</option>
<option value="9">State</option>
<option value="10">Zip</option>
<option value="11">Country</option>
<option value="30">Custom</option>
</select>
                        <span class="field-validation-valid" data-valmsg-for="LeadFieldID" data-valmsg-replace="true"></span>

                        <div class="errMessage"> </div>
                    </div>
                </td>
                <td>
                    <a class="removeLink" href="#">Remove</a>
                </td>
            </tr>

According to your code, you could try the below sample to show error message.

current.siblings(".errMessage").text("You have already selected or entered the field.");

Hope it will be helpful to you.

Best Regards,

Sw-ing

Thanks cnuonline! I made it work based on your suggestion.

Thanks,

Claudia

Leave a Reply