Cita:
Iniciado por NeaFan 
La idea es que uses la menor cantidad de javascript posible, aquí te plasmo una idea inicialmente solo se ven los primeros 6 elementos (lista[a,b,c];nombre,asunto;email;mensaje) y aunque existe el elemento #otrodato y #otromas estos no son ni requeridos, ni visibles gracias a la propiedad hidden del #contenedor-oculto que no permite su visualización.
Cuando seleccionas la opción [--c--] el #contenedor-oculto elimina su atributo hidden y quedan al descubierto los dos input «que siempre han existido». Además se le agrega atributos de required al imput#otrodato lo que no permitirá enviar el formulario hasta que se complete este campo.
Todo lo anterior gracias a la función SegunOpcion que se dispara cada vez hay un cambio en el select.
Código HTML:
<script type="text/javascript">
function SegunOpcion(opcion) {
var miDiv = document.getElementById("contendor-oculto");
var miInput = document.getElementById("otrodato");
if (opcion == "c") {
miDiv.removeAttribute("hidden");
miInput.setAttribute("required","required");
} else {
miDiv.setAttribute("hidden","hidden");
miInput.removeAttribute("required");
}
}
</script>
<form action="">
<select name="milista" id="milista" onchange="SegunOpcion(this.value);">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="text" id="nombre" placeholder="Digita tu nombre" required="required"/>
<input type="text" id="asunto" placeholder="Digita tu asunto" required="required"/>
<input type="text" id="asunto2" placeholder="Describe tu asunto" required="required"/>
<input type="email" id="emamil" placeholder="Digita tu correo electronico" required="required"/>
<textarea id="msj" cols="30" rows="10" placeholder="Digita tu mensaje" required="required"></textarea>
<div id="contendor-oculto" hidden="hidden">
<input type="text" id="otrodato" placeholder="Digita el otro dato"/>
<input type="text" id="otromas" placeholder="Digita el otro dato"/>
</div>
<input type="submit" id="boton-envio" />
</form> Gracias por construir todo ese formulario y el javascript, pero hay un problema, que yo no entiendo nada de javascript, por lo que no sé adaptar ese formulario + javascript a mi formulario HTML + mi Javascript (que encontré por internet y conseguí modificar a duras penas a algo decente)
Si alguien pudiese implementar este javascript y formulario a el javascript y formulario que yo tengo, se lo agradecería inmensamente.
MI formulario:
Código:
<!--//FORMULARIO-->
<div id="c_information" class="hide">
<p></p>
</div>
<form id="c_form" name="contact">
<label>
<p>Nombre</p>
<input name="nombre" id="c_name" type="text" class="c_input" placeholder="nombre..."/>
</label>
<br/>
<label>
<p>Email:</p>
<input name="email" id="c_mail" type="text" class="c_input" placeholder="email..."/>
</label>
<br/>
<label>
<form method="post">
<select name="asunto" id="c_asunto" type="text" class="c_input" onChange="mostrar(this.value);">
<option selected="selected" value="Motivo" disabled="disabled">Motivo</option>
<optgroup label="Formatear">
<option value="Formatear PC de Sobremesa">PC de Sobremesa</option>
<option value="Formatear PC Portátil">PC Portátil</option>
</optgroup>
<option value"">Otros motivos</option>
</select>
</form>
<div id="Otrosmotivos" style="display: none;">
<form style="margin-top: -10px;">
<label>
<input name="otroasunto" id="c_otroasunto" type="text" class="c_input" placeholder="otro motivo"/>
</label>
</form>
</div>
<label>
<p>Mensaje:</p>
<textarea name="mensaje" id="c_msg" placeholder="mensaje..."></textarea>
</label>
<!-- boton enviar -->
<div id="c_btns">
<input name="send" onclick="cargaSendMail()" type="button" value="Enviar" class="btn-b" id="c_enviar"></input>
</div>
</label>
</form>
<!--//FIN FORMULARIO-->
MI Javascript
:
Código:
function cargaSendMail(){
$("#c_enviar").attr("disabled", true);
$(".c_error").remove();
var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/;
var s_email = $('#c_mail').val();
var s_asunto = $('#c_asunto').val();
var s_otroasunto = $('#c_otroasunto').val();
var s_name = $('#c_name').val();
var s_msg = $('#c_msg').val();
if (filter.test(s_email)){
sendMail = "true";
} else{
$('#c_mail').after("<span class='c_error' id='c_error_mail'>Ingrese un e-mail valido.</span>");
//aplicamos color de borde si el se encontro algun error en el envio
$('#contactform').css("border-color","#6f1d14");
sendMail = "false";
}
if (s_name.length == 0 ){
$('#c_name').after( "<span class='c_error' id='c_error_name'>Ingrese su nombre.</span>" );
var sendMail = "false";
}
if (s_msg.length == 0 ){
$('#c_msg').after( "<span class='c_error' id='c_error_msg'>Ingrese un mensaje.</span>" );
var sendMail = "false";
}
if (s_asunto == null ){
$('#c_asunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
var sendMail = "false";
}
else {
if (s_otroasunto.length == null ) {
$('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
var sendMail = "false";}
if (s_otroasunto.length == null ) {
$('#c_otroasunto').after( "<span class='c_error' id='c_error_msg'>Ingrese un motivo.</span>" );
var sendMail = "false";}
}
if(sendMail == "true"){
var datos = {
"nombre" : $('#c_name').val(),
"email" : $('#c_mail').val(),
"asunto" : $('#c_asunto').val(),
"otroasunto" : $('#c_otroasunto').val(),
"mensaje" : $('#c_msg').val()
};
$.ajax({
data: datos,
// hacemos referencia al archivo contacto.php
url: 'contacto.php',
type: 'post',
beforeSend: function () {
//aplicamos color de borde si el envio es exitoso
$('#contactform').css("border-color","#25A25A");
$("#c_enviar").val("Enviando...");
},
success: function (response) {
$('form')[0].reset();
$("#c_enviar").val("Enviar");
$("#c_information p").html(response);
$("#c_information").fadeIn('slow');
$("#c_enviar").removeAttr("disabled");
}
});
} else{
$("#c_enviar").removeAttr("disabled");
}
}
function mostrar(id) {
if (id == "Otros motivos") {
$("#Otrosmotivos").show();
}
if (id != "Otros motivos") {
$("#Otrosmotivos").hide();
}
}
Gracias.