與按鈕無線電變化形式

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> 

用於顯示一個條件或另一個是：

如果客戶端選擇單選按鈕「option1」，它將顯示錶單id =「new_account_form」，否則顯示錶單id =「login_form」。

謝謝

Answer 1

您可以添加更改處理程序到您的單選按鈕。

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

一旦點擊，檢查被選擇的選項。 然後在要顯示/隱藏的窗體上使用hide（）或show（）。

jQuery Hide和jQuery Show

這甚至帶有動畫的眼睛糖果。

Answer 2

該代碼會做你需要的東西：

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

<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>

Answer 3

您可以通過顯示和隱藏的div做」

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" 
 
}

<form> 
 
    <label for="new_account_form">create new account 
 
    <input type="radio" id="new_account_form" name="form"/> 
 
    <label/> 
 
    <label for="login_form">login to your acount 
 
    <input type="radio" id="login_form" name="form"/> 
 
     </label> 
 
</form> 
 

 
     <div id="new_account"> 
 
     <form action=""> 
 
     name 
 
      <input type="text" /> 
 
     email 
 
      <input type="email" /> 
 
     </form> 
 
     passwor 
 
      <input type="password" /> 
 
     <input type="submit" value="create new account " /> 
 
     </div> 
 
    <div id="login"> 
 
     <form action=""> 
 
     name 
 
      <input type="text" /> 
 
     email 
 
      <input type="email" /> 
 
     </form> 
 
     <input type="submit" value="login " /> 
 
    </div> 
 

 

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>