如何在以下場景中使用jQuery隱藏/顯示錶單？

我正在爲我的網站使用Smarty，Php和Jquery。當頁面加載下面的表單時不應該顯示。當用戶點擊下面給出的超鏈接時，它應該得到dsiplayed，並且如果用戶想要再次隱藏表單，他將點擊相同的超鏈接來隱藏上述表單。簡而言之，formload不應該被顯示，並且當點擊超鏈接時，表單應該被顯示，如果它被打開，並且如果被隱藏的話應該被關閉。你能幫我實現這個使用jQuery？提前致謝。如何在以下場景中使用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>

來源

2013-09-24 PHPLover

隱藏形式最初使用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 
    }); 

});

來源

2013-09-24 07:36:30 Johan

<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(); 
})

來源

2013-09-24 07:40:45 Vicky

嘗試：

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(); 
     } 
    }); 
    });

希望幫助！

來源

2013-09-24 07:42:07

方法hide（），show（）和toggle是昂貴的（性能）。好方法是

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

1）你有一個請求來反對！ 2）原生js很快

來源

2013-09-24 08:18:04

沒有啓用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

來源

2013-09-24 09:15:34 Moob

如何在以下場景中使用jQuery隱藏/顯示錶單？

回答

相關問題