Как скрыть/показать форму с помощью jQuery в следующем сценарии?

Question

Я использую Smarty, Php и JQuery для своего сайта. Когда страница загружается, следующая форма не должна отображаться. Когда пользователь нажимает на гиперссылку, указанную ниже, она должна получить dsiplayed, и если пользователь хочет скрыть форму снова, он нажмет на одну и ту же гиперссылку, чтобы скрыть указанную выше форму. Короче говоря, formload форма не должна отображаться, и при нажатии на гиперссылку форма должна отображаться, если она открыта и должна быть закрыта, если она скрыта. Можете ли вы помочь мне в достижении этого с помощью jQuery? Заранее спасибо.

<a class="reply" href="{$control_url}modules/enquiries/reply_to_enquiry.php?contact_id={$data.contact_id}&op=reply&from_date={$from_date}&to_date={$to_date}">Reply</a> 

<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data"> 
    <ul> 
     <li> 
      <label>{'To Name'|signal_on_error:$error_msg:'contact_full_name'} :</label> 
      <div class="form-element"> 
       <input type="text" name="contact_full_name" id="contact_full_name" {if $data.contact_full_name!=''} value="{$data.contact_full_name}" {else} value="{$contact_full_name|capitalize}" {/if} class=""> 
      </div> 
     </li> 
     <li> 
      <label>{'To Email'|signal_on_error:$error_msg:'contact_email_id'} :</label> 
      <div class="form-element"> 
       <input type="text" name="contact_email_id" id="contact_email_id" {if $data.contact_email_id !=''} value="{$data.contact_email_id}" {else} value="{$contact_email_id}" {/if} class=""> 
      </div> 
     </li> 
     <li> 
      <label>{'Reply'|signal_on_error:$error_msg:'reply'} :</label> 
      <div class="form-element"> 
       <textarea name="reply" id="reply" cols="60" rows="12">{if $error_msg!=""}{$data.reply}{/if}</textarea> 
      </div> 
     </li> 
     <li> 
      <label>{'Upload File'|signal_on_error:$error_msg:'reply_file_name'} :</label> 
      <div class="form-element"> 
       <p class="uploadBtn"><input type="file" id="reply_file_name" name="reply_file_name" /></p> 
       <div class="input-info"> <span class="required">Note* (Image size should be less then 1 mb and alowed format types are jpg, jpeg, gif, png, JPG, JPEG, GIF, PNG, doc, docx)</span></div> 
      </div> 
     </li> 
     <input type="hidden" name="contact_id" value="{$data.contact_id}" /> 
     <input type="hidden" name="from_date" value="{$from_date}" /> 
     <input type="hidden" name="to_date" value="{$to_date}" /> 
     <input type="hidden" name="op" value="{$op}" /> 
     <li> 
      <label></label> 
      <div class="form-element"> 
       <input type="submit" name="submit" id="submit" class="c-btn" value="Send"> 
       <input type="button" name="cancel" id="cancel" class="c-btn" value="Cancel" onclick="javascript:window.location.href='{$control_url}modules/enquiries/view_contact_us.php?page={$page}&from_date={$from_date}&to_date={$to_date}'"> 
      </div> 
     </li>     
    </ul> 
</form> 

Answer 1

Скрыть форму сначала с помощью CSS:

#manage_reply_enquiry { display: none; } 

Затем связать обработчик события ссылки и переключать видимость:

$(function(){ //when the DOM is ready 

    $('a.reply').click(function(){ //when clicking the link 
     $('#manage_reply_enquiry ').toggle(); //toggles visibility 
    }); 

}); 

Answer 2

<form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="{$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data" style="display: none"> 

В вашем сценарии

$(".reply:first").click(function() { 
     $("#manage_reply_enquiry").toggle(); 
}) 

Answer 3

Try:

HTML:

<div id="someId" style="display: none;"> 
     <form id="manage_reply_enquiry" name="manage_reply_enquiry" method="post" action="  {$control_url}modules/enquiries/reply_to_enquiry.php" enctype="multipart/form-data"> 
     //your normal code 
     </form> 
    </div> 

JAVASCRIPT:

$(document).ready(function(){ 
    $(".reply").click(function(){ 
     if($("#someId").css("display") == "none"){ 
      $("#someId").show(); 
     } else { 
      $("#someId").hide(); 
     } 
    }); 
    }); 

надежда, что помогает!

Answer 4

метод скрыть(), показать() и переключиться дорого (производительность). Хороший метод:

var el = $("#someId") 
    if (el.style.display=='none'){ 
     el.style.display='block' 
    }else{ 
     el.style.display='none' 
    } 

1) у вас есть один запрос на объект! 2) родной js быстро

Answer 5

Как насчет пользователей без JS? This Fiddle может быть более полное решение:

HTML:

<!-- Have the link anchored to the form so it still makes sense for text-only, speech-readers, or users with JS disabled --> 
<a class="reply" href="#manage_reply_enquiry">Reply</a> 
<form id="manage_reply_enquiry"> 
    <fieldset> 
     <legend>I am Legend</legend> 
     <input type="text" name="field" value="a form field" /> 
    </fieldset> 
</form> 

JS:

//If JS is enabled add a class so we can hide the form ASAP (and only for JS enabled browsers) 
    document.documentElement.className = 'js'; 

//add the jQuery click/show/hide behaviours (or native JS if you prefer): 
    $(document).ready(function(){ 
     $(".reply").click(function(){ 
      if($("#manage_reply_enquiry").is(":visible")){ 
       $("#manage_reply_enquiry").hide(); 
      } else { 
       $("#manage_reply_enquiry").show(); 
      } 
      //don't follow the link (optional, seen as the link is just an anchor) 
      return false; 
     }); 
    }); 

CSS:

.js #manage_reply_enquiry { 
    display:none; /* hide for JS enabled browsers */ 
} 
#manage_reply_enquiry { 
    /* form styles here */ 
} 

DEMO