javascript - 基于隐藏输入字段变量匹配设置变量的禁用/启用按钮
问题描述
我的注册脚本有 2 个隐藏的输入字段,它们根据用户输入更改为两个设置变量。默认情况下禁用表单按钮。我的问题是,一旦两个隐藏的输入字段与设置的变量匹配,就可以启用按钮。
<form id="register_form" autocomplete="off" method="post" action="">
<h1>Register</h1>
<div id="error_msg"></div>
<div id="pass"><span id='user'></span></div>
<div id="pass"><span id='message'></span></div>
<div id="pass"><span id='message2'></span></div>
<div>
<input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
</div>
<div>
<input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
</div>
<div class="radio">
<input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
<br>
<input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
</div>
<div>
<input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
</div>
<div>
<input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
</div>
<div>
<input type="text" name="user-response" id="user-response">
</div>
<div>
<input type="text" name="pass-response" id="pass-response">
</div>
<div>
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</div>
<div>
<button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
</div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
$("#reg_btn").prop("disabled", false);
} else {
$("#reg_btn").prop("disabled", true);
}
});
当用户输入不存在的用户名时,第一个“隐藏”输入字段将显示可用。当用户输入符合要求的匹配密码时,它会显示匹配。当这两个字段显示可用并匹配时,按钮应切换为启用,但仍处于禁用状态。
解决方案
推荐阅读
- android - Android Studio 北极狐 2020.3.1 补丁 1“我的应用程序”错误 - 已解决
- multithreading - Exchange Online PowerShell 和多线程通过运行空间池的多个问题
- python - 如何从子线程停止异步事件循环?
- mongodb - mongod 无法在我的超级终端 [LogicalSessionCacheRefresh] 构建索引完成。共扫描 0 条记录。0 秒
- reactjs - 初始化前无法访问“userSlice”
- android - 如何在 jetpack compose 中使用改造 API 创建列表视图/网格视图/回收器视图
- node.js - 如何在反应中呈现多个Node js输出
- sql - 带有条件的多列结果的 SQL 选择
- sql - 谁能解决 Spark databricks 中的错误
- r - 在 R Shiny 中保存 ggtern 图