Question

我有这个：

            <form role="form" method="post" action="validar.php" data-toggle="validator">
            <h2>¿Te interesa?<br>
            Nosotros te llamamos</h2>
            <div class="form-group">
                 <label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
                 <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                 <label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
            </div>
            <div class="form-group">
                 <label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
                 <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                 <label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
            </div>
            <div class="form-group">
                 <label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
            </div>                 
          <button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
            <div class="checkbox">
                 <label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
            </div>
        </form>

validar.php重新收集所有数据（POST）并发送和发送电子邮件。

我想添加一个ajax / jquery代码来显示一个Sucess Message（f.e：Thxs for all！），当用户点击＆＃34;提交＆＃34;在索引页面中表单和执行validar.php的同一页面中。

THXS！

Answer 1

使用jquery序列化表单并发布。给你的表单一个id，这样你就可以引用它（比如myForm）

var serializedForm = $("#myForm").serialize();

然后使用Ajax调用发布它（阅读jquery ajax docs）。

在Ajax调用的成功回调中，您执行以下操作。

$('#contactDiv').hide();
$('#successDiv').show();

因此，您需要在表单周围创建一些div，并在成功消息周围创建另一个div。

在同一页面中使用ajax引导联系表单成功

1 个答案: