How to redeem checkbox value in the form using serialize()?

Asked

Viewed 825 times

0

I have a form in which it is created dynamically using the method append. The result is something in this format:

$('#form').append("<tr><td class='td-min'><input value='"+item.role+"'"+
    +" name='"+item.prefix+"' type='checkbox'/> "+item.role+"</td></tr>'");

Above would be basically a form item, in which a list of items is generated dynamically.

Below, using AJAX, is how I intend to record in the database, however I do not know with redeem the values of checkbox. Behold:

jQuery('#form').submit(function(){
    var dados = jQuery(this).serialize();
    jQuery.ajax({
        type: "POST",
        url: "http://api.server.com/resgata",
        success: function( data )
        {

        }
    });
  return false;
});

How to redeem values from checkbox's dynamic (both checked how much unchecked) in the form using the method serialize()? It is possible?

javascript jquery ajax

  • When referring to the values you refer to the checked or value?

  • @Matheus checked as it says in the question itself.

2 answers

0

An alternative is to get the values of checkboxs and concatenate with the method serialize, since serialize() transforms the form values into a querystring valid:

jQuery('#form').submit(function(){
    var dados = jQuery(this).serialize() + getUnchecks();
    jQuery.ajax({
        type: "POST",
        url: "http://api.server.com/resgata",
        success: function( data )
        {

        }
    });
  return false;
});

function getUnchecks() {
  var uncheckdItemsStr = '';
  var domElement = document.getElementById("form");
  jQuery(domElement).find("input:checkbox:not(:checked)").each(function() {
    uncheckdItemsStr += '&' + jQuery(this).prop('name') + '=' + jQuery(this).prop('value');
  });

  return uncheckdItemsStr;
}

The return of getUnchecks will be something like:

&abc=cba&qwe=ewq&qwe=ewq

  • So if it’s an alternative, it means you can’t rescue the checkbox's with serialize() directly?

  • Actually @acklay, with checks I made a test and were serialized all of them were serialized, see. That’s how you’re implementing?

  • Yes, very close to what you did. But when the checkbox value is 0, I also have to send it to base as well. It seems to me it’s only rescued with serialize when the input is checked.

  • To do the reverse path @acklay, Concatenate only the checks not checked. I updated the response. The documentation does not explain this condition, but it makes sense not to serialize an unchecked check because in a form it was an option not selected, but if for you this information is important you can get it this way.

  • For me it is important because if the user unchecks something that was already marked, I have to delete/change in the database the key that was unchecked.

  • I edited the question and stressed better: (both checked how much unchecked)

  • The checked they will already get, the unchecked may be by my function.

  • It’s not unnecessary @Matheus, the serialize() will already get the selected inputs, if the function cover both will be duplicated, understand?! As for your suggestion, it is welcome, maybe you can include in your reply.

Show 3 more comments

0

With jQuery you can do this basically:

// Conversão de formulário para objeto Array
var dados = $(this).serializeArray();

// Conversão de objeto para URL
var query = $.param(dados);

dados should be something like:

[
    { name: 'nameDeUmaCheckBox', value: 'valorDaCheckBox' },
    ...
]

If you want the value of each checkbox to serialize as its respective state checked, try it:

var transform = $(this).clone();

// Muda o valor das checkboxes para o estado checked
// (0 ou 1 no exemplo)
transform.find('input[type=checkbox]').each(function() {
    this.value = this.checked ? 1 : 0;
});

So:

var dados = $(transform).serializeArray();
var query = $.param(dados);

Browser other questions tagged javascript jquery ajax

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