0

tengo formulario que tiene 2 opciones, y no encuentro la manera de definir el que yo quiero, encontre que se deberia hacer con

radiobtn = document.getElementById("theid");
radiobtn.checked = true;

en otro hilo de stackoverflow, pero yo tengo

<script type="text/javascript">
function changeSystem(s)


{
    if(s=='english')
    {
        document.getElementById('englishWeight').style.display='block';
        document.getElementById('englishHeight').style.display='block';
        document.getElementById('metricWeight').style.display='none';
        document.getElementById('metricHeight').style.display='none';
    }
    else
    {
        document.getElementById('englishWeight').style.display='none';
        document.getElementById('englishHeight').style.display='none';
        document.getElementById('metricWeight').style.display='block';
        document.getElementById('metricHeight').style.display='block';
    }
}

</script>

y en el formulario:

<form method="post">
    <div class="calculator_div">
        <div>
<input type="radio" value="metric" name="system" <?php if($_SESSION['bmi_calc_system']!='' and $_SESSION['bmi_calc_system']=='metric') ;?> onclick="changeSystem('metric');"> Metrico &nbsp;
<input type="radio" value="english" name="system" <?php if($_SESSION['bmi_calc_system']=="" or $_SESSION['bmi_calc_system']=='english') ;?> onclick="changeSystem('english');"> Ingles


</div>
        <div><label>Tu peso:</label>
            <span id="englishWeight" style="display:<?php echo ($_SESSION['bmi_calc_system']=='' or $_SESSION['bmi_calc_system']=='english')?'block':'none'?>;"><input type="text" name="weight_en" size="6" value="<?php echo !empty($_SESSION['bmi_calc_weight_en'])?$_SESSION['bmi_calc_weight_en']:""?>"> lbs</span>
            <span id="metricWeight" style="display:<?php echo (($_SESSION['bmi_calc_system']=="" or $_SESSION['bmi_calc_system']=='english'))?'none':'block'?>;"><input type="text" name="weight_met" size="6" value="<?php echo !empty($_SESSION['bmi_calc_weight_met'])?$_SESSION['bmi_calc_weight_met']:""?>"> kg</span>
        </div>   
        <div><label>Tu altura:</label>
            <span id="englishHeight" style="display:<?php echo (($_SESSION['bmi_calc_system']=='' or $_SESSION['bmi_calc_system']=='english'))?'block':'none'?>;"><input type="text" size="6" name="height_ft_en" value="<?php echo !empty($_SESSION['bmi_calc_height_ft_en'])?$_SESSION['bmi_calc_height_ft_en']:""?>"> ft
            &nbsp; <input type="text" size="6" name="height_in_en" value="<?php echo ($_SESSION['bmi_calc_height_in_en']!='')?$_SESSION['bmi_calc_height_in_en']:""?>"> in</span>
            <span id="metricHeight" style="display:<?php echo ($_SESSION['bmi_calc_system']=='' or $_SESSION['bmi_calc_system']=='english')?'none':'block'?>;">
            <input type="text" name="height_met" size="6" value="<?php echo ($_SESSION['bmi_calc_height_met']!='')?$_SESSION['bmi_calc_height_met']:""?>"> cm
            </span>
        </div>
        <div align="center">
            <input type="hidden" name="calculator_ok" value="ok">
<br><br>


<button type="submit" class="btn btn-success btn-lg">Calcular !!!</button>

        </div>

    </div>    
    </form> 
2
  • 1
    ¿Qué tiene que ver la función changeColor en todo esto? En ella no se marca ningún checkbox, sólo se esconden/muestran elementos que ni siquiera están en la parte del código que pones en la pregunta. Deberías compartir el código relevante
    – Alvaro Montoro
    Commented el 29 ene. 2017 a las 14:40
  • ya esta actualizado, diculpas era de otro script el codigo anterior
    – Matt
    Commented el 29 ene. 2017 a las 20:50

1 respuesta 1

0

Tengo formulario que tiene 2 opciones, y no encuentro la manera de definir el que yo quiero

No es nada difícil. Lo que tienes que hacer es añadir un listener para el evento change de los radios y, mostrar/ocultar los campos de acuerdo a la unidad de medida y, ejecutar el evento en el radio por defecto. Considera el siguiente ejemplo.

let form = document.getElementById('icmForm');
let englishUnit = form.querySelector('#eng');
let metricUnit = form.querySelector('#met');
let output = form.querySelector('#icm');
let mesUnit = 'english'; // unidad por defecto

form.addEventListener('submit', calculateICM);
englishUnit.addEventListener('change', onUnitChange);
metricUnit.addEventListener('change', onUnitChange);

englishUnit.click(); // unidad por defecto, Inglés


function calculateICM (e) {
	e.preventDefault();
  let weight = 0;
  let height = 0;
  let icm = 0;
  
  if (mesUnit === 'english') {
  	weight = Number(form.querySelector('span[id="englishWeight"] input').value);
    height = Number(form.querySelector('span[id="englishHeight"] input').value);
  }
  else if (mesUnit === 'metric') {
  	weight = Number(form.querySelector('span[id="metricWeight"] input').value);
    height = Number(form.querySelector('span[id="metricHeight"] input').value);
  }
  
  icm = (weight / Math.pow(height, 2)).toFixed(2);
  output.textContent = icm;
  form.querySelector('.results').style.display = 'block';
}

