View Full Version : two style sheets problem
explorers5000
08-08-2011, 11:55 PM
i have a problem which i cannot solve..
i found a nice php popup contact form for my page which aldready has layout.css and this contact form has its own .css file which is called popup-contact.css
the contact form work without a problem with its test page:
tercume.pro/a-page.php
when you click on the yellow "contact us" button you will see that the form is nice and
styled..
however,
when i implement it to my website tercume.pro/index.php where the form is supposed to be,and click on the picture with numbers on, you see that the form does not get rendered and is without the style and even the "close link" is not visible, whereas it is properly styled on thea-page.php
when i get rid of the layout.css in the index.php, then the form is styled but then the page is not..
i wanna have both the styles in one page..
so how can we solve this?
HTMLBasicTutor
08-09-2011, 02:11 AM
Works fine for me in IE8, FF and Chrome.
What browser are you using?
weegillis
08-09-2011, 03:28 AM
Are you putting the layout style sheet before the form style sheet in the resource calls? If this is reversed, weird things can happen when style rules collide.
HTMLBasicTutor
08-09-2011, 12:09 PM
Are you putting the layout style sheet before the form style sheet in the resource calls? If this is reversed, weird things can happen when style rules collide.
I thought of that also. But when it worked for 3 different browsers for me I then thought of a cross-browser issue.
explorers5000
08-09-2011, 01:58 PM
problem solved.
thanks for all the answers..
well, i just had to change relative font sizes to fixed ones in the contact form's css.
now just one more thing: once the form is sent all the info sticks in the labels and is there a way to have all the boxes cleared once the form is submitted?
or just i ask this question under php forum?
weegillis
08-09-2011, 02:26 PM
Are you confirming that the message is sent successfully on the same page as the form?
What you could do is jump to another page (on successful submission) and then break the back button so the form can't be got at through history, but can only be navigated to, which will bring up a cleared form, ready for the next fill in.
explorers5000
08-09-2011, 05:49 PM
Are you confirming that the message is sent successfully on the same page as the form?
What you could do is jump to another page (on successful submission) and then break the back button so the form can't be got at through history, but can only be navigated to, which will bring up a cleared form, ready for the next fill in.
you can see it yourself here if it's okay with you:
i cannot share links now ("To be able to post links or images your post count must be 10 or greater. You currently have 2 posts.") i thought i was able to post links on my previous post.
anyways..
this is not a page that pop ups though. it is modal popup window with ajax submission. so there is no back button at all.
once the form is submitted successfully, the contact info stay in the boxes and does not clear unless you F5.
weegillis
08-09-2011, 05:57 PM
Then it's a simple JavaScript call at the completion of on submit validation. All of the fields are contained in one object. Set it on exit to ="" or =NULL, perhaps?
<edit>
I'm just throwing this out here...
Perhaps you could simply create a new form object? I don't know that this would be good, though, as they would stack up and take up a lot of space; i.e., wasteful. But with good management this could also be eleviated? (I ask, because object oriented programming is not my forte.)
</edit>
weegillis
08-09-2011, 06:06 PM
Here's another thing that will require a little more study on my part, but you might think on it, as well, the form data array itself. Data in fields is pushed into the array. Could it just as easily by popped out as a way to reset the array? Again, not too wise in this area, but get the gist. The history array is a good example of push and pop.
weegillis
08-09-2011, 06:17 PM
Skip that. The form submitter script has the form object in one variable, frmobj. Set it to, frmobj="" as a part of the success result, perhaps?
explorers5000
08-09-2011, 06:19 PM
here are the codes by the way:
popup-contactform.php:
<?php
require_once("./include/fgcontactform.php");
$formproc = new FGContactForm();
//1.Add your email address here.
//You can add more than one receipients.
$formproc->AddRecipient('info@tercume.com'); //<<---Put your email address here
//2. For better security. Get a random string
// and put it here
$formproc->SetFormRandomKey('dz0sbNoc7mZPgXa');
if(isset($_POST['submitted']))
{
if($formproc->ProcessForm())
{
echo "success";
}
else
{
echo $formproc->GetErrorMessage();
}
}
?>
contactform-code.php:
<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<script type='text/javascript' src='scripts/fg_ajax.js'></script>
<script type='text/javascript' src='scripts/fg_moveable_popup.js'></script>
<script type='text/javascript' src='scripts/fg_form_submitter.js'></script>
<div id='fg_formContainer'>
<div id="fg_container_header">
<div id="fg_box_Title">Contact us</div>
<div id="fg_box_Close"><a href="javascript:fg_hideform('fg_formContainer','fg_back groundpopup');">Close(X)</a></div>
</div>
<div id="fg_form_InnerContainer">
<form id='contactus' action='javascript:fg_submit_form()' 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'>* required fields</div>
<div id='fg_server_errors' class='error'></div>
<div class='container'>
<label for='name' >Your Full 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' >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='message' >Message:</label><br/>
<span id='contactus_message_errorloc' class='error'></span>
<textarea rows="10" cols="50" name='message' id='message'></textarea>
</div>
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
</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("message","maxlen=2048","The message 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_back groundpopup');">Close this window</a>
<p>
</p>
</div>
denvermatt
08-09-2011, 07:09 PM
The javascript syntax you would use to set the value of the form elements to "" is:
var target = document.getElementById('field-name-goes-here');
target.value = "";
You would just repeat this code for each of the fields you want to blank out, remembering to replace the "field-name-goes-here" with your actual field name.
I haven't studied the code too much, but I believe you would put the blanking scripts in the function: document.forms['contactus'].onsubmit=function()
weegillis
08-09-2011, 11:10 PM
You would just repeat this code for each of the fields you want to blank out, remembering to replace the "field-name-goes-here" with your actual field name.Pretty much popping them out, like we talked about above. It's generic enough in the DOM to pop them off the form array. No field names. Pop the data out, and it's gone. The array just got one element shorter.
I haven't studied the code too much, but I believe you would put the blanking scripts in the function: document.forms['contactus'].onsubmit=function()
This method is very abstract. Which line does one insert where? It does follow, though, I'll give you that. Above, we began to drill down into the scripts that you haven't studied, is all.
weegillis
08-09-2011, 11:18 PM
One supposes that having popped all the data out the form array, it wouldn't be a strain on the system to create a new form object at this point, and abandon the nulled out post object. It's got no length, only it's pointers occupying space. Is this OOP thinking? @kgun, where are you?
denvermatt
08-10-2011, 12:46 AM
I think adding the "for" loop in the submit function might do it (haven't tested it):
document.forms['contactus'].onsubmit=function()
{
if(!this.form_val_onsubmit())
{
this.refresh_container();
return false;
}
/**** New code begins here ****/
for(i=0; i<document.forms['contactus'].elements.length; i++)
{
document.forms['contactus'].elements[i].value = "";
}
/**** New code ends here ****/
return true;
}
Only problem is that it looked to me like there were some hidden fields with account numbers or something, so might need to add an exception for those so they don't get blanked along with the others. Not sure.