I'm in a form tipom wizad, and I download the code of a button that is created from vis and links, the thing is that when I click the submit, it changes its appearance, and then it does not make me the submit, I've put the
$(this).submit();
and it does not do anything, I'm using cakephp, I do not know if that interferes or something.
The button I want to activate is the one that says: Submit.
Here I show you the code of the view, and its respective js and css
js
(function () {
var resize;
$(".pru").click(function () {
if ($(".pru").hasClass("loading-start")) {
if ($(".pru").hasClass("loading-end")) {
return $(".pru").attr("class", "");
}
} else {
setTimeout((function () {
console.log("1");
return $(".pru").addClass("loading-start");
}), 0);
setTimeout((function () {
console.log("2");
return $(".pru").addClass("loading-progress");
}), 500);
return setTimeout((function () {
$(this).submit();
return $(".pru").addClass("loading-end");
}), 1500);
}
});
$(window).resize(resize);
resize();
}).call(this);
css
.aSubmit {
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
top: 74%;
font-weight: 100;
display: block;
position: absolute;
z-index: 3;
text-decoration: none;
width: 200px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
color: white;
height: 60px;
line-height: 60px;
border-radius: 30px;
}
.aSubmit.loading {
color: rgba(255,255,255,0);
}
.aSubmit.feedback {
z-index: 1;
}
.aSubmit.feedback:after {
-webkit-transition: background 0.2s, -webkit-transform 0.2s;
-moz-transition: background 0.2s, -moz-transform 0.2s;
-o-transition: background 0.2s, -o-transform 0.2s;
-ms-transition: background 0.2s, -ms-transform 0.2s;
transition: background 0.2s, transform 0.2s;
border-radius: 30px;
position: absolute;
visibility: hidden;
width: 200px;
height: 100%;
top: 0;
left: 0;
content: '';
background: rgba(255,255,255,0.9);
}
.aSubmit:hover {
background: rgba(255,255,255,0.1);
}
svg {
position: relative;
z-index: 2;
pointer-events: none;
width: 240px;
height: 220px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
rect {
-webkit-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
fill: #3e3f4c;
}
path {
fill: none;
stroke-width: 4px;
stroke-linecap: round;
stroke: #1ecd97;
stroke-dashoffset: 0px;
}
path#top,
path#bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 295px 1000px;
}
.loading-start .aSubmit {
color: rgba(255,255,255,0);
}
.loading-start .aSubmit.loading {
color: #fff;
}
.loading-start .aSubmit.feedback:after {
visibility: visible;
background: rgba(255,255,255,0);
-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
-o-transform: scale(1.5, 2);
-ms-transform: scale(1.5, 2);
transform: scale(1.5, 2);
}
.loading-start #top,
.loading-start #bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
stroke-dasharray: 10px 1000px;
}
.loading-progress #top,
.loading-progress #bottom {
-webkit-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-moz-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-o-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-ms-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
stroke-dasharray: 10px 1000px;
stroke-dashoffset: -150px;
}
.loading-end .aSubmit.loading {
color: rgba(255,255,255,0);
}
.loading-end #top,
.loading-end #bottom {
stroke: #f5f6f7;
}
.loading-end #top {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 30px 1000px;
stroke-dashoffset: -518px;
}
.loading-end #bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 10px 1000px;
stroke-dashoffset: -490px;
}
.loading-end rect {
fill: #1ecd97 !important;
}
View
<!-- multistep form -->
<?php
echo $this->Form->create('Cliente', array('class' => '', 'id' => 'msform'));
?>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Necesidad del cliente</li>
<li>Informacion Personal</li>
<li>finish</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Hablanos sobre tu necesidad</h2>
<h3 class="fs-subtitle">Requerimiento</h3>
<div class="DontGrowWidth">
<?php
echo $this->Form->input('informacion', array('placeholder' => 'Cuentanos sobre el problema que tienes', 'label' => false,
'class' => 'validador txtInformacion'));
?>
</div>
<input type="button" name="next" class="next btn-default btn-nextOne" value="Next" hidden/>
</fieldset>
<fieldset>
<h2 class="fs-title">Hablanos sobre tu empresa</h2>
<h3 class="fs-subtitle">Negocio</h3>
<?php
echo $this->Form->input('empresa', array('label' => false, 'placeholder' => 'Dinos el nombre de tu empresa',
'class' => 'validador txtEmpresa'));
echo $this->Form->input('telefono', array('label' => false, 'placeholder' => 'Dano el telefono de tu empresa',
'class' => 'validador txtTelefono'));
echo $this->Form->input('direccion', array('label' => false, 'placeholder' => 'Danos la direccion de tu empresa',
'class' => 'validador txtDireccion'));
?>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-default btn-nextTwo" value="Next" hidden/>
</fieldset>
<fieldset>
<h2 class="fs-title">Hablanos sobre ti</h2>
<h3 class="fs-subtitle">Cliente</h3>
<?php
echo $this->Form->input('cliente', array('label' => false, 'placeholder' => 'Dinos como te llamas',
'class' => 'validador txtCliente'));
echo $this->Form->input('horario', array('label' => false, 'placeholder' => 'Dinos en que horario podemos contactarte',
'class' => 'validador txtHorario'));
?>
<div id='captcha' class="g-recaptcha" data-sitekey="xxx" data-callback='recaptcha_callback'></div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<?php
echo $this->Form->submit('Enviar', array('class' => 'btnSubmit', 'disabled' => true));
?>
<div class="pru">
<a href="#" class="aSubmit">submit</a>
<a class="aSubmit loading" href="#">loading</a>
<svg viewBox="0 0 240 220">
<rect id="middle" x="20" y="100" width="200" height="60" rx="30"></rect>
<path id="top" d="
M 60,100
L 50,100
C 33.4357078,100 20,113.427814 20,130
L 20,130
C 20,146.568541 33.4331197,160 50,160
L190,160
C206.570288,160 220,146.572314 220,130
L220,100
C220,-60 180, 80 160,100
C140,120 100,160 100,160
"></path>
<path id="bottom" d="
M180,160
L190,160
C206.564295,160 220,146.572186 220,130
L220,130
C220,113.431458 206.56688,100 190,100
L 50,100
C33.4297125,100 20,113.435296 20,130
C20,130 20,120 20,140
C20,220 180,200 120,140
C100,120 80,100 80,100
"></path>
</svg>
<a class="aSubmit feedback" href="#"></a>
</div>
</fieldset>
<?php echo $this->Form->end(); ?>
<!--echo $this->Form->input('id', array('type' => 'hidden'));-->
