Jump to content

Archived

This topic is now archived and is closed to further replies.

Afreen

Pop up form height is reduced after form submission.

Recommended Posts

I have a pop-up form for 'Enquiry' page. I have completed the validation part of that form. When I submit the form, my form's size is reduced from 500px to 160px. I dont know why???

 

Previously, when I was doing the same pop-up form, all the fields were one after the other and at that time the form was fine even after submission.

 

But, now I have made changes and divided the whole form in two divs - left and right, enclosed in another main div. And then the problem started.

 

Can anyone help me out for?????

 

Share this post


Link to post
Share on other sites

You posted this in PHP Application Frameworks, with no mention of what framework you're using, and no code.

 

So, no, we probably can't help too much.

Share this post


Link to post
Share on other sites

I am using Codeigniter framework. This is my pop-up form code (contactform-code.php):

 

 
<div id='fg_formContainer' >
    <div id="fg_container_header">
        <div id="fg_box_Title">Enquiry Form</div>
        <div id="fg_box_Close"><a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close(X)</a></div>
    </div>
<? //echo base_url();?><!--enquiry/form?-->
    <div id="fg_form_InnerContainer">
    
    
<!-- Main Div -->
<div>
<form id='contactus' action='' method='post' accept-charset='UTF-8'>
 
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text'  class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>
Please fill in your information below and Stan Howard will contact you as soon as possible to book your event.<br/>
Or call (877) 627-3320<br/><br/>
<font color="red">*</font> required fields
</div>
<div id='fg_server_errors' class='error'></div>
<!-- Left Div -->
<div style="width:175px;float:left;">
<div class='container'>
<label for='name' ><font color="red">*</font>Your Name : </label><br/>
<input type='text' name='name' id='name' value='' maxlength="50" /><br/>
<span id='contactus_name_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='email' ><font color="red">*</font>Email Address :</label><br/>
<input type='text' name='email' id='email' value='' maxlength="50" /><br/>
<span id='contactus_email_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='phone' ><font color="red">*</font>Phone :</label><br/>
<input type='text' name='phone' id='phone' value='' maxlength="50" /><br/>
<span id='contactus_phone_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='event_date' ><font color="red">*</font>Event Date :</label><br/>
<input type='text' name='event_date' id='event_date' value='' maxlength="50" /><br/>
<span id='contactus_event_date_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='event_time' ><font color="red">*</font>Event Time :</label><br/>
<input type='text' name='event_time' id='event_time' value='' maxlength="50" /><br/>
<span id='contactus_event_time_errorloc' class='error'></span>
</div>
<div class='container'>
<input type="checkbox" name="flexible_date" id="flexible_date"/> <label for='flexible_date' >Dates are flexible </label><br/>
<span id='contactus_flexible_date_errorloc' class='error'></span>
</div>
</div>
<!-- Left Div Ends Here -->
 
<!-- Right Div Starts Here -->
<div style="width:285px;float:left;margin-left:40px;">
<div class='container'>
<label for='event_type' ><font color="red">*</font>Event Type :</label><br/>
<!-- <input type='text' name='event_type' id='event_type' value='' maxlength="50" /><br/>-->
<select id="event_type" name="event_type">
<option value="">Please Select</option>
<option value="Birthday">Birthday</option>
<option value="Corporate Events">Corporate Events</option>
<option value="Social Events">Social Events</option>
<option value="Wedding Ceremony">Wedding Ceremony</option>
</select><br/>
<span id='contactus_event_type_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='no_of_guests' ><font color="red">*</font>Estimated number of guests :</label><br/>
<input type='text' name='no_of_guests' id='no_of_guests' value='' maxlength="50" /><br/>
<span id='contactus_no_of_guests_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='details' >Additional Details</label><br/>
<span id='contactus_details_errorloc' class='error'></span>
<textarea rows="10" cols="30" name='details' id='details'></textarea>
</div>
 
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
</div>
<!-- Right Div Ends Here -->
 
</div>
<!-- Main Div Ends Here -->
    </form>
    </div>
</div>
<!-- client-side Form Validations:
Uses the excellent form validation script from JavaScript-coder.com-->
 
<script type='text/javascript'>
// <![CDATA[
 
    var frmvalidator  = new Validator("contactus");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    frmvalidator.addValidation("name","req","Please provide your name");
    frmvalidator.addValidation("email","req","Please provide your email address");
frmvalidator.addValidation("email","email","Please provide a valid email address");
frmvalidator.addValidation("phone","req","Please provide your phone number");
frmvalidator.addValidation("event_date","req","Please provide your event date");
frmvalidator.addValidation("event_time","req","Please provide your event time");
frmvalidator.addValidation("event_type","req","Please provide your event type");
frmvalidator.addValidation("no_of_guests","req","Please provide total number of guests");
    frmvalidator.addValidation("details","maxlen=2048","The additional detail is too long!(more than 2KB!)");
 
    document.forms['contactus'].refresh_container=function()
    {
        var formpopup = document.getElementById('fg_formContainer');
        var innerdiv = document.getElementById('fg_form_InnerContainer');
        var b = innerdiv.offsetHeight+30+30;
 
        formpopup.style.height = b+"px";
    }
 
    document.forms['contactus'].form_val_onsubmit = document.forms['contactus'].onsubmit;
 
 
    document.forms['contactus'].onsubmit=function()
    {
        if(!this.form_val_onsubmit())
        {
            this.refresh_container();
            return false;
        }
 
        return true;
    }
    function fg_submit_form()
    {
        //alert('submiting form');
        var containerobj = document.getElementById('fg_form_InnerContainer');
        var sourceobj = document.getElementById('fg_submit_success_message');
        var error_div = document.getElementById('fg_server_errors');
        var formobj = document.forms['contactus']
 
        var submitter = new FG_FormSubmitter("popup-contactform.php",containerobj,sourceobj,error_div,formobj);
        var frm = document.forms['contactus'];
 
        submitter.submit_form(frm);
    }
 
