1

Tengo una duda, la cual es la siguiente: Estoy haciendo un cuestionario pero la dinámica es la siguiente:

1.- ¿Qué ciudades has visitado?
[] México
[] Brasil
[] África

La duda que tengo es cómo concateno las opciones que elijan en JavaScript, esa pregunta o preguntas están en un formulario de HTML pero quiero concatenar si eligen una o varias opciones para mandarlas como respuesta de esa pregunta.

La idea es que si eligen México y Brasil, se mande como respuesta: México || Brasil o algo que las separe pero que vengan las respuestas juntas en un String o algo para que mande esa respuesta concatenada.

Saludos.

1
  • No te recomiendo manejarlo concatenado, estarías haciendo una mala práctica, aunque sí funciona claro está hahaha. Así como lo tratas de hacer basta con un poco de código javascript o con jQuery para más rápido con el que cachas el submit del formulario, compruebas cuáles son los input type checkbox que están seleccionados y los recorres y as concatenando en una variable sus value, al final la variable se la asignas como valor a un input type hidden y allá en el servidor lo recibes y le haces un concat.Repito, mejor ponles el mismo nombre a los checkbox y en el server los guardas en array el 1 mar. 2017 a las 22:34

4 respuestas 4

1

var elementoPaises = document.getElementById('paises')
var paisesElegidos = []

function elegirPais(element){
    if (element.checked) {
        paisesElegidos.push(element.value)
    }else{
        paisesElegidos.splice( paisesElegidos.indexOf( element.value ), 1 )
    }
    elementoPaises.innerHTML = paisesElegidos.join(', ')
}
<p><input type="checkbox" value="Mexico" onclick="elegirPais(this)"> Mexico</p>
<p><input type="checkbox" value="Brasil" onclick="elegirPais(this)"> Brasil</p>
<p><input type="checkbox" value="Africa" onclick="elegirPais(this)"> Africa</p>

<p>Has visitado <span id="paises"></span></p>

5
  • +1 - Por ser el único que usa javascript.. si explicarías un poco el código / la idea... mejor el 1 mar. 2017 a las 23:44
  • * Vanilla javascript
    – ffflabs
    el 1 mar. 2017 a las 23:55
  • Facil, al hacer click en un checkbox, ejecutas la funcion elegirPais(this), el this que pasas por parametro, es el objeto del elemento (el checkbox como tal)... etonces lo que haces en la funcion es preguntar si el elemento esta checked, lo añade a un array, y si no, lo quita... despues se le hace un .join() al array para que lo convierta e un string, y lo imprime e el elemento co el id#paises el 2 mar. 2017 a las 0:22
  • @Franklin'jGil'z - Edita tu respuesta y pega tu comentario/explicación el 2 mar. 2017 a las 0:40
  • chamo dejame codear tranquilo!! estoy ocupado, si le funciona que lo use!!ya fin. el 2 mar. 2017 a las 0:48
0

Basta con que pongas el atributo "name" igual en los tres y en el lado del servidor los recibes como normalmente los recibirías pero los guardarías en un arreglo, lista, etc y ya.

0

Una manera de hacerlo, que tratará al conjunto de checkboxes como un array, es ponerle a todos el mismo nombre, seguido de corchetes [].

En ese caso, el request le pasa un arreglo de países al backend.

jQuery(document).ready(function() {

  jQuery('#probar').on('click',function() {
   console.log(jQuery('#checkboxes').serialize());
  });
});
label {
 clear:both;
 display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="checkboxes">

<label><input type="checkbox" name="pais[]" value="mexico"/>México</label>
<label><input type="checkbox" name="pais[]" value="chile"/>Chile</label>
<label><input type="checkbox" name="pais[]" value="colombia"/>Colombia</label>
<label><input type="checkbox" name="pais[]" value="argentina"/>Argentina</label>

<input type="submit" id="probar" value="enviar"  />

</form>

PD: Ninguna de las opciones es una ciudad, pero eso son detalles.

0

Este código te devolverá un array con los nombres de países seleccionados. Podrás usar ese array para las operaciones que necesites: sea mostrarlos en tu html, sea enviarlos a tu servidor a través de un archivo php

<!--jQuery-->

$(function() {
      $("#btn-paises").click( function()
      {
   		var arrPaises = $('input[name="paises"]:checked').map(function() 
        {
      		return $(this).val();
		    }).get();
            console.log(arrPaises);  
            alert(arrPaises);  

	    });
    });
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

<p>Países visitados:</p>
<label><input type="checkbox" id="cbox1" name="paises" value="Brasil"> Brasil</label><br>
<label><input type="checkbox" id="cbox2" name="paises" value="México"> México</label><br>

<label><input type="checkbox" id="cbox3" name="paises" value="Colombia"> Colombia</label><br>
<button id="btn-paises">Enviar Países</button>
<div id="datos"></div>


Ejemplo de resultado: Obtendrás un array con los valores de los checkbox seleccionados, con los cuales podrás operar para tus necesidades.

["Brasil", "México"]

Leer los valores del array es muy fácil, por ejemplo:

$.each(arrPaises, function (k, v) { 
  console.log('País: '+v); 
}); 

El nombre de cada país tendrá el valor v dentro del bucle.

Si quieres enviarlo al servidor a través de PHP le puedes pasar el array completo, sin leerlo, a tu PHP.

Es una manera limpia y ordenada de proceder. Todo dependerá de tus necesidades.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.