Cómo ocultar/mostrar el formulario con jQuery en el siguiente escenario?

Estoy usando Smarty, Php y Jquery para mi sitio web. Cuando la página se carga el siguiente formulario no debe mostrarse. Cuando el usuario hace clic en un hipervínculo dado a continuación se debe obtener dsiplayed y si el usuario quiere ocultar el formulario de nuevo que se haga clic en en el mismo hipervínculo para ocultar el formulario anterior. En corto en el formload el formulario no debe ser mostrado y al hacer clic en el hipervínculo, el formulario debe mostrar si está abierto y debe ser cerrado si está oculto. Me pueden ayudar en la consecución de este con jQuery? Gracias de antemano.

<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

6 Kommentare

  1. 4

    ¿Qué acerca de los usuarios sin JS activado? Este Violín puede ser una solución más completa:

    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

  2. 0

    Ocultar el formulario inicialmente mediante el uso de css:

    #manage_reply_enquiry { display: none; }

    A continuación, enlazar un controlador de eventos a un enlace y alternar la visibilidad:

    $(function(){ //when the DOM is ready
    
        $('a.reply').click(function(){ //when clicking the link
            $('#manage_reply_enquiry ').toggle();  //toggles visibility
        });
    
    });
  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">

    En su secuencia de comandos de

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

    Tratar:

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

    espero que ayude!

  5. 0

    método hide(), mostrar() y alternar es caro(rendimiento). Buen método es

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

    1) usted tiene una petición de objeto!
    2) nativo de js es rápido

  6. 0

    Para cualquier persona con el mismo problema 🙂

    $(document).ready(function() {
    
                $("#manage_reply_enquiry").hide();
    
                $(".reply").on({
                    click: function(){
                        $("#manage_reply_enquiry").toggle();
                    }
                });
    
            });
    • Después de que se ha cargado el documento, encontrar un elemento con id igual a «manage_reply_enquiry» y ocultar cuando un elemento con clase es igual a «responder», se hace clic en comprobar si el elemento con id «manage_reply_enquiry» se muestra o no, si no mostrar, más ocultar el elemento…

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea