Código HTML:
Ver original<?php include('cuentadigital.php');?>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> @media (max-width: 600px) {
.elemento { font-size: 3.3em;}
.card-img-overlay{font-size: 0.7em}
}
body {
position: relative;
}
#contacto {
max-width: 600px;
background-color: white;
margin-bottom : 20px;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
<body data-spy="scroll" data-target=".navbar" data-offset="50" class="text-primary bg-light"> <div id="contacto" class="container border"> <div class="card bg-primary text-white rounded-top"> <div class="card-body">Calculá tu retiro o recarga
</div> <form id="contactForm" target=_blank action="https://www.cuentadigital.com/api.php" METHOD="get"> <input type="number" min="1" class="form-control" name="dolar" id="dolar" placeholder="" step="any"> <label for="dolar">Indicá el monto en Dólares
</label> <div class="col-sm-2 text-center"> <p><i class="fa fa-arrow-right fa-3x text-primary flecha" aria-hidden="true"></i></p> <input type="number" min="1" class="form-control" name="monto" id="monto" placeholder="" step="any"> <label for="monto">Monto estimado (Tarifa incluída)
</label> <label class="text-secondary small">(TARIFA NUBI 5% + IVA SOBRE TARIFA)
</label> <label><input type="radio" id="radio1" name="tipoAccion" value="Recarga" checked="true"> Recarga
</label> <label><input type="radio" id="radio1" name="tipoAccion" value="Retiro"> Retiro
</label> <div class="col-sm-2 text-center"> <label><input type="radio" id="radio2" name="tipoMoneda" value="USD" checked="true"> USD
</label> <label><input type="radio" id="radio2" name="tipoMoneda" value="ARS"> ARS
</label>
<label for="email"><i class="fa fa-cc-paypal" aria-hidden="true"></i> ID PayPal:
</label> <input type="text" class="form-control" name="paypal" id="paypal" placeholder=""> <label for="email"><i class="fa fa-whatsapp" aria-hidden="true"></i> WhatsApp:
</label> <input type="text" class="form-control" name="whatsapp" id="whatsapp" placeholder=""> <label for="email"><i class="fa fa-share" aria-hidden="true"></i> Correo electrónico:
</label> <input type="email" class="form-control" name="email" id="email" placeholder="">
<button type="button" class="btn btn-primary disabled center-block" id="btn_enviar" disabled="true"><i class="fa fa-paper-plane" aria-hidden="true"></i> Enviar
</button> <?php /*?><?php */?>
<input type="hidden" value="" id="id" name="id"> <input type="hidden" value="" id="codigo" name="codigo"> <input type="hidden" value="" id="precio" name="precio"> <input type="hidden" value="" id="venc" name="venc"> <input type="hidden" value="" id="hacia" name="hacia"> <input type="hidden" value="" id="concepto" name="concepto"> <script type="text/javascript"> $(document).ready(function() {
validarFormulario();
if ($(window).width() < 576) {
$('.flecha').removeClass('fa fa-arrow-right fa-3x');
$('.flecha').addClass('fa fa-arrow-down fa-3x');
}
$(window).resize(function() {
if ($(window).width() < 576) {
$('.flecha').removeClass('fa fa-arrow-right fa-3x');
$('.flecha').addClass('fa fa-arrow-down fa-3x');
} else {
$('.flecha').removeClass('fa fa-arrow-down fa-3x');
$('.flecha').addClass('fa fa-arrow-right fa-3x');
}
});
});
var tasa = <?php echo $tasa;?>;
var cambio = <?php echo $moneda;?>;
$('#dolar').bind('change keyup',function() {
$('#monto').val((parseFloat($('#dolar').val()) + parseFloat(tasa)) * cambio);
});
$('#contactForm').bind('change keyup',function() {
validarFormulario();
});
$("#btn_enviar").on('click', function(e){
e.preventDefault();
$("#btn_enviar").prop('disabled', true).html('
<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Enviando... ');
var validar = validarFormulario();
if (validar == 'true') {
var ruta = "cuentadigital.php";
var formData = new FormData($("#contactForm")[0]);
$.ajax({
url: ruta,
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(datos){
var responseJSON = eval('('+datos+')');
if (responseJSON.success == true) {
$('#id').val(responseJSON.id);
$('#codigo').val(responseJSON.codigo);
$('#precio').val(responseJSON.precio);
$('#venc').val(responseJSON.venc);
$('#hacia').val(responseJSON.hacia);
$('#concepto').val(responseJSON.concepto);
if(responseJSON.mensaje != ''){
$("#popUpErrorMensaje").html(responseJSON.mensaje);
$("#popUpError").modal("show");
}
$("#contactForm").submit();
} else {
$("#popUpErrorMensaje").html(responseJSON.error);
$("#popUpError").modal("show");
}
$("#btn_enviar").prop('disabled', false).html('
<i class="fa fa-paper-plane" aria-hidden="true"></i> Enviar ');
}
});
} else {
console.log('es false');
}
});
function validarFormulario() {
var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);
if ($('#dolar').val() != '' && $('#monto').val() != '' && $('#radio1').val() != '' && $('#radio2').val() != '' && $('#paypal').val() != '' && $('#whatsapp').val() != '' && $('#email').val() != '' && caract.test($('#email').val()) == true) {
$('#btn_enviar').removeClass('disabled');
$('#btn_enviar').attr("disabled", false);
return 'true';
} else {
$('#btn_enviar').addClass('disabled');
$('#btn_enviar').attr("disabled", true);
return 'false';
}
}