A ver si esto sirve para algo:
Código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
<script>
function procesarDatos() {
// Obtener valores de los campos
var apellido = document.getElementById("apellido").value.toUpperCase();
var nombres = document.getElementById("nombres").value;
var nombreMadre = document.getElementById("nombreMadre").value.toUpperCase();
var estadoCivil = document.getElementById("estadoCivil").value;
// Convertir la primera letra de cada palabra en nombres a mayúscula
nombres = nombres.replace(/\b\w/g, function (l) {
return l.toUpperCase();
});
// Concatenar los datos
var resultado = "El Señor " + nombres + " " + apellido + ", de estado civil " + estadoCivil + ", es hijo de " + nombreMadre + ".";
// Mostrar el resultado en el textarea
document.getElementById("resultadoTextarea").value = resultado;
}
</script>
</head>
<body>
<form>
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" oninput="this.value = this.value.toUpperCase();">
<label for="nombres">Nombres:</label>
<input type="text" id="nombres" oninput="procesarDatos();">
<label for="nombreMadre">Nombre Apellido Madre:</label>
<input type="text" id="nombreMadre" oninput="this.value = this.value.toUpperCase();">
<label for="estadoCivil">Estado Civil:</label>
<select id="estadoCivil">
<option value="soltero">Soltero</option>
<option value="casado">Casado</option>
<option value="viudo">Viudo</option>
<option value="divorciado">Divorciado</option>
</select>
<button type="button" onclick="procesarDatos();">Procesar</button>
<textarea id="resultadoTextarea" rows="4" cols="50" readonly></textarea>
</form>
</body>
</html>