用按钮收音机改变表格

Question

我希望能够根据我的第一个表单复选框更改表单：

<form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post"
              id="login_form" class="box">
            <h3 class="page-subheading connect_or">{l s='ou'}</h3>
            <div class="form_content clearfix">
                <div class="form-group">
                    <label for="email">{l s='Entrez votre email :'}</label>
                    <input class="is_required validate account_input form-control" data-validate="isEmail"
                           type="email" id="email" name="email" placeholder="Ex: etudiant@email.fr"
                           value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}"/>
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input id="radio_login" type="radio" name="optionsRadios" value="option1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input id="radio_login" type="radio" name="optionsRadios" value="option2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
                <div class="account_passwd">
                <div class="form-group">
                    <label for="passwd">{l s='Votre mot de passe :'}</label>
                    <input class="is_required validate account_input form-control" type="password"
                           data-validate="isPasswd" id="passwd" name="passwd" value="" placeholder="*******"/>
                </div>
                <p class="lost_password form-group"><a href="{$link->getPageLink('password')|escape:'html':'UTF-8'}"
                                                       title="{l s='Recover your forgotten password'}"
                                                       rel="nofollow">{l s='Forgot your password?'}</a></p>
                </div>
                <p class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back"
                                            value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button type="submit" id="SubmitLogin" name="SubmitLogin"
                            class="button btn btn-default button-medium">
                        <span>
                            {l s='valider'}
                        </span>
                    </button>
                </p>
            </div>
        </form>

我的第二种形式：

<form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post" id="create-account_form" class="box">
            <div class="form_content clearfix">
                <p>{l s='Please enter your email address to create an account.'}</p>
                <div class="alert alert-danger" id="create_account_error" style="display:none"></div>
                <div class="form-group">
                    <label for="email_create">{l s='Email address'}</label>
                    <input type="email" class="is_required validate account_input form-control" data-validate="isEmail" id="email_create" name="email_create" value="{if isset($smarty.post.email_create)}{$smarty.post.email_create|stripslashes}{/if}" />
                </div>
                <div class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back" value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button class="button btn btn-default button-medium" type="submit" id="SubmitCreate" name="SubmitCreate">
                        <span>
                            <i class="icon-user left"></i>
                            {l s='Create an account'}
                        </span>
                    </button>
                    <input type="hidden" class="hidden" name="SubmitCreate" value="{l s='Create an account'}" />
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input id="radio_create" type="radio" name="optionsRadios1" value="option1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input id="radio_create" type="radio" name="optionsRadios1" value="option2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
            </div>
        </form>

显示一个或另一个的条件是：

如果客户选择单选按钮＆＃34; option1＆＃34;它显示表格id =＆＃34; new_account_form＆＃34;否则表格id =＆＃34; login_form＆＃34;。

谢谢

Answer 1

您可以在单选按钮上添加更改处理程序。

jQuery('#my_radiobutton').on('change', function() { /* Your code here */});

单击后，检查选择了哪个选项。 然后在要显示/隐藏的表单上使用hide（）或show（）。

jQuery Hide和jQuery Show

这甚至还带有动画眼镜糖果。

Answer 2

此代码将满足您的需求：

＆＃13;

＆＃13;

