假设您有一个由两个独立div组成的表单。第一个div用于客户注册,第二个div用于OTP验证。我想解决两个问题:
1.如果用户输入了他们的注册详细信息,但决定稍后完成OTP验证,然后刷新页面,则第二个div仍应显示一个小时。
1.如果用户已经输入了他们的注册详细信息,但是还没有验证他们的OTP,那么您需要知道如何存储未经验证的注册数据。
作为提问的规则,我必须添加代码,但我的代码很长,所以我没有在这里添加。小指导将是有益的。
在获得成功响应后存储数据时,我通过添加类隐藏registeration div并添加OTP验证表单
这是查询代码请阅读代码中的评论
success: function(data){
$('.c_OAtL8Q').empty();
$('#regCon').html('Continue');
$('#regCon').removeClass('a_uB1q1E');
var data = JSON.parse(data);
if (data.success) {
//bellow first line add class to hide previous div
$(".c_1WExwb").addClass("c_lV80ks");
$(".create-account-content").addClass("p-0");
$(".c_4Oaji1").removeClass("c_nKrtBX");
$(".c_bUm8iB").text('Email Verification');
$(".c_bUm8iB").addClass("c_6Q63dj");
// bellow line add otp verification div
$(".newcustomer").html('<input type="hidden" name="csrf_token" class="csrf_token" value="<?php echo CSRFHelper::generateCsrfToken(); ?>"><div class="c_OAtL8Q"><div class="c_TwsjHN"><p><span>Please enter the OTP we`ve sent to</span><span>'+data.success+'</span></p></div><div class="otp-box"><label>OTP</label><br><input type="text" id="onetimepassword" name="fname" placeholder="Enter 6 digit OTP" autocomplete="off"><div class="error d_hc1QLz"></div></div><div class="c_STeEvU"><button type="button" id="regen" class="c_6EV2yj regen" >Resend OTP</button></div><div class="button-box mb-4"><button type="button" id="auth" class="c_6EV2yj">Verify</button></div></div>');
} else if(data.error) {
$(".e_zEZTIS").html('<p id="error_message">'+data.error+'</p>');
}
1条答案
按热度按时间x7yiwoj41#
要解决第一个问题,您可以使用浏览器存储(如会话存储或本地存储)来存储一个标志,指示用户已完成注册但未完成OTP验证。当页面刷新时,您可以检查此标志,如果第二个div仍在一小时内,则显示它。
要解决第二个问题,您可以再次使用浏览器存储来存储未经验证的注册数据。当用户完成OTP验证时,您可以检索存储的数据并进行相应处理。