// ]]>
</script>
 
<div id='fg_backgroundpopup'></div>
 
<div id='fg_submit_success_message'>
    <h2>Thanks!</h2>
    <p>
    Thanks for contacting us. We will get in touch with you soon!
    <p>
        <a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close this window</a>
    <p>
    </p>
</div>
 
The pop-up form is called in the main file over here:
 
<body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">

 

 <? include('popup-contactform.php');?>

 

<div align="right">
                         <a href='javascript:fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup");'>
                                                    <img src="<? echo base_url();?>images/make.png" border="0" />
                           </a>
 </div>
include('contactform-code.php'); 
</body>
 
The popup-contactform.php id here:
<?php
/*
    Contact Form from HTML Form Guide
    This program is free software published under the
    terms of the GNU Lesser General Public License.
    See this page for more info:
*/
//$this->load->view('fgcontactform')
include('fgcontactform.php');
$formproc = new FGContactForm();
 
//1.Add your email address here.
//You can add more than one receipients.
$formproc->AddRecipient('tests@html-form-guide.com'); //<<---Put your email address here
 
//2. For better security. Get a random string from this link: http://tinyurl.com/randstr
// and put it here
$formproc->SetFormRandomKey('dz0sbNoc7mZPgXa');
 
if(isset($_POST['submitted']))
{
    if($formproc->ProcessForm())
    {
        echo "success";
    }
    else
    {
        echo $formproc->GetErrorMessage();
    }
}
?>
The styles which I am using is:
<style type="text/css">
#fg_formContainer
{
   height:500px;
   width:550px;
   background:#FFFFFF;
   border:1px solid #000;
   padding:0;
   position:absolute;
   z-index:999;
   cursor:default;   
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;   
display:none;
}
 
#contactus .spmhidip
{
   display:none;
   width:10px;
   height:3px;
}
#fg_container_header
{
   height:30px;
   background:#587a01;
   border-top-right-radius:10px;
   -moz-border-radius-topright:10px;
   -webkit-border-top-right-radius:10px;
   -khtml-border-top-right-radius: 10px;
   
   border-top-left-radius:10px;
   -moz-border-radius-topleft:10px;
   -webkit-border-top-left-radius:10px;
   -khtml-border-top-left-radius: 10px;   
}
 
#fg_container_header a
{
   color:#fff;
   font-family:Verdana,Arial;
   font-size:10pt;
   font-weight:bold;
}
 
#fg_box_Title
{
   float:left;
   width:180px;
   margin:5px;
   margin-left:10px;
   color:#fff;
   font-family:"Delicious Smallcaps";
   font-size:15pt;
   font-weight:bold;   
}
 
#fg_box_Close
{
   float:right;
   width:80px;
   margin:5px;
   font-family:"Delicious Smallcaps";
   text-decoration:none;
}
 
#fg_form_InnerContainer
{
   margin:15px;
}
 
#fg_form_InnerContainer h2
{
   font-family : Arial, sans-serif;
   font-size: 14pt;
   font-weight:bold;
   color:#333;     
}
 
#fg_form_InnerContainer p
{
   font-family : Arial, sans-serif;
   font-size: 12pt;
   color:#333;
}
 
#fg_backgroundpopup
{
   position: fixed; 
   top:0; 
   left:0; 
   bottom:0; 
   right:0;
   
   background:#000000;
   opacity: .3;
   -moz-opacity: .3;
   filter: alpha(opacity=30);
   border:1px solid #cecece;
   z-index:1;
   display:none;
}
 
#fg_submit_success_message
{
   display:none;
   padding:15px;
}
 
#contactus input[type=submit]
{
   width:100px;
   height:30px;
   padding-left:0px;
}
 
#contactus textarea
{
  height:120px;
  width:240px;
}
 
#contactus input[type=text]:focus,textarea:focus
{
  color : #009;
  border : 1px solid #990000;
  background-color : #ffff99;
  font-weight:bold;
}
 
#contactus .container
{
   margin-top:8px;
   margin-bottom: 10px;
}
 
#contactus .error
{
   font-family: Verdana, Arial, sans-serif; 
   font-size: 0.7em;
   color: #900;
   background-color : #ffff00;
}
 
 
</style>

 

 

Share this post


Link to post
Share on other sites

Solved it by myself, but forgot to reply here:

 In the contactform-code.php, in the javascript part it is wriiten:

 document.forms['contactus'].refresh_container=function()
    {
        var formpopup = document.getElementById('fg_formContainer');
        var innerdiv = document.getElementById('fg_form_InnerContainer');
        var b = innerdiv.offsetHeight+30+30;
 
        formpopup.style.height = b+"px";
    }
 
instead of the last line i added 
formpopup.style.height = "auto":
 
And the problem is solved. :)

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.