javascript - 将数据从 Web 表单发送到 whatsapp
问题描述
我正在这个网站上创建一个贷款计算器。
选择总贷款和月费后，您填写一张包含姓名、电话和电子邮件的表格。然后用户将被定向到whatsapp。我想要的是捕获贷款金额+月费+姓名+电话+电子邮件并将其发送到whatsapp，如下面的屏幕：
我用计算器选项和用户输入数据创建了这个表单
<form action="..\contato_enviar.php" method="post">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="value-range-total">
<span>R$</span>
<span id="slidernumber">3000</span>
</div>
<input
type="range"
name="valor"
min="1000"
step="500"
max="10000"
value="3000"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span class="value-range">R$ 1mil</span>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<span class="value-range text-right">R$ 10mil</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2 class="title-form">Em quantas parcelas?</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line">6x</button>-->
<label for="6x" id="l6x" class="lblcheck">6x</label>
<input
type="radio"
id="6x"
name="parcelas"
value="6x"
placeholder="6x"
class="ipt-check"
/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line">12x</button>-->
<label for="12x" id="l12x" class="lblcheck active">12x</label>
<input
type="radio"
id="12x"
name="parcelas"
checked
value="12x"
placeholder="6x"
class="ipt-check"
/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line active">18x</button>-->
<label for="18x" id="l18x" class="lblcheck">18x</label>
<input
type="radio"
id="18x"
name="parcelas"
value="18x"
placeholder="6x"
class="ipt-check"
/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line">24x</button>-->
<label for="24x" id="l24x" class="lblcheck">24x</label>
<input
type="radio"
id="24x"
name="parcelas"
value="24x"
placeholder="6x"
class="ipt-check"
/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line">36x</button>-->
<label for="36x" id="l36x" class="lblcheck">36x</label>
<input
type="radio"
id="36x"
name="parcelas"
value="36x"
placeholder="6x"
class="ipt-check"
/>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 p-5">
<!--<button class="button-line">48x</button>-->
<label for="48x" id="l48x" class="lblcheck">
48x
<input
type="radio"
id="48x"
name="parcelas"
value="48x"
class="ipt-check"
/>
</label>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3 class="second-title-form">Parcelas a partir de:</h3>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h4 class="title-form total-form">
R$
<span id="valparc">357,83</span>
<span class="ast">*</span>
</h4>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button class="btn-blue-light" id="finalbtn">SOLICITAR COTAÇÃO</button>
</div>
<div class="boxenviar">
<input
type="text"
name="nome"
placeholder="Nome"
required
class="ipt_form"
/>
<input
type="text"
name="tel"
placeholder="Telefone"
id="tel"
required
class="ipt_form"
/>
<input
type="email"
name="email"
placeholder="E-mail"
required
class="ipt_form"
/>
<input type="submit" value="solicitar cotação" class="ipt_sbmt" />
</div>
</form>
这是“contato_enviar.php”文件
<script language='JavaScript'>
alert('Cotação enviada com sucesso!'); window.location.href =
'..\api.whatsapp.com\senddfa0.html?phone=5567984536767&text=*Nome:*%20%20*E-mail:*%20%20*Telefone:*%20%20*Valor:*%20R$%20*Num%20de%20Parcelas:*%20%20*Valor%20da%20Parcela:*%20R$nan%20';
</script>
这是计算器代码：
<script type="text/javascript">
$(document).ready(function(){
$("[type=range]").change(function(){
var newval= $(this).val();
$("#slidernumber").text(newval);
if ($('#6x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.05), 6)*0.05)/(Math.pow((1+0.05), 6) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
} else if ($('#12x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.06), 12)*0.06)/(Math.pow((1+0.06), 12) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
} else if ($('#18x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.06), 18)*0.06)/(Math.pow((1+0.06), 18) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
} else if ($('#24x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.06), 24)*0.06)/(Math.pow((1+0.06), 24) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
} else if ($('#36x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.06), 36)*0.06)/(Math.pow((1+0.06), 36) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
} else if ($('#48x').is(':checked')) {
var result2 = newval * ((Math.pow((1+0.06), 48)*0.06)/(Math.pow((1+0.06), 48) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
}
});
$('#l6x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').addClass('active');
$('#l12x').removeClass('active');
$('#l18x').removeClass('active');
$('#l24x').removeClass('active');
$('#l36x').removeClass('active');
$('#l48x').removeClass('active');
var result2 = valnew * ((Math.pow((1+0.05), 6)*0.05)/(Math.pow((1+0.05), 6) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#l12x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').removeClass('active');
$('#l12x').addClass('active');
$('#l18x').removeClass('active');
$('#l24x').removeClass('active');
$('#l36x').removeClass('active');
$('#l48x').removeClass('active');
var result2 = valnew * ((Math.pow((1+0.06), 12)*0.06)/(Math.pow((1+0.06), 12) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#l18x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').removeClass('active');
$('#l12x').removeClass('active');
$('#l18x').addClass('active');
$('#l24x').removeClass('active');
$('#l36x').removeClass('active');
$('#l48x').removeClass('active');
var result2 = valnew * ((Math.pow((1+0.06), 18)*0.06)/(Math.pow((1+0.06), 18) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#l24x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').removeClass('active');
$('#l12x').removeClass('active');
$('#l18x').removeClass('active');
$('#l24x').addClass('active');
$('#l36x').removeClass('active');
$('#l48x').removeClass('active');
var result2 = valnew * ((Math.pow((1+0.06), 24)*0.06)/(Math.pow((1+0.06), 24) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#l36x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').removeClass('active');
$('#l12x').removeClass('active');
$('#l18x').removeClass('active');
$('#l24x').removeClass('active');
$('#l36x').addClass('active');
$('#l48x').removeClass('active');
var result2 = valnew * ((Math.pow((1+0.06), 36)*0.06)/(Math.pow((1+0.06), 36) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#l48x').click(function(){
var valnew = $("[type=range]").val();
$('#l6x').removeClass('active');
$('#l12x').removeClass('active');
$('#l18x').removeClass('active');
$('#l24x').removeClass('active');
$('#l36x').removeClass('active');
$('#l48x').addClass('active');
var result2 = valnew * ((Math.pow((1+0.06), 48)*0.06)/(Math.pow((1+0.06), 48) - 1));
$('#valparc').text(result2.toFixed(2).replace(".", ","));
});
$('#finalbtn').click(function(){
$('.boxenviar').css('display','block');
$('#c-mask').css('display','block');
});
$('#c-mask').click(function(){
$('.boxenviar').css('display','none');
$('#c-mask').css('display','none');
});
});
</script>
解决方案
推荐阅读
- coldfusion - 谷歌 g 套件无效的给定/姓氏：FamilyName (ColdFusion/HTTP POST)
- android - TimeoutException android.media.SoundPool.finalize()
- android - 即使在达到 maxLength 之后，Edittext 也需要字符
- apache-nifi - NiFi没有启动
- python - python：如何将元组列表转换为numpy数组
- laravel - Laravel Shibboleth 包
- html - Microsoft BotFramework-WebChat 滚动问题
- java - 带有两个表达式的 IF 语句
- angular - Angular 原生组件 i18n
- r - 随机数序列和常数