$('#login_form').hide();
$('#create-account_form').hide();
$('.rs').on('change',function(){
	if($(this).val() == 1){
  	$('#login_form').show();
    $('#create-account_form').hide();  
  }else{
		$('#create-account_form').show();  
    $('#login_form').hide();
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='rs' name='action' value='1' type='radio'>
<input class='rs' name='action' value='2' type='radio'>
<form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post" id="create-account_form" class="box" style="display:none">
            <div class="form_content clearfix">
                <p>{l s='Please enter your email address to create an account.'}</p>
                <div class="alert alert-danger" id="create_account_error" style="display:none"></div>
                <div class="form-group">
                    <label for="email_create">{l s='Email address'}</label>
                    <input type="email" class="is_required validate account_input form-control" data-validate="isEmail" id="email_create" name="email_create" value="{if isset($smarty.post.email_create)}{$smarty.post.email_create|stripslashes}{/if}" />
                </div>
                <div class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back" value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button class="button btn btn-default button-medium" type="submit" id="SubmitCreate" name="SubmitCreate">
                        <span>
                            <i class="icon-user left"></i>
                            {l s='Create an account'}
                        </span>
                    </button>
                    <input type="hidden" class="hidden" name="SubmitCreate" value="{l s='Create an account'}" />
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input id="radio_create" type="radio" name="optionsRadios1" value="option1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input id="radio_create" type="radio" name="optionsRadios1" value="option2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
            </div>
        </form>
        
        
        
        <form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post"
              id="login_form" class="box" style="display:none">
            <h3 class="page-subheading connect_or">{l s='ou'}</h3>
            <div class="form_content clearfix">
                <div class="form-group">
                    <label for="email">{l s='Entrez votre email :'}</label>
                    <input class="is_required validate account_input form-control" data-validate="isEmail"
                           type="email" id="email" name="email" placeholder="Ex: etudiant@email.fr"
                           value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}"/>
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input id="radio_login" type="radio" name="optionsRadios" value="option1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input id="radio_login" type="radio" name="optionsRadios" value="option2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
                <div class="account_passwd">
                <div class="form-group">
                    <label for="passwd">{l s='Votre mot de passe :'}</label>
                    <input class="is_required validate account_input form-control" type="password"
                           data-validate="isPasswd" id="passwd" name="passwd" value="" placeholder="*******"/>
                </div>
                <p class="lost_password form-group"><a href="{$link->getPageLink('password')|escape:'html':'UTF-8'}"
                                                       title="{l s='Recover your forgotten password'}"
                                                       rel="nofollow">{l s='Forgot your password?'}</a></p>
                </div>
                <p class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back"
                                            value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button type="submit" id="SubmitLogin" name="SubmitLogin"
                            class="button btn btn-default button-medium">
                        <span>
                            {l s='valider'}
                        </span>
                    </button>
                </p>
            </div>
        </form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过显示和隐藏div来实现这一点＆＃34;

＆＃13;

＆＃13;

$arr[$n]["key"] = 1;
$arr[$n]["key"] = 1;
$arr[$n]["key"] = 1;
$arr[$n]["key"] = 2;
$arr[$n]["key"] = 2;

＆＃13;

 var  newaccountradio = document.getElementById('new_account_form'),
  loginradio = document.getElementById('login_form'),
 logindiv = document.getElementById('login'),
  registerdiv =  document.getElementById('new_account');
  logindiv.style.display = "none";
registerdiv.style.display = "none";
newaccountradio.onclick = opennewaccountform;
loginradio.onclick = openloginform;


function opennewaccountform(){
  registerdiv.style.display = "block";
  logindiv.style.display = "none"
}
function openloginform(){
    registerdiv.style.display = "none";
  logindiv.style.display = "block"
}

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/faw/pen/bWVKBQ

如果您使用jquery，则已发布的答案中已提供较短的版本

Answer 4

我的解决方案

$('#login_form').show();
$('.rs').prop('checked', true);
$('.rs').parent().addClass('checked');
$('#create-account_form').hide();
$('.rs').on('change',function(){
    if($(this).val() == 1){
        $('#login_form').hide();
        $('#create-account_form').show();
        $('.rsa:first').prop('checked', true);
        $('.rsa:first').parent().addClass('checked');
        $('.rsa:last').prop('checked', false);
        $('.rsa:last').parent().removeClass('checked');
    }else{
        $('#create-account_form').show();
        $('#login_form').hide();
    }
});
$('.rsa').on('change', function(){
    if($(this).val() == 2){
        $('#login_form').show();
        $('#create-account_form').hide();
        $('.rs:last').prop('checked', true);
        $('.rs:last').parent().addClass('checked');
        $('.rs:first').prop('checked', false);
        $('.rs:first').parent().removeClass('checked');
    }
});

HTML：

<form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post"
              id="login_form" class="box">
            <h3 class="page-subheading connect_or">{l s='ou'}</h3>
            <div class="form_content clearfix">
                <div class="form-group">
                    <label for="email">{l s='Entrez votre email :'}</label>
                    <input class="is_required validate account_input form-control" data-validate="isEmail"
                           type="email" id="email" name="email" placeholder="Ex: etudiant@email.fr"
                           value="{if isset($smarty.post.email)}{$smarty.post.email|stripslashes}{/if}"/>
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input class="rs" id="radio_login" type="radio" name="action" value="1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input class="rs" id="radio_login" type="radio" name="action" value="2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
                <div class="account_passwd">
                <div class="form-group">
                    <label for="passwd">{l s='Votre mot de passe :'}</label>
                    <input class="is_required validate account_input form-control" type="password"
                           data-validate="isPasswd" id="passwd" name="passwd" value="" placeholder="*******"/>
                </div>
                <p class="lost_password form-group"><a href="{$link->getPageLink('password')|escape:'html':'UTF-8'}"
                                                       title="{l s='Recover your forgotten password'}"
                                                       rel="nofollow">{l s='Forgot your password?'}</a></p>
                </div>
                <p class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back"
                                            value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button type="submit" id="SubmitLogin" name="SubmitLogin"
                            class="button btn btn-default button-medium">
                        <span>
                            {l s='valider'}
                        </span>
                    </button>
                </p>
            </div>
        </form>
        <form action="{$link->getPageLink('authentication', true)|escape:'html':'UTF-8'}" method="post" id="create-account_form" class="box">
            <div class="form_content clearfix">
                <p>{l s='Please enter your email address to create an account.'}</p>
                <div class="alert alert-danger" id="create_account_error" style="display:none"></div>
                <div class="form-group">
                    <label for="email_create">{l s='Email address'}</label>
                    <input type="email" class="is_required validate account_input form-control" data-validate="isEmail" id="email_create" name="email_create" value="{if isset($smarty.post.email_create)}{$smarty.post.email_create|stripslashes}{/if}" />
                </div>
                <div class="submit">
                    {if isset($back)}<input type="hidden" class="hidden" name="back" value="{$back|escape:'html':'UTF-8'}" />{/if}
                    <button class="button btn btn-default button-medium" type="submit" id="SubmitCreate" name="SubmitCreate">
                        <span>
                            <i class="icon-user left"></i>
                            {l s='Create an account'}
                        </span>
                    </button>
                    <input type="hidden" class="hidden" name="SubmitCreate" value="{l s='Create an account'}" />
                </div>
                <div class="form-group">
                    <div class="radio">
                        <label>
                            <input class="rsa" id="radio_login" type="radio" name="action" value="1">
                            Je suis un nouveau client <em>(vous pourrez créer un compte par la suite)</em>
                        </label>
                        <br>
                        <label>
                            <input class="rsa" id="radio_login" type="radio" name="action" value="2">
                            J'ai déjà un compte et un mot de passe
                        </label>
                    </div>
                </div>
            </div>
        </form>