Fusionar varios JavaScript en un formulario

[gjherrerac]

Buenas,

Voy al grano. Por un lado tengo varios scripts por ejemplo:

Nombre de hombres:

Código:

<script language="JavaScript">
		function hombre() {
		var nombres=[
		"Carlos","Juan","Antonio"
		]; // ...
		
		var rnd2=Math.floor(Math.random()*nombres.length);
		document.write(''+nombres[rnd2]);
		}
		</script>

Nombre de mujeres:

Código:

<script language="JavaScript">
		function mujer() {
		var nombres=[
		"Ana","Luisa","Carmen"
		]; // ...
		
		var rnd2=Math.floor(Math.random()*nombres.length);
		document.write(''+nombres[rnd2]);
		}
		</script>

Ahora bien, quisiera que desde un formulario html el usuario pudiera elegir "Hombre" o "Mujer", y que luego de apretar un botón, se consiga como resultado, uno de los valores aleatorios que están en el script.

En líneas generales es esto, aunque quisiera utilizar muchos más datos y lograr un resultado aleatorio pero condicionado por las variables que seleccione en el formulario.

¿Alguien me puede ayudar a solucionarlo? Muchas gracias.

[Alexis88]

Ambas funciones realizan las mismas instrucciones, solo varían los datos. Lo que podrías hacer es tener ambos arrays en una función pero con nombres distintos, luego, desde el formulario, envías un valor hacia la función, por ejemplo, 'M' o 'F' (masculino o femenino) y, según sea este valor, tomas el valor del array que corresponda.

Saludos

[IsaBelM]

sólo por aportar otra opción

var nombres={hombre: ["Carlos","Juan","Antonio"],
mujer: ["Ana","Luisa","Carmen"]};

var rnd2=Math.floor(Math.random()*nombres['hombre'].length);

console.log(nombres['hombre'][rnd2]);

cualquiera de las 2 son válidas. incluso una tercera, cuarta y quinta serían válidas

[gjherrerac]

Muchas gracias por aclararme las dudas. Pero lo que no se, y aquí radica la mayor de mis ignorancias al respecto, es cómo llamarlo desde el formulario para que me devuelva la fusión de todos los scripts o de las variables en cuestión. Si me podrían graficarlo con un ejemplo, mi agradecimiento será infinito.

Gracias.

[Alexis88]

Creo que no estás entendiendo. La fusión de la que comentas, las ves plasmada en lo que tanto IsaBelM como yo te hemos explicado. Ahora, te pregunto, ¿sabes cómo invocar a una función?

Saludos

[gjherrerac]

Efectivamente, sus excelentes respuestas responden a fusionar el script, pero mi problema es cómo llamarlo desde el formulario HTML, lo que técnicamente debe ser "invocar la función".

Lo que tengo que hacer, básicamente, es colocar el script en el head y llamarlo desde un formulario, por ejemplo, así:

Código:

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="hombre" id="RadioGroup1_0" />
      Hombre</label> 
    /
    <label>
      <input type="radio" name="RadioGroup1" value="mujer" id="RadioGroup1_1" />
    Mujer</label>
    <br />
  </p>
  <input name="Generar" type="submit" onClick="funcion" value="Generar" />
</form>

Y que al presionar el botón me de como resultado el script. Pero no tengo idea de cómo llamar al javascript desde el formulario.

Mil gracias!

[GeekGirl]

Podés hacer algo como esto y simplificar el código :)

Código HTML:

 <form id="form1" name="form1" method="post" action="#">
        <label>
          <input type="radio" name="RadioGroup1" value="hombre" id="RadioGroup1_0" checked="checked" />
          Hombre
        </label> 
        <label>
          <input type="radio" name="RadioGroup1" value="mujer" id="RadioGroup1_1" />
            Mujer
        </label>
        <input name="Generar" type="submit" value="Generar" />
    </form>
    <script type="text/javascript">
        var formulario = document.getElementById('form1');  
        formulario.onsubmit = function(e) {
            e.preventDefault();

            var radioSelect = document.querySelector('input[name="RadioGroup1"]:checked').value;
            
            var arrayHombres = ["Carlos","Juan","Antonio"];
            var arrayMujeres = ["Ana","Luisa","Carmen"];

            var arrayFinal = (radioSelect == 'mujer') ? arrayMujeres : arrayHombres;
            var rnd2 = Math.floor(Math.random()*arrayFinal.length);
            document.write(''+arrayFinal[rnd2]);
        }
    </script> 

Saludos

[gjherrerac]

Qué bien, muchas gracias GeekGirl!

¿Pregunto ahora, si quiero añadir más campos (<labels>) eso cambiaría la fórmula no?

¿Cómo sería?

Mil gracias.

[IsaBelM]

veamos. no parece que quieras enviar el formularios, por lo que no tiene sentido el input#submit. en caso que quieras enviarlo déjalo.

por otro lado, la invocación a la función no debería ser al pulsar sobre el radio??

window.addEventListener('load', function() {

var nombres={hombre: ["Carlos","Juan","Antonio"],
mujer: ["Ana","Luisa","Carmen"]};

Array.prototype.forEach.call(document.querySelecto rAll('input[type="radio"]'), function(elem) {

elem.addEventListener('click', function() {
var rnd2=Math.floor(Math.random()*nombres[this.value].length);

console.log(nombres[this.value][rnd2]);
}, false);
});
},false);


<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="hombre" id="RadioGroup1_0" />
Hombre</label>
/
<label>
<input type="radio" name="RadioGroup1" value="mujer" id="RadioGroup1_1" />
Mujer</label>
<br />
</p>
<input name="Generar" type="submit" value="Generar" />
</form>

ahora puede añadir todos los radios que quieras

[GeekGirl]

Iniciado por gjherrerac

Qué bien, muchas gracias GeekGirl!

¿Pregunto ahora, si quiero añadir más campos (<labels>) eso cambiaría la fórmula no?

¿Cómo sería?

Mil gracias.

Depende lo que quieras hacer. Es para más nombres o para otras opciones?

[gjherrerac]

Muchas gracias IsaBelM y GeekGirl. Yo busco hacer un formulario con más opciones.

Aunque no quiero utilizar sólo radios, sino también las otras opciones que ofrece la creación de formularios: menú desplegables o cajas de selección, según sea

¿Es posible?

Muchas gracias.