Getting value from drop down list "select" tag and storing in DB ASP.net

Question

So I'm working on a form that obviously gets values from the user, including text values and items they select from a drop down list. I'm having a problem in finding a way to get the value chosen from my drop down list and storing it as one of my parameter values in my database.

Here's my javascript and html code for the select tag that I used to create the drop down list containing 4 items as shown.

    <script type="text/javascript">
        $(document).ready(function () {

            $('#packageList').change(function () {
                var value = $(this).val(); var toAppend = ''; var onePrice = 
        '$ 399';
                var threePrice = '$ 699'; var sixPrice = '$ 899'; var 
         twelvePrice = '$ 2999';

                if (value == 1) {
                    toAppend = "<input type='textbox'>"; 
    $("#container").html(onePrice); return;
                }
                if (value == 2) {
                    toAppend = "<text='$ 699'>"; 
    $("#container").html(threePrice); return;
                }
                if (value == 3) {
                    toAppend = "<text='$ 899 >"; 
    $("#container").html(sixPrice); return;

                }
                if (value == 4) {
                    toAppend = "<text='$ 2999'>"; 
   $("#container").html(twelvePrice); return;
                }
            });

        });
    </script>

Here is the html code in the body of my form.

  <select id="packageList" name="D1">
    <option value="0">Select </option>
    <option value="1">1 Months </option>
    <option value="2">3 Months </option>
    <option value="3">6 Months </option>
    <option value="4">12 Months </option>
     </select> </p>
     &nbsp;<div id="container"></div>

When my user click's on the "Submit" form button, the values entered will be added to the parameters in the destined table in my database, I am able to obtain the value of all the parameters (my form contains text boxes, and the drop down list) however I'm having a problem figuring out how I can get the value selected from my drop down list and storing it in my database. Do note that my drop down list as shown in the code above was created using the tag and I can not view the variable of it in my c# code in the background.

Any help is much appreciated. Thank you.

Make sure that your dropdown is inside the form and then check Request.Form["D1"] — Alex Kudryashev
– Alex Kudryashev, Commented Oct 29, 2017 at 17:27
@AlexKudryashev which form are you referring too, the above code is part of a table by the way. — Scarl
– Scarl, Commented Oct 30, 2017 at 9:43

WWW · Accepted Answer · 2017-10-30 15:02:19Z

1

At first sight, value got from val() is typeof string (although in == it is ok to compare "1" and 1, best practice using === will make your statement false)

In jQuery, there is a stuff called $.ajax, and you will need this to send back your data asynchronously (any method, including get, post, put, etc. can be used in ajax; HTML form only allow get and post, in general)

As you didn't show the other input text box, I just assume some simple name for this input.

$text = $("#text");
$content = $("#content");
$packageList = $("#packageList");
var data = {
    "text": $text().val(),
    "D1": $packageList.val()
};
$.ajax({
    "url": "api-endpoint-accepting-post", // example: "/post-form", if your API endpoint is /post-form
    "type": "POST", // HTTP method, it is common to use GET, POST; and others such as PUT, DELETE, or some other WebDAV method, etc., that normally browser cannot do these method to pass request to server via HTML form
    "data": JSON.stringify(data),
    // other stuff you might need to configure
    "contentType": "application/json; charset=utf-8",
    "dataType": "json", // if you are receiving from server in json format
    //
    "success": function (result, textStatus, jqXHR) {
        console.log(result);
        // do whatever you want if post to server is a success, and server return something to you
        // maybe update another textbox
        var json = JSON.parse(result);
        $("#container").text(json["some-property-sent-back-from-server"]);
    },
    "error": function (jqXHR, textStatus, errorThrown) {
        // can also look at those parameters above for the reason
        console.error("error");
    }
});

This code snippet is assumed server expects JSON string (data object in ajax); for form, you need to configure your ajax options (same level as data, type, url, ...)

edited Oct 30, 2017 at 15:02

answered Oct 29, 2017 at 18:02

WWW

635 bronze badges

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

8 Comments

Scarl Over a year ago

could you elaborate more on how i can include this in my above code please?

WWW Over a year ago

no in front of my computer so hard to type those codes... will do once available

Scarl Over a year ago

So I replace the code I posted in the question to the code in your answer? The ajax part?

WWW Over a year ago

Not replacing all, but put inside $(...).change and do some adjustments required, for the $.ajax part

WWW Over a year ago

Actually I need more information to know if the ajax part is put right after doc...ready or $(#packageList)...change; my gut feeling is to put inside $(#packageList).change([...]), since you might only want to “post” to server when the drop down box selection changed

|

Collectives™ on Stack Overflow

Getting value from drop down list "select" tag and storing in DB ASP.net

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related