Despliega formulario en 2 columnas
This commit is contained in:
parent
cd7d252c14
commit
ea7b21c2ab
@ -12,13 +12,13 @@ $().ready(function(){
|
|||||||
$("#pais").select2({
|
$("#pais").select2({
|
||||||
data: data.paises,
|
data: data.paises,
|
||||||
placeholder: "Select Country",
|
placeholder: "Select Country",
|
||||||
width: "70%",
|
width: "100%",
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#roomtype").select2({
|
$("#roomtype").select2({
|
||||||
data: data.roomtypes,
|
data: data.roomtypes,
|
||||||
placeholder: "Select Rooming Preference",
|
placeholder: "Select Rooming Preference",
|
||||||
width:"70%",
|
width:"100%",
|
||||||
minimumResultsForSearch: -1,
|
minimumResultsForSearch: -1,
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -69,81 +69,49 @@ $().ready(function(){
|
|||||||
formdata.find(item => item.name === "pais").value = $("#pais").select2("data")[0].text;
|
formdata.find(item => item.name === "pais").value = $("#pais").select2("data")[0].text;
|
||||||
formdata.find(item => item.name === "roomtype").value = $("#roomtype").select2("data")[0].text;
|
formdata.find(item => item.name === "roomtype").value = $("#roomtype").select2("data")[0].text;
|
||||||
var parameters = $.param(formdata);
|
var parameters = $.param(formdata);
|
||||||
console.log(parameters);
|
console.log(parameters);
|
||||||
|
|
||||||
},
|
},
|
||||||
errorElement: "em",
|
errorElement: "em",
|
||||||
errorPlacement: function ( error, element ) {
|
errorPlacement: function ( error, element ) {
|
||||||
// Add the `help-block` class to the error element
|
// Add the `help-block` class to the error element
|
||||||
|
error.addClass("help-block");
|
||||||
element.parents(".input-container").addClass("has-feedback");
|
var esradio = $(element).prop("type") == "radio";
|
||||||
var esradio = element.prop("type") == "radio";
|
var padre = element.parents(".input-container");
|
||||||
var pariente;
|
padre.addClass("has-feedback");
|
||||||
if ( esradio ) {
|
padre.append(error);
|
||||||
pariente = element.parents(".form-group").children(".radioerror");
|
var iconstatus = $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>");
|
||||||
|
if(!$.contains(padre,"span.glyhpicon")){
|
||||||
pariente.append(error);
|
error.before(iconstatus);
|
||||||
error.css("color", "#a94442")
|
|
||||||
//element.parents(".form-group").children(".radioerror").append(error);
|
|
||||||
//element.parents(".radios").append(error);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
error.addClass( "help-block" );
|
|
||||||
error.insertAfter( element );
|
|
||||||
}
|
}
|
||||||
if ( !element.next( "span" )[ 0 ] && !esradio )
|
if(esradio){
|
||||||
$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
|
error.css("display", "inline");
|
||||||
if(esradio)
|
$(iconstatus).css("display", "inline");
|
||||||
element.parents(".form-group").children(".radioerror").prepend("<span style='color:#a94442;' class='glyphicon glyphicon-remove'></span>");
|
$(iconstatus).css("position", "initial");
|
||||||
|
}
|
||||||
},
|
},
|
||||||
success: function(label,element){
|
success: function(label,element){
|
||||||
var esradio = $(element).prop("type") == "radio";
|
var esradio = $(element).prop("type") == "radio";
|
||||||
var pariente;
|
var padre = $(element).parents(".input-container");
|
||||||
if ( esradio ) {
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
if(!iconstatus){
|
||||||
var iconstatus = $(pariente).children("span");
|
label.before("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");
|
||||||
if (!$(pariente).children("span")[ 0 ])
|
|
||||||
pariente.preprend("<span style='color:#3c763d;' class='glyphicon glyphicon-ok form-control-feedback'></span>");
|
|
||||||
}
|
}
|
||||||
else if ( !$( element ).next( "span" )[ 0 ]){
|
|
||||||
$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
highlight: function ( element, errorClass, validClass ) {
|
highlight: function ( element, errorClass, validClass ) {
|
||||||
var esradio = $(element).prop("type") == "radio";
|
var padre = $(element).parents(".input-container");
|
||||||
var pariente;
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
if ( esradio ) {
|
padre.addClass("has-error").removeClass("has-success");
|
||||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
iconstatus.addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
||||||
pariente.addClass("has-error").removeClass("has-success");
|
padre.addClass( "has-error" ).removeClass( "has-success" );
|
||||||
var iconstatus = pariente.children( "span" );
|
|
||||||
iconstatus.addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
|
||||||
iconstatus.css("color","#a94442");
|
|
||||||
}
|
|
||||||
else
|
|
||||||
$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
|
|
||||||
$( element ).parents( ".input-container" ).addClass( "has-error" ).removeClass( "has-success" );
|
|
||||||
|
|
||||||
},
|
},
|
||||||
unhighlight: function (element, errorClass, validClass) {
|
unhighlight: function (element, errorClass, validClass) {
|
||||||
var esradio = $(element).prop("type") == "radio";
|
var padre = $(element).parents(".input-container");
|
||||||
var pariente;
|
var iconstatus = padre.children("span.glyphicon");
|
||||||
if ( esradio ) {
|
padre.addClass("has-success").removeClass("has-error");
|
||||||
pariente = $(element).parents(".form-group").children(".radioerror");
|
iconstatus.addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
||||||
pariente.addClass("has-success").removeClass("has-error");
|
padre.addClass( "has-success" ).removeClass( "has-error" );
|
||||||
var iconstatus = pariente.children( "span" );
|
}
|
||||||
iconstatus.addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
|
||||||
iconstatus.css("color","#3c763d");
|
|
||||||
|
|
||||||
}
|
|
||||||
else
|
|
||||||
$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
|
|
||||||
$( element ).parents( ".input-container" ).addClass( "has-success" ).removeClass( "has-error" );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var finan;
|
var finan;
|
||||||
|
|||||||
284
registration.php
284
registration.php
@ -6,156 +6,174 @@
|
|||||||
<div id="content" class="col-xs-12 col-sm-12">
|
<div id="content" class="col-xs-12 col-sm-12">
|
||||||
<h1>Registration</h1>
|
<h1>Registration</h1>
|
||||||
|
|
||||||
<form id="registerform" method="post" class="form-horizontal" action novalidate="novalidate">
|
<form id="registerform" method="post" action novalidate="novalidate">
|
||||||
|
<!-- Nombre y Apellido -->
|
||||||
<div class="form-group">
|
<div class="row">
|
||||||
<label class="control-label col-sm-2" for="nombre">First Name</label>
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
<div class="col-sm-8 input-container">
|
<label class="control-label" for="nombre">First Name</label>
|
||||||
<input id="nombre" class="form-control" name="nombre" type="text">
|
<div class="input-container">
|
||||||
|
<input id="nombre" class="form-control" name="nombre" type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class="control-label" for="apellido">Last Name</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<input id="apellido" class="form-control" name="apellido" type="text">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<!-- Título y Afiliación -->
|
||||||
<label class="control-label col-sm-2" for="apellido">Last Name</label>
|
<div class="row">
|
||||||
<div class="col-sm-8 input-container">
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
<input id="apellido" class="form-control" name="apellido" type="text">
|
<label class="control-label" for="titulo">Title</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<input id="titulo" class="form-control" name="titulo"
|
||||||
|
placeholder="Professor, Post Doc, Grad Student(1st year, 2nd year, etc..)" type="text">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="titulo">Title</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="titulo" class="form-control" name="titulo"
|
|
||||||
placeholder="Professor, Post Doc, Grad Student(1st year, 2nd year, etc..)" type="text">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="afiliacion">Affiliation</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="afiliacion" class="form-control" name="afiliciacion"
|
|
||||||
placeholder="Which university or organization" type="text">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-2 control-label" for="ciudad">City</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="ciudad" name="ciudad" class="form-control" type="text">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-2 control-label" for="pais">Country</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<select id="pais" name="pais">
|
|
||||||
<option></optoon>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="email">Email</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="email" class="form-control" name="email"
|
|
||||||
placeholder="mail@example.com" type="email">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="txtbda">Beginning date attending</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="txtbda" class="form-control" placeholder="DD/MM/AAAA" name="bda">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="txteda">Ending date attending</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
<input id="txteda" class="form-control" placeholder="DD/MM/AAAA" name="eda">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label col-sm-2" for="sifinan">
|
|
||||||
Are you asking for support from the conference?
|
|
||||||
</label>
|
|
||||||
<div class="col-sm-1 radios input-container">
|
|
||||||
<label class="radio-inline"><input id="sifinan" type="radio" name="financiacion" value="si">Yes</label><br>
|
|
||||||
<label class="radio-inline"><input id="nofinan" type="radio" name="financiacion" value="no">No</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6 alert alert-info">
|
|
||||||
|
|
||||||
<em class="text-justify">
|
|
||||||
we have submitted funding requests and hope to cover the housing
|
|
||||||
for a shared room, but we cannot make a guarantee at this time
|
|
||||||
</em>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-7 col-sm-offset-2 radioerror">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
<div class="form-group">
|
<label class="control-label " for="afiliacion">Affiliation</label>
|
||||||
<!--requerido-->
|
<div class="input-container">
|
||||||
<label class="control-label col-sm-2" for="invited">
|
<input id="afiliacion" class="form-control" name="afiliciacion"
|
||||||
Were you invited to participate in this conference?
|
placeholder="Which university or organization" type="text">
|
||||||
</label>
|
|
||||||
<div class="col-sm-4 input-container">
|
|
||||||
<div class="radio">
|
|
||||||
<label><input id="invited" type="radio" name="invited" value="si">Yes, I was previously invited</label>
|
|
||||||
</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label><input id="noinvited" type="radio" name="invited" value="no">No, I am applying(Registration committee will notifiy you if accepted)</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-7 col-sm-offset-2 radioerror">
|
</div>
|
||||||
|
|
||||||
|
<!-- Ciudad y Pais -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class=" control-label" for="ciudad">City</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<input id="ciudad" name="ciudad" class="form-control" type="text">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class=" control-label" for="pais">Country</label>
|
||||||
</div>
|
<div class="input-container">
|
||||||
<div class="form-group">
|
<select id="pais" name="pais">
|
||||||
<label class="control-label col-sm-2" for="invited">
|
<option></optoon>
|
||||||
Do you need a letter of invitation?
|
</select>
|
||||||
</label>
|
|
||||||
<div class="col-sm-4 input-container">
|
</div>
|
||||||
<label class="radio-inline"><input id="sifinan" type="radio" name="letterinvited" value="si">Yes</label>
|
|
||||||
<label class="radio-inline"><input id="nofinan" type="radio" name="letterinvited" value="no">No</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-10 col-sm-offset-2 radioerror">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<!-- es requerido -->
|
<!-- Email -->
|
||||||
<label class="control-label col-sm-2" for="roomtype">Rooming Preference</label>
|
<div class="row">
|
||||||
<div class="col-sm-8 input-container">
|
<div class="form-group col-xs-12">
|
||||||
<select id="roomtype" name="roomtype">
|
<label class="control-label" for="email">Email</label>
|
||||||
<option></optoon>
|
<div class="input-container">
|
||||||
</select>
|
<input id="email" class="form-control" name="email"
|
||||||
|
placeholder="mail@example.com" type="email">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-2 control-label" for="roomate">Name of preferred roommate (if any)</label>
|
|
||||||
<div class="col-sm-8 input-container">
|
|
||||||
|
|
||||||
<input id="roomate" name="roomate" class="form-control"
|
<!-- Beggining date and Endig Date-->
|
||||||
type="text">
|
<div class="row">
|
||||||
</div>
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
</div>
|
<label class="control-label " for="txtbda">Beginning date attending</label>
|
||||||
|
<div class="input-container">
|
||||||
<div class="form-group">
|
<input id="txtbda" class="form-control" placeholder="DD/MM/AAAA" name="bda">
|
||||||
<div class="g-recaptcha col-sm-8" data-sitekey="6LeLxy4UAAAAALcrNXxcOiW1B3QgcfgZ6u4l52kZ" data-callback="onReturnCallback"></div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
<div class="col-sm-8">
|
<label class="control-label " for="txteda">Ending date attending</label>
|
||||||
<button type="submit" class="btn-lg btn btn-primary">Register</button>
|
<div class="input-container">
|
||||||
|
<input id="txteda" class="form-control" placeholder="DD/MM/AAAA" name="eda">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Financial Support -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12">
|
||||||
|
<label class="control-label" for="sifinan">
|
||||||
|
Are you asking for support from the conference?
|
||||||
|
</label>
|
||||||
|
<div class="radios input-container">
|
||||||
|
<label class="radio-inline"><input id="sifinan" type="radio" name="financiacion" value="si">Yes</label>
|
||||||
|
<label class="radio-inline"><input id="nofinan" type="radio" name="financiacion" value="no">No</label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-8 alert alert-info" style="margin:10px 0px 5px 0px;">
|
||||||
|
|
||||||
|
<em class="text-justify">
|
||||||
|
we have submitted funding requests and hope to cover the housing
|
||||||
|
for a shared room, but we cannot make a guarantee at this time
|
||||||
|
</em>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Invitation and letter of -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<!--requerido-->
|
||||||
|
<label class="control-label" for="invited">
|
||||||
|
Were you invited to participate in this conference?
|
||||||
|
</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<div class="radio">
|
||||||
|
<label><input id="invited" type="radio" name="invited" value="si">Yes, I was previously invited</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio">
|
||||||
|
<label><input id="noinvited" type="radio" name="invited" value="no">No, I am applying(Registration committee will notifiy you if accepted)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class="control-label" for="invited">
|
||||||
|
Do you need a letter of invitation?
|
||||||
|
</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<label class="radio-inline"><input id="sifinan" type="radio" name="letterinvited" value="si">Yes</label>
|
||||||
|
<label class="radio-inline"><input id="nofinan" type="radio" name="letterinvited" value="no">No</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rooming Preferences -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class="control-label " for="roomtype">Rooming Preference</label>
|
||||||
|
<div class="input-container">
|
||||||
|
<select id="roomtype" name="roomtype">
|
||||||
|
<option></optoon>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group col-xs-12 col-sm-6">
|
||||||
|
<label class=" control-label" for="roomate">Name of preferred roommate (if any)</label>
|
||||||
|
<div class="input-container">
|
||||||
|
|
||||||
|
<input id="roomate" name="roomate" class="form-control"
|
||||||
|
type="text">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--Captcha -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12">
|
||||||
|
<div class="g-recaptcha" data-sitekey="6LeLxy4UAAAAALcrNXxcOiW1B3QgcfgZ6u4l52kZ" data-callback="onReturnCallback"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Confirm Button -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-xs-12 col-sm-8">
|
||||||
|
<button type="submit" class="btn-lg btn btn-primary">Register</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div id="statusmsg" class="alert alert-success">
|
<div id="statusmsg" class="alert alert-success">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user