Reputation: 315

Select option from DropDown and automaticly set value in another TextField ASP .NET MVC

I would like to choose an option from the dropdown menu and based on the selected option automaticly set the value in the second input field.

Like this:

I created javascript code but its not working properly.

$(function () {

    $("#artikel").keyup(function (e) {

        var val1 = $("#artikel").val(),
            result = "";

        if (val1.match = "Spletna aplikacija")
            result = 5;
        if (val1.match = "Namizna aplikacija")
            result = 10;
        if (val1.match = "Mobilna aplikacija")
            result = 13;
        if (val1.match = "Spletna stran")
            result = 20;

        $("#cena").val(result);
    });
});

Here is my .cshtml file (partial):

    <div class="form-group">
        @Html.LabelFor(model => model.artikel, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.artikel, new SelectList(new[] { String.Empty, "Spletna aplikacija - 5€", "Namizna aplikacija - 10€", "Mobilna aplikacija - 13€", "Spletna stran - 20€" } ))
            @Html.ValidationMessageFor(model => model.artikel, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.cena, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.cena, new { htmlAttributes = new { @class = "#artikel" } })
            @Html.ValidationMessageFor(model => model.cena, "", new { @class = "text-danger" })
        </div>
    </div>

And my controler POST Code:

    public ActionResult Create()
    {
        ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna");
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "zapStPostavke,artikel,kolicina,zapStDoumenta_tk,cena,popust,davek,znesek")] postavkaDokumenta postavkaDokumenta)
    {
        if (ModelState.IsValid)
        {
            db.postavkaDokumenta.Add(postavkaDokumenta);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        ViewBag.zapStDoumenta_tk = new SelectList(db.dokumentGlava, "zapStDokumenta", "kodaRacuna", postavkaDokumenta.zapStDoumenta_tk);
        return View(postavkaDokumenta);
    }

Can you guys plase help me, what im doing wrong?

Much thanks!

Upvotes: 1

Answers (3)

Anadi

Reputation: 754

Change your javascript code as mentioned bellow.

 $(function () {

            $("#artikel").change(function () {

                var val1 = $(this).val();
                var result = "";
                switch (val1) {

                    case "Spletna aplikacija - 5€":
                        result = 5;
                        break;
                    case "Namizna aplikacija - 10€":
                        result = 10;
                        break;
                    case "Mobilna aplikacija - 13€":
                        result = 13;
                        break;
                    case "Spletna stran - 20€":
                        result = 20;
                        break;

                }              
                $("#cena").val(result);
            });
        });

Upvotes: 2

Deep

Reputation: 9794

Based on you cshtml , i have tried to create a sample html. You can use the below code which match the value of the option with the current value of the select.

$(function() {

  $("#artikel").change(function(e) {

    var val1 = $("#artikel").val(),
      result = "";

    if (val1.match("Spletna aplikacija") != null)
      result = 5;
    if (val1.match("Namizna aplikacija") !== null)
      result = 10;
    if (val1.match("Mobilna aplikacija") !== null)
      result = 13;
    if (val1.match("Spletna stran") !== null)
      result = 20;

    $("#cena").val(result);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label>Artikel</label>
  <div class="col-md-10">
    <select id="artikel">
      <option "">Select</option>
      <option "Spletna aplikacija - 5€">Spletna aplikacija - 5€</option>
      <option "Namizna aplikacija - 10€">Namizna aplikacija - 10€</option>
      <option "Mobilna aplikacija - 13€">Mobilna aplikacija - 13€</option>
      <option "Spletna stran - 20€">Spletna stran - 20€</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label>Cena</label>
  <div class="col-md-10">
    <input id="cena" value="">
  </div>
</div>

Upvotes: 2

Curiousdev

Reputation: 5778

Your function should be like below

$(function () {

    $("#artikel").change(function (e) {

        var val1 = $("#artikel").val(),
            result = "";

        if (val1 == "Spletna aplikacija - 5€")
            result = 5;
        if (val1 == "Namizna aplikacija - 10€")
            result = 10;
        if (val1 == "Mobilna aplikacija - 13€")
            result = 13;
        if (val1 == "Spletna stran - 20€")
            result = 20;

        $("#cena").val(result);
    });
});

Upvotes: 2

Select option from DropDown and automaticly set value in another TextField ASP .NET MVC

Answers (3)

Related Questions