1

我有一个带有 2 个单选按钮“新帐户”和“现有用户”的登录页面。when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. 我需要将这些字段变灰，以便在选择“新帐户”单选按钮时它们不可编辑，但仍然传递字段中的信息，因为它用于访问数据库。我可以禁用字段以获取所需的不可编辑的灰色字段，但信息不会传递到数据库。

我试图通过创建两个隐藏字段（自动填充数据库访问所需的信息）来代替“用户”和“密码”字段来解决这个问题，这允许我在“新帐户”时禁用可见字段单击单选按钮，它仍然传递永远不会改变的新用户登录信息。这工作正常，直到我尝试以现有用户身份登录，在这种情况下，我的两个隐藏字段不会自动填充用户输入的现有帐户信息。

解决这个问题可能有更简单的方法，但我所有的研究和试验还没有成功。我一直不愿意问这个问题，因为它看起来是如此简单和常用的登录页面方法，但我所有的搜索都没有产生任何有效的东西。我很欣赏任何正确方向的输入或导航。

4

2 回答 2

1

我很确定针对您的问题的正确且无痛的解决方案是使用两个不同的表单标签（注意不要嵌套它们）并根据所选单选按钮显示/隐藏表单。

为了方便您的用户，如果他已经填写了用户字段并稍后切换到另一个版本，您应该将用户名从一个表单复制到另一个表单。

编辑

完整的解决方案：

HTML

<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>

<hr>    

<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>

​​​​​​​​​​​​​​<em>JS

// if someone clicks on one radio button
$('.formSwitcher')​​​​.change(function(){
    // get the form id we want to show (from the "data-form" attribute)
    var formIdToChange = $(this).data('form');
    // hide all forms first
    $('.hiddenForm').hide();
    // show the specific form
    $(formIdToChange).show();
});

​// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();​
于 2012-09-18T15:02:31.533 回答
0

您是说您需要更改现有的用户字段，因为它们将授予对数据库的访问权限？我认为您想要做的是根据所选内容更改字段的属性。例如，如果您需要在用户单击新用户时设置自动填充字段，则编写类似

document.form.AutoPopUser.value="required value"

当这个人点击现有用户时，你可以做

document.form.AutoPopUser.value=""

或者即使存在该部分也会使现有用户登录混乱，那么您可以通过将其放入 div 并根据所选选项创建或销毁它来删除整个部分。我觉得我不是很清楚，但我认为你需要的是一组巧妙的 onClick 函数来摆脱你不需要的东西并添加你需要的东西。如果您可以发布一些代码来配合它，那就太棒了。

于 2012-09-18T15:41:25.447 回答