0

Web サイトに Smarty、Php、および 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>
4

6 に答える 6

4

JS が有効になっていないユーザーはどうなりますか? この 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 */
}

デモ

于 2013-09-24T09:15:34.033 に答える
0

メソッド hide()、show() およびトグルは高価です (パフォーマンス)。良い方法は 

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

1) 異議を唱えるリクエストが 1 つあります。2) ネイティブ js は高速です

于 2013-09-24T08:18:04.300 に答える
0

試す：

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>

ジャバスクリプト:

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

それが役立つことを願っています!

于 2013-09-24T07:42:07.147 に答える