Issue with Select List Options in ASP.NET MVC Web Applications with JQuery

Question

One of my websites I am working on, http://www.michaelgworkman.com, is one that I created to help me get a job, and also help my career in general.

In have been trying to add a lightweight JQuery form validation for the contact form on this website, which is hosted on Microsoft Azure Cloud Platform and having problems. Referencing the drop down list for INTEREST in the form is always returning FALSE form when an option is not selected, and also returning FALSE when I select an item in the drop down list. Here is what the form looks like:

I have this in my form in the Razor view .cshtml file for my form:

And this is the HTML generated from the form:

When I submit the form without selecting an interest in the INTEREST drop down, it correctly returns a false from the JQuery in the file.

When I submit the form after selecting an interest, the JQuery still says an option has not been selected in the drop down list, this is how the form looks after selecting a value:

Here is the JQuery code that is always returning false even after selecting a value in the INTEREST drop down list.

I would like to know how to fix this problem, it has been stumping me for about an hour so far.

Michael G. Workman · Accepted Answer · 2019-05-18 19:10:04Z

1

Ok I found the problem here, I was using a wrong ID for the drop down list in the form, I was trying to use $("#ContractCategory"), but that is not the correct ID, the Razor code is automatically creating the ID as id="ContractCategories_ID", based on the name of the database table being used by the Entity Framework in this ASP.NET MVC Web Application. Simple fix, a little surprised I was working on this for about an hour, now the form works correctly.

answered May 18, 2019 at 19:10

Michael G. Workman

3852 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2019-05-18 18:59:17Z

0

For one thing, you don't have an element with id="ContactCategory" in the markup you're showing us, so if that selector isn't finding anything then false may indeed be the correct result. Try:

alert($('#ContactCategories_ID option').is(':selected'));

But even then, since that selector finds multiple elements then the semantics of what you're doing still may not make much sense and could return unexpected results. Instead of looking for a selected option, just check the value of the form element itself. Nomrally to get the value you might do something like:

let category = $('#ContactCategories_ID').val();

And check that value:

alert(category === '');

answered May 18, 2019 at 18:59

David

221k42 gold badges245 silver badges337 bronze badges

1 Comment

Michael G. Workman Over a year ago

Yes, that is exactly the source of the error to this problem, an incorrect ID of the form element, I just realized it after making my post, but thank you for pointing it out for me, a simple fix.

Collectives™ on Stack Overflow

Issue with Select List Options in ASP.NET MVC Web Applications with JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related