I'm using Smarty, Php and Jquery for my website. When the page loads the following form should not be displayed. When user clicks on a hyperlink given below it should get dsiplayed and if user wants to hide the form again he will click on the same hyperlink to hide the above form. In short on formload the form shouldn't be displayed and upon clicking on hyperlink the form should be displayed if it is open and should be closed if it is hidden. Can you help me in achieving this using jQuery? Thanks in advance.
<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>
I'm using Smarty, Php and Jquery for my website. When the page loads the following form should not be displayed. When user clicks on a hyperlink given below it should get dsiplayed and if user wants to hide the form again he will click on the same hyperlink to hide the above form. In short on formload the form shouldn't be displayed and upon clicking on hyperlink the form should be displayed if it is open and should be closed if it is hidden. Can you help me in achieving this using jQuery? Thanks in advance.
<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>
6 Answers
Reset to default 4What about users without JS enabled? This Fiddle may be a more plete solution:
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
Hide the form initially using css:
#manage_reply_enquiry { display: none; }
Then bind an event handler to a link and toggle the visibility:
$(function(){ //when the DOM is ready
$('a.reply').click(function(){ //when clicking the link
$('#manage_reply_enquiry ').toggle(); //toggles visibility
});
});
<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 your script
$(".reply:first").click(function() {
$("#manage_reply_enquiry").toggle();
})
Try:
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();
}
});
});
hope that helps!
method hide(), show() and toggle is expensive(performance). Good method is
var el = $("#someId")
if (el.style.display=='none'){
el.style.display='block'
}else{
el.style.display='none'
}
1) you have one request to object! 2) native js is fast
For anyone having the same issue :)
$(document).ready(function() {
$("#manage_reply_enquiry").hide();
$(".reply").on({
click: function(){
$("#manage_reply_enquiry").toggle();
}
});
});