1

Tengo una duda; de cómo mostrar dinámicamente en el DOM los elementos seleccionados por un input type radio.

Actualmente como tengo el código funciona así: selecciono un elemento de tipo radio y luego presiono un botón de tipo submit y allí me muestra la información.

Yo quisiera que se muestre apenas seleccione el type radio sin necesidad de utilizar el submit.

Fragmento JavaScript:

$("#confirmar").click(function () {
  //Creo variables para asegurarme que no me arroje NaN
  let checkRadio = parseInt($("input:radio:checked").val()) || 0;
  let nuSections = parseInt($("#nuSecciones").val()) || 1;
  let priceSections = parseInt(precioSecciones) || 0;
  let switchCheck = parseInt($("#switchMantenimiento:checked").val()) || 0;

  // Compruebo si se selecciono algún servicio
  if (!checkRadio) {
    nuSections = 0;
    alert("Por favor, seleccione un servicio");
    console.log("no se seleccionó ningún servicio.");
  } else {
    console.log("Seleccionado");
  }

  let total = 0;

  total = checkRadio + nuSections * priceSections + switchCheck;
  totalWeb.innerText = `$ ${total}`;
});

Fragmento HTML:

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300" />
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input
        class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500" />
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>
1
  • no comprendo bien que quieres hacer. Primero que en el codigo no hay ningun submit y le estas haciendo un evento click a un elemento que no existe. Lo que quieres es que al selecionar los radio se muestre 2300$ o 2500$? si es asi deberias asignarle el evento click a los radios el 21 abr. 2021 a las 1:30

1 respuesta 1

1

Esta es una forma de hacerlo

Si utilizas jQuery

Simplemente puedes utilizar las siguientes líneas, por ejemplo:

$("[name='servicios']").on("click", function () {
    console.log($(this).val());
});

Por lo tanto, si realizamos una implementación completa tendrías el siguiente resultado:

$("[name='servicios']").on("click", function() {
  $("#resultados").text($(this).val());
});
#resultados {
  margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300">
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500">
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>


<!-- Muestro los resultados acá -->
<div id="resultados"></div>

Si utilzas JavaScript Nativo

En el caso de JavaScript nativo el proceso es similar, es decir:

// Capturamos nuestros input radio
const servicios = document.querySelectorAll("[name='servicios']");

// El elemento donde queremos mostrar nuestros resultados
const resultados = document.querySelector("#resultados");

servicios.forEach(servicio => {
  
  // Y cuando el usuario haga clic sobre el elemento
  servicio.addEventListener("click", function() {
    if (resultados) resultados.textContent = this.value;
  });
});

Por lo tanto, si realizamos una implementación completa tendremos las siguientes líneas:

const servicios = document.querySelectorAll("[name='servicios']");

const resultados = document.querySelector("#resultados");

servicios.forEach(servicio => {
  servicio.addEventListener("click", function() {
    if (resultados) resultados.textContent = this.value;
  });
});
#resultados {
  margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300">
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500">
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>


<!-- Muestro los resultados acá -->
<div id="resultados"></div>

Para el caso de JavaScript Nativo, la siguiente línea captura el elemento que recibirá de los input ratio los valores:

const resultados = document.querySelector("#resultados");

Esto se implementó en el ejemplo anterior.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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