0

tengo un problema en mi codigo.

Como lo dice el titulo, tengo un formulario en el cual tengo una serie de input type="radio", el tema es que puedo seleccionar varios en lugar de uno, y consigo el problema, no se si mi archivo.js este afectando en algo o es unicamente en el index.html.

<form id="formWebs">
    <table class="table table-responsive">
      <thead>
        <tr>
          <th>Servicio</th>
          <th>Precio</th>
        </tr>
      </thead>
        <tbody>

            <tr id="porfolio">
                <td>
                    <div class="form-check">
                        <input class="form-check-input input" type="radio" name="porfolio" id="radios1" value="2300">
                        <label class="form-check-label" for="radios1"> Porfolio </label>
                    </div>
                </td>
                <td> 
                    $2300 
                </td>
            </tr>
            <tr id="eCommerce">
                <td>
                    <div class="form-check">
                        <input class="form-check-input input" type="radio" name="ecommerce" id="radios2" value="2500">
                        <label class="form-check-label" for="radios2"> Diseño web de eCommerce </label>
                    </div>
                </td>
                <td>
                    $2500
                </td>
            </tr>
            <tr id="cotizador">
                <td>
                    <div class="form-check">
                        <input class="form-check-input input" type="radio" name="servicios" id="radios3" value="2700">
                        <label class="form-check-label" for="radios3"> Diseño web de cotizador de productos o servicios </label>
                    </div>
                </td>
                <td>
                    $2700
                </td>
            </tr>
        </tbody>
    </table>
    <br><br> <!-- SALTO DE LINEA -->
                                            <!-- INPUT CON VALOR DE MANTENIMIENTO -->
    <div class="form-check form-switch">
      <input class="form-check-input input" type="checkbox" id="switchMantenimiento" name="mantenimiento" value="1890">
      <label class="form-check-label" for="flexSwitchCheckDefault">Mantenimiento <b>$1890</b></label>
    </div>
    
    <br><br> <!-- SALTO DE LINEA -->
                                            <!-- INPUT CON NUMERO DE SECCIONES -->
    <input class="input" id="nuSeccioes" type="number" name="secciones" placeholder="N. de Secciones" min="1" max="100">

    <br><br> <!-- SALTO DE LINEA -->
                                            <!-- SUBMIT PARA COTIZAR -->
    <button type="submit" id="confirmar" onsubmit='handleSubmit' class="btn btn-primary mb-2">Confirmar</button>
    <br><br><br>
</form>

Tengo mis archivos.js ya funcionando y todo OK, el unico problema que tendria es que solo me gustaria poder seleccionar un solo servicio en lugar de poder seleccionar varios.

Espero puedan ayudarme, muchas gracias!!

1 respuesta 1

0

Los radio button se agrupan por el nombre (name): todos ellos son como los options de un select. Cuando los usas dentro de un form, el submit sólo envía el valor del input seleccionado:

label {
  display: block;
}
div {
  display: inline-block;
  border: 1px solid black;
}
<div>
  <label>Opción 1 A<input type="radio" name="opcion1" value="A"></label>
  <label>Opción 1 B<input type="radio" name="opcion1" value="B"></label>
  <label>Opción 1 C<input type="radio" name="opcion1" value="C"></label>
</div>

<div>
  <label>Opción 2 A<input type="radio" name="opcion2" value="A"></label>
  <label>Opción 2 B<input type="radio" name="opcion2" value="B"></label>
  <label>Opción 2 C<input type="radio" name="opcion2" value="C"></label>
</div>

3
  • Claro, el tema es que dentro de mi archivo.js llamo a cada input por el name="", por eso tengo a cada uno con una name distinto.
    – Andres
    Commented el 27 mar. 2021 a las 20:37
  • @Andres Entonces llámalo por algo mas, ya sea por la clase e incluso puedes llamarlo por el valué, si no tendrás que usar js para deseleccionar un checkbox y seleccionar otro lo cual siendo sincero seria poco limpio por que html ya lo hace por si mismo Commented el 27 mar. 2021 a las 20:46
  • El atributo name se usa para enviar el nombre de los campos del formulario, pero para buscarlos deberías usar el id Commented el 27 mar. 2021 a las 20:50

Tu Respuesta

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

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