Gewusst wie: ausblenden/anzeigen Formular mit jQuery im folgenden Szenario?

Ich bin mit Smarty, Php und Jquery für meine website. Wenn die Seite geladen wird das folgende Formular angezeigt werden sollte. Wenn der Benutzer auf einen hyperlink klickt, die unten gegeben werden soll dsiplayed und wenn der Benutzer wünscht, zu verbergen, die form wieder, er wird auf auf dem gleichen hyperlink zu verbergen, die obige form. Kurz auf formload die form sollte nicht angezeigt werden und bei Klick auf hyperlink-form angezeigt werden soll, wenn es geöffnet ist und geschlossen werden sollte, wenn es ausgeblendet ist. Können Sie mir helfen, um dieses mithilfe von jQuery? Vielen Dank im Voraus.

<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>
InformationsquelleAutor PHPLover | 2013-09-24
  1. 4

    Was über Benutzer ohne JS aktiviert? Diese Geige kann eine vollständige Lösung:

    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

    InformationsquelleAutor Moob
  2. 0

    Verbergen die form zunächst mit css:

    #manage_reply_enquiry { display: none; }

    Dann binden eines Ereignishandlers zu einem link, und setzen Sie die Sichtbarkeit:

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

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

});
    InformationsquelleAutor Johan
  3. 0
    <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">

    In Ihrem Skript

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

    Versuchen:

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

    hoffe, das hilft!

    InformationsquelleAutor Gurminder Singh
  5. 0

    Methode hide(), show() und toggle ist teuer(performance). Eine gute Methode ist 

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

    1) Sie haben eine Anfrage zu Objekt!
    2) native js ist schnell

    InformationsquelleAutor Orange_shadow
  6. 0

    Für jemand mit dem gleichen Problem 🙂

    $(document).ready(function() {

            $("#manage_reply_enquiry").hide();

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

        });
    • Können Sie fügen Sie bitte einige Erläuterungen zum code?
    • Nachdem das Dokument geladen wurde, finden Sie ein element mit dem id gleich "manage_reply_enquiry" und verstecken Sie, wenn Sie ein element mit der Klasse gleich auf "Antworten" geklickt wird, überprüfen Sie, ob das element mit der id "manage_reply_enquiry" angezeigt wird, oder nicht, wenn nicht zeigen, sonst verstecken die element...
    InformationsquelleAutor MCD
Schreibe einen Kommentar