Prueba :
Código PHP:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
</head>
<body>
<h1>PASA TODAS LAS PALABRAS A MAYÚSCULA</h1>
<table>
<tr>
<td>Apellido/s <input type="text" id="NomApe" onblur="upperCase()"></td>
</tr>
<tr>
<td>Nombre/s <input type="text" id="Nom" onblur="capitalizeFirstLetter()"></td>
</tr>
<tr>
<td>Madre <input type="text" id="madre" onblur="capitalizeMother()"></td>
</tr>
<tr>
<td>
<button type="button" onclick="concatenate()">Pasar a la caja de texto</button>
<input type="text" name="textResult" id="concateForm" rows="4" cols="40">
</td>
</tr>
<tr>
<td>
Estado civil
<select name="estado" id="estado">
<option value="">Seleccione...</option>
<option value="casado">Casado</option>
<option value="soltero">Soltero</option>
<option value="viudo">Viudo</option>
<option value="divorciado">Divorciado</option>
</select>
</td>
</tr>
</table>
<button type="button" id="boton" onClick="copiarDatos()">Pasar al Textarea</button>
<textarea id="textToEncode" style="width: 100%; height: 200px;"></textarea>
<script>
function upperCase() {
var x = document.getElementById("NomApe").value;
document.getElementById("NomApe").value = x.toUpperCase();
}
function capitalizeFirstLetter() {
var words = document.getElementById("Nom").value.split(" ");
for (var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
document.getElementById("Nom").value = words.join(" ");
}
function capitalizeMother() {
var motherInput = document.getElementById("madre").value;
var capitalizedMother = motherInput.charAt(0).toUpperCase() + motherInput.slice(1);
document.getElementById("madre").value = capitalizedMother;
}
function concatenate() {
var concateText = document.getElementById("NomApe").value + ", " +
document.getElementById("Nom").value + ", " +
document.getElementById("madre").value;
document.getElementById("concateForm").value = concateText;
}
function copiarDatos() {
var VarApee = document.getElementById("NomApe").value;
var VarNomm = document.getElementById("Nom").value;
var VarMadree = document.getElementById("madre").value;
var estadoCivil = document.getElementById("estado").value;
if (VarApee !== "" && VarNomm !== "" && VarMadree !== "" && estadoCivil !== "") {
var nombreCompleto = "El Señor " + VarNomm + " " + VarApee + ", de estado civil " + estadoCivil + ", es hijo de " + VarMadree + ".";
document.getElementById("textToEncode").innerHTML = nombreCompleto;
} else {
alert("Por favor complete todos los campos antes de pasar al textarea.");
}
}
</script>
</body>
</html>