function onUnitChange (e) {
	mesUnit = e.target.value;
  
  if (mesUnit === 'english') {
  	let englishFields = document.querySelectorAll('span[id^="english"]');
    let metricFields = document.querySelectorAll('span[id^="metric"]');
    
    [].forEach.call(metricFields, function (field) {
    	field.style.display = 'none';
    });
    [].forEach.call(englishFields, function (field) {
    	field.style.display = 'block';
    });
  }
  if (mesUnit === 'metric') {
  	let metricFields = document.querySelectorAll('span[id^="metric"]');
    let englishFields = document.querySelectorAll('span[id^="english"]');
    
    [].forEach.call(englishFields, function (field) {
    	field.style.display = 'none';
    });
    [].forEach.call(metricFields, function (field) {
    	field.style.display = 'block';
    });
  }
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');


*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  background-color: #fff;
  font-family: 'Open Sans';
}
.form {
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  margin: 20px auto;
   width: 100%; 
}
.form .head {
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
  height: 60px;
  line-height: 60px;
  padding: 0 1rem;
}
.form .head h2 {
  color: #444;
  font-weight: 700;
}
.form .body {
  padding: 1rem;
}
.form .body fieldset {
  border: 1px solid #eee;
  padding: .5rem;
}
.form .body fieldset legend {
  font-size: 13px;
}
.form .body fieldset label {
  color: #444;
  font-size: 14px;
  padding-right: 10px;
}
.form .body .row {
  padding: .5rem 0 0 0;
  overflow: hidden;
}
.form .body .row input {
  border: 1px solid #eee;
  border-radius: 3px;
  color: #444;
  font-family: 'Open Sans';
  font-size: 14px;
  padding: .5rem;
  width: 100%;
}
.form .body .row input:focus {
  border-color: rgba(0, 200, 255, .75);
  outline: none;
}
.form .body .results {
  background-color: #F0F9FE;
  border: 1px solid rgba(0, 150, 255, .5);
  border-radius: 3px;
  padding: .5rem 1rem;
  margin-top: .5rem;
}
.form .body .results p {
  color: #2980b9;
  font-size: 15px;
}
.form .foot {
  padding: 0 1rem .5rem 1rem;
  text-align: right;
}
.form .foot .btn {
  background-color: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #555;
  font-family: 'Open Sans';
  padding: .5rem 1rem;
}
.form .foot .btn.primary {
  background-color: #2980b9;
  color: #fff;
}
<form id="icmForm" class="form" style="width: 400px">
  <header class="head">
    <h2>Calculadora ICM</h2>
  </header>
  <article class="body">
    <section class="group">
      <fieldset>
        <legend>Tipo de unidad</legend>
        <input type="radio" name="unt" value="english" id="eng">
        <label for="eng">English</label>
        <input type="radio" name="unt" value="metric" id="met">
        <label for="met">Metrics</label>
      </fieldset>
    </section>
    <section class="row">
      <span id="englishWeight">
        <input type="text" placeholder="Ingresa tu peso (kg)">
      </span>
      <span id="metricWeight">
        <input type="text" placeholder="Ingresa tu peso (kg)">
      </span>
    </section>
    <section class="row">
      <span id="englishHeight">
        <input type="text" placeholder="Ingresa tu talla (mt)">
      </span>
      <span id="metricHeight">
        <input type="text" placeholder="Ingresa tu talla (mt)">
      </span>
    </section>
    <section class="results" style="display: none">
      <p>Tu ICM es: <span id="icm">0.0</span></p>
    </section>
  </article>
  <footer class="foot">
    <button type="submit" class="btn primary">
      Calcular
    </button>
  </footer>
</form>

Demo

Éste código funciona, sin embargo no creo que sea la mejor opción por una razón. Si quieres añadir validación HTML a los inputs por medio del atributo required tendrás un problema, ya que, al ejecutar el formulario, Chrome intentará mostrar mensajes de input vacío aún en los que están escondidos, lo que te dará un error al ejecutar el form: Element with name=xxx is not focusable. Obviamente ésto lo puedes arreglar agreando el atributo required dinámicamente para añadirlo solo a elementos visibles, pero es mucho código.

Otro punto que veo totalmente innecesario es esconder/mostrar inputs si van a tener el mismo fin: ingresar datos. El tipo de operación a realizar puede ser determinada por medio de la unidad de medida seleccionada en los radios. Por ejemplo, si para la unidad inglesa, se requiere enviar el form a una URL distinta que para la métrica, solo se mira qué radio es seleccionado y hace el proceso de acuerdo a éste.


Nota: StackOverflow bloquea el envío de formularios por cuestiones de seguridad. Los ejemplos los puedes ver en los enñaces debajo de los códigos.

1
  • 1
    muchas gracias por tu ayuda, voy a hacerlo desde cero en php seguramente, ya que ese es un codigo que habia encontrado en internet y no me sirve de nada, mejor empezar de cero, gracias nuevamente
    – Matt
    Commented el 31 ene. 2017 a las 20:09

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.