Save multiple checkbox values to sql database

Question

I have a html form, and i have also checkboxes in it. Values of checkboxes is coming from SQL-database via Web Api.

$(document).ready(function () {
  var $MaterialName = $('#materiallist');  

  function addMaterials(material) {
    $MaterialName.append('<input type="checkbox" >' + material.MaterialName + ' </input>');
  }

<div class="form-group">
  <label for="material" class="col-xs-3 control-label header">Käytetyt materiaalit</label>
  <div class="col-xs-7">
    <div class="checkbox" id="materiallist"></div>
  </div>
</div>

I want to save those checked values to another SQL-database (named Form), along with the other input values in that form.

I haven't found a solution where all the other input fields also needs to be saved as well, only solutions where is only checkboxes and button. Also, my values are coming from a database, and are not "hard-coded" options.

I tried this:

function getCheckedMaterials() {
  var materialArray = [];
  $("#materiallist input:checked").each(function () {
    materialArray.push($(this).val());
  });
  var selected;
  selected = materialArray.join(',');
  alert("You have selected " + selected);
}

This doesn't work as I need, because I can't get the values.

All these values from other input fields goes to the Form database when I press the #tallenna button. I need the checked values to be saved in MaterialName as text.

$('#tallenna').click(function () {
  var form = {
    FormFiller: $FormFiller.val(),
    CustomerContact: $CustomerContact.val(),
    ReadyToDate: $ReadyToDate.val(),
    Instructions: $Instructions.val(),
    Amount: $Amount.val(),
    PcsAmount: $PcsAmount.val(),
    ChargeFull: $ChargeFull.val(),
    ChargeByPcs: $ChargeByPcs.val(),
    FreightCost: $FreightCost.val(),
    CustomerName: $CustomerName.val(),
    WorkName: $WorkName.val(),
    MaterialName: getCheckedMaterials // ???? 
  };

Rory McCrossan · Accepted Answer · 2019-08-27 11:04:13Z

1

You appear to be asking how to return the data from the function to the property. As such, add a return statement in the function, and invoke it from the property by adding () at the end of the function name, like this:

function getCheckedMaterials() {
  var materialArray = $("#materiallist input:checked").map(function () {
    return this.value;
  }).get();
  return materialArray.join(',');
}

$('#tallenna').click(function (e) {
  e.preventDefault();
  var form = {
    // other properties...
    MaterialName: getCheckedMaterials()
  };

  // send 'form' in an AJAX request here...
});

I would suggest returning the plain materialArray array from the function and sending that in your AJAX request to your WebAPI endpoint. That way you can modelbind it to a string[] or IEnumerable<string> which makes it easier to work with.

edited Aug 27, 2019 at 11:04

answered Aug 27, 2019 at 10:57

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

4 Comments

HeiJoe Over a year ago

Got value "on" to database. How do i get "names" of the checked boxes in database? That was the original question.

Rory McCrossan Over a year ago

Add value attributes to the checkbox HTML

$MaterialName.append('<input type="checkbox" value="' + material.MaterialName + '">' + material.MaterialName + ' </input>');

.

HeiJoe Over a year ago

Now there is "foo" in my database, not name of material. MaterialNames are coming from database, i cant put value to every material. Any other idea how to tell that value is same as MaterialName?

Rory McCrossan Over a year ago

So put the variable in to the value..? I've edited it for you.

Collectives™ on Stack Overflow

Save multiple checkbox values to sql database

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related