List Database result in checkbox with AJAX and Jquery

Asked

Viewed 232 times

0

I have a function that searches the bank for an entity list and shows in select. However, I need this same list to be shown at checkbox where the user can check more than one option.
How to show this list of results in < input type="checkbox" name="" value=""id"">?
How to pick up the marked values in Submit?

Current JS mounts the list to a < Select >, need to replace to check:

 function CarregaEntrada() {
         $.ajax({
             url: "/Qualidade/Entidade/CarregaEntidade",
                //data: { representante: representante },
                async: false,
                success: function (data) {
                    $("#entrada").empty();
                    $("#entrada").append('<option value="0" disabled selected hidden>Selecione...</option>');

                    $.each(data, function (i, element) {
                        $("#entrada").append('<option value=' + element.Id + '>' + element.Descricao + '</option>');
                    });

                }
            });
        }

    });

current html- (need to replace select by check)

  <div class="col-md-10">
       <select class="form-control select2" id="entrada" name="entrada"></select>
      </div>
jquery asp.net-mvc html5 ajax

  • puts an id in the div for ease, for example "split" and changes the command inside the each for: $('#divEntradas').append('<input type="checkbox" name="entrada" id="' + element.Id +'" />' + element.Descricao);, now to add the checked you need some property in return telling if you are selected.

  • opa.. I’ll try your suggestion

  • @Ricardopunctual It worked. Thank you.. Now could you help me by guiding me on how to get the selected items in the form submission? - put in the answer and I mark as the right.

  • Yes, how is the data you need to go through ajax? an array of numbers, a string..?

  • @Ricardopunctual I will pass by AJAX the form and for each selected item, it will be an Insert in a table where it will contain the form ID and the Entity ID (1 :N ). The same form can have several entities.

  • posted as an answer to make it easier to visualize

Show 1 more comment

1 answer

1


So to get the result of the query Ajax and generate the checkboxes:

$.each(data, function (i, element) {
    $('#divEntradas').append('<input type="checkbox" name="entrada" id="' + element.Id +'" />' + element.Descricao);
});

To submit the form that has the checkboxes, you can use the serialize of JQuery to help:

var form = $('#id_do_form');

$.ajax({
  type: "POST",
  url: form.attr('action'),
  data: form.serialize(),
  success: function(resposta) {
     console.log(resposta);
  }
});

Here I took as a url to own action form, but could replace with another specific url.

  • Actually the form submission is quiet. Doubt is how to pick up the values marked in the check ja which is an array with the same name

  • Got it, this in javascript or Asp.net?

  • Asp.net mvc....

  • You can put in your method to receive a (FormCollection form). To read the checkboxes, you can access the collection by name: var checkboxes = form["entrada"]

Browser other questions tagged jquery asp.net-mvc html5 ajax

You are not signed in. Login or sign up in order to post.