Serializar Checkboxes – Converter Valores do checkbox em String

Estes dias na empresa que trabalho, lá estava eu na boa, curtindo um cafézinho expresso, quando me chega a secretária “Gilbeeeeeeeeeeeertoooooooooo, o botão enviar não está enviando, vou ter que digitar tudo de novooooooooooooo”.

Então pensei em resolver o problema, é claro, sou pago pra resolver problemas.

Entretanto, me deparei com uma situação digamos um tanto “estressante”.

Ter que criar cookies para mais de 55 campos do formulario de cadastro para quando o botão enviar não funcionar não se perderem os dados.

Cheio de frescura, inventei de criar este sistema em ajax, até que ficou bem interessante, entretanto, como as solicitações são enviadas via GET, como fazer com os “checkboxes”.

Ai, que dor de cabeça… mas depois de usar uma lógica, consegui fazer o que queria, e por isto gostaria de mostrar para vocês como fiz para serializar, ou seja, transformar os valores dos checkboxes, que são um Array em String.

Comentários explicam o que fiz:

<html>

<head>

<title>Serializar Checkbox</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

// jquery para evento onclick no botao com id teste

$(document).ready(

function()

{

$("#teste").click(

function() {

serializaCheckbox();

}

);

}

);

function serializaCheckbox()

{

// iniciamos uma string com aspas indicando o vazio;

var string = '&string=';

// Pegamos o elemento pelo seu nome, no caso 'input'

var inputs = document.getElementsByTagName('input');

// damos um loop na quantidade de elementos encontrados

for( var x = 0; x < inputs.length; x++ )

{

// verificamos se o tipo do mesmo é "checkbox" e se o atributo name é igual à 'campo'

if(inputs[x].type == "checkbox" && inputs[x].name == 'campo')

{

// verificamos se o elemento está marcado

if(inputs[x].checked == true)

{

// concatenamos o valor colocando uma virgula no final

string += inputs[x].value + ',';

}

}

}

// verificamos se o ultimo caractere é uma virgula, e sempre será

if (/,$/.test(string)) {

// substituimos o mesmo por um vazio

string=string.replace(/,$/,"")

}

alert(string);

}

</script>

</head>

<body>

<form>

<input type="button" id="teste" value="Testar" />

<br />

<input name="campo" type="checkbox" value="Azul" />Azul<br />

<input name="campo" type="checkbox" value="Vermelho" />Vermelho<br />

<input name="campo" type="checkbox" value="Verde" />Verde<br />

<input name="campo" type="checkbox" value="Preto" />Preto<br />

</form>

</body>

</html>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *