0

estoy en un formulario tipom wizad, y me baje el codigo de un boton que se crear apartir de vis y links, la cosa es que cuando le doy click al submit, ese cambia su apariencia, y luego de eso no me hace el submit, le he puesto el

$(this).submit();

y no hace nada, estoy usando cakephp, no se si eso interfiera o algo.

El boton que quiero activar es el que dice: Submit.

Aqui les muestro el codigo de la vista, y su respectivo js y 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;
}

Vista

<!-- 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'));-->

Como pueden ver el submit queda muy abajo

4
  • 1
    submit aplica para un form, entonces $('#msform').submit(); suponiendo que el id de tu form es msform el 23 mar. 2018 a las 15:22
  • Listo, muchas gracias me funciono, pense que se le aplicaba a donde se daba clcik. el 23 mar. 2018 a las 16:18
  • Tengo una pregunta es sobre el mismo codigo, o debo crear otra pregunta para eso? es que quiero subir un poco el div, pero no sube, voy a ver si se puede adjuntar una foto a la pregunta para que vean como queda. el 23 mar. 2018 a las 16:19
  • el titulo de esta consulta esta referido al submit del formulario, puedes crear otra pregunta con mas detalles acerca del problema que tienes con el estilo del formulario. Actualizo abajo la respuesta correcta a tu duda. el 23 mar. 2018 a las 17:15

1 respuesta 1

1

La función submit aplica para un form y no para el botón como lo tienes definido

El error esta en

$(this).submit();

Si tu form tiene el id msform podrías hacer referencia al mismo de la siguiente forma

$('#msform').submit(); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.