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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Was über Benutzer ohne JS aktiviert? Diese Geige kann eine vollständige Lösung:
HTML:
JS:
CSS:
DEMO
Verbergen die form zunächst mit css:
Dann binden eines Ereignishandlers zu einem link, und setzen Sie die Sichtbarkeit:
In Ihrem Skript
Versuchen:
HTML:
JAVASCRIPT:
hoffe, das hilft!
Methode hide(), show() und toggle ist teuer(performance). Eine gute Methode ist
1) Sie haben eine Anfrage zu Objekt!
2) native js ist schnell
Für jemand mit dem gleichen Problem 🙂