I have an enquiry button on my website, that when clicked uses colorbox to reveal a form that they fill in to send an enquiry.
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, fastIframe:false, width:"450px", height:"480px", transition:"fade", scrolling : false});
});
</script>
<a class='inline' href="#inline_content" style="display:block; width:317px; height:85px;"></a>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
return false;
});
</script>
Ignore the php validation at the mo, but Im thinking that its not the way anyway.
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["field1"])) {
$nameErr = "Name is required";
} else {
$name = test_input($_POST["field1"]);
}
if (empty($_POST["field2"])) {
$emailErr = "Email is required";
} else {
$email = test_input($_POST["field2"]);
}
if (empty($_POST["field3"])) {
$website = "";
} else {
$website = test_input($_POST["field3"]);
}
if (empty($_POST["field4"])) {
$comment = "";
} else {
$comment = test_input($_POST["field4"]);
}
if (empty($_POST["field5"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["field5"]);
}
if (empty($_POST["field6"])) {
$genderErr = "Gender is required";
} else {
$gender = test_input($_POST["field6"]);
}
}
?>
<form id="pre-process" action="" method="post">
<ul class="form-style-1">
<li>
<label>Full Name <span class="required">*</span></label>
<input type="text" name="field1" class="field-divided" placeholder="First" /> <input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
<li>
<label>Email <span class="required">*</span></label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>Telephone <span class="required">*</span></label>
<input type="text" name="field4" class="field-long" />
</li>
<li>
<label>Postcode <span class="required">*</span></label>
<input type="text" name="field5" class="field-long" />
</li>
<li>
<label>Enquiry <span class="required">*</span></label>
<textarea id="field6" class="field-long field-textarea"></textarea>
</li>
<li>
<input type="submit" value="Submit" />
</li>
</ul>
</form>
What I would like to happen is rather than colorbox closing as I click submit, it checks for required fields, if all good it submits the form and the a success message appears, and still colorbox is open and so its down to the user to close it and return to the website
OK I have taken it on a touch, the form opens up in colorbox, and on press of the submit button it doesn’t close colorbox, but still something isn’t right, so will explain how its set up below, and here is a link to it.
Its the green button in the header pic - enter link description here
There 2 php pages, the main one and the form that appears in colorbox.
This is the code that exists on the main page -
<a href="myform.php" class="cbox-form" style="display:block; width:317px; height:85px;"></a>
<script src="colorbox-master/jquery.colorbox.js"></script>
<script>
jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){
cbox_submit();
}});
});
//submit ajax form continually if needed
function cbox_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
cbox_submit();
}});
}
);
return false;
});
}// cbox_submit
</script>
Then inside myform.php I have whats below, but its not quite working
<?php
if (isset($_POST['submit'])) {
$error = "";
if (!empty($_POST['field1'])) {
$title = $_POST['field1'];
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in your title.</span><br />";
}
if (!empty($_POST['field2'])) {
$name = $_POST['field2'];
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in your name.</span><br />";
}
if (!empty($_POST['field3'])) {
$email = $_POST['field3'];
if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){
$error .= "<span style='font-size:14px; margin-left:90px; margin-bottom:20px;'><span style='color:#f00'>* </span>The e-mail address you entered is not valid.</span><br/>";
}
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in an e-mail address.</span><br/>";
}
if (!empty($_POST['field4'])) {
$sname = $_POST['field4'];
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in your surname.</span><br />";
}
if (!empty($_POST['field5'])) {
$phone= $_POST['field5'];
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in a phone number.</span><br />";
}
if (!empty($_POST['field6'])) {
$message = $_POST['field6'];
} else {
$error .= "<span style='font-size:14px; margin-left:0px; margin-bottom:20px;'><span style='color:#f00'>* </span>You didn't type in a message.</span><br/>";
}
if(($_POST['code']) == $_SESSION['code']) {
$code = $_POST['code'];
} else {
$error .= "<span style='color:#f00'>* </span>Captcha code entered does not match. Please try again. <br />";
}
if (empty($error)) {
$from = 'From: ' . $name . ' <' . $email . '>'; // i.e. From John S. <john.smith@mail.com>
$to = "info@accend4web.co.uk";
$subject = "Enquiry From Website";
$content = "Hi, \n\n" . $title . " " . $name . " " . $sname . ", has sent you a message: \n\n" . $message . "\n\n Phone number: " . $phone . "\n\nSent from the website.";
$success = "<h3 style='font-size:14px; margin-left:90px; margin-bottom:20px;'>Thank you! Your message has been sent!</h3>";
mail($to,$subject,$content,$from);
}
}
?>
<form id="pre-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<ul class="form-style-1">
<li>
<label for="first-name">Full Name <span class="required">*</span></label>
<input type="text" name="field1" class="field-divided" placeholder="First" /> <input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
<li>
<label>Email <span class="required">*</span></label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>Telephone <span class="required">*</span></label>
<input type="text" name="field4" class="field-long" />
</li>
<li>
<label>Postcode <span class="required">*</span></label>
<input type="text" name="field5" class="field-long" />
</li>
<li>
<label>Enquiry <span class="required">*</span></label>
<textarea id="field6" class="field-long field-textarea"></textarea>
</li>
<li>
<input type="submit" value="Submit" />
</li>
</ul>
</form>
This condition
if (isset($_POST['submit'])) {
is never equals to true because jQuery’s serialize() method doesn’t include submit button into result.
<input type="hidden" name="submit" value="1">
Hi megazoid,
Added that in and still no movement, and the required fields aren’t checking either.
I tried moving the cbox_submit function into myform.php and it reacted but all that happened is that on click of submit the page refreshed and myform.php changed from being a pop up to instead being a part of the url string as in www.mysite.co.uk/myform.php
There some sort of validation going on though, but its not anything I have set up. because if I click submit and there not a proper email it reminds me to use a valid email, but its not part of the validation I have set up.
Ok by using document.write I can confirm that on click of the submit button this line is being called successfully.
jQuery("#pre-process").submit(function(){
and so its the code within that that’s not allowing the form to work, but I cant work it out, so its def a jquery issue, or is it that the php, I don’t know.
I’ve dropped the code above in myform.php and am using the code below, there an error I think caused by the php somewhere, that once again I cant find, very frustrating
<?php
if(isset($_POST['submit']))
{
echo "crpa";
$required_fields = array(
'company-name' => 'Your Company Name',
'name' => 'Your Name',
'email' => 'Your Email'
);
$normal_fields = array(
'fax' => 'Your Fax #'
);
$missing_fields = array_diff_key($required_fields, $_POST);
if(empty($missing_fields))
{
$defined_fields = array_merge($required_fields, $normal_fields);
foreach($defined_fields as $key => $value)
{
if(array_key_exists($key, $required_fields) && empty($_POST[$key]))
{
$missing_fields[$key] = $required_fields[$key];
}
else
{
$defined_fields[$key] = $_POST[$key];
}
}
if(!empty($missing_fields))
{
echo '<p>Please fill in the following required fields.</p>';
echo '<ul style="color: red;">';
foreach($missing_fields as $key => $value)
{
printf('<li>%s</li>', $value);
}
echo '</ul>';
}
else
{
echo 'Successful!';
} } }
if(!isset($_POST['submit']) || !empty($missing_fields)):
?>
<form id="pre-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<ul class="form-style-1">
<li><label for="company-name">Your Company Name:</label><input type="text" name="company-name" id="company-name" value="<?php if(isset($_POST['company-name'])){echo $_POST['company-name'];} ?>" /></li>
<li><label for="name">Your Name:</label>
<input type="text" name="name" id="name" value="<?php if(isset($_POST['name'])){echo $_POST['name'];} ?>"/ /></li>
<li><label for="email">Your Email:</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])){echo $_POST['email'];} ?>"/></li>
<li><label for="fax">Your Fax #:</label>
<input type="text" name="fax" id="fax" value="<?php if(isset($_POST['fax'])){echo $_POST['fax'];} ?>"/></li>
<li><input type="submit" value="Submit" /></li>
</ul>
<input type="hidden" name="submit" />
</form>
<?php endif; ?>
On submit of the form, Im checking the jquery code, and all is fine until I get to the section below, where the alert “hello” I put in is the only place it doesn’t appear when I click submit.
jQuery().colorbox({html: data, onComplete: function(){
document.write("hello")
cbox_submit();
}});
multichild:
document.write(“hello”)
document.write overwrites the entire page if it is called after the page has loaded. You should never use it even for debugging.
For debugging you can either set breakpoints in the debugger or use alert() or console.log().
For live pages you should be using calls that update the DOM. As you are using jQuery which is a library for updating the DOM (it doesn’t do much other than DOM calls) you should use that if you want to output something to the live page.
Hi felgall,
Ok I understand. I was using it as I needed to know if it was getting that far, and then kept it in to post on here to show where I was at.
I still haven’t got to the bottom of it though, as I don’t quite understand what you mean.
Its been dragging on now this one, and cant get it over the last hurdle
Hi,
I have changed a bit of code and I do have movement and in the right direction it seems, just wondered if it could be checked over, and if good that’s great, but there one issue that needs to be resolved is that on submit colorbox disappears and instead it opens up full screen.
This is what Im doing now
jQuery(function(){
jQuery('.cbox-form').colorbox({maxWidth: '100%', onComplete: function(){
cbox_submit();
}});
});
function cbox_submit()
{
jQuery("#pre-process").submit(function(){
$("#pre-process").ajaxSubmit({url: 'myform.php', type: 'post'});
return false;
});
}
As reference so you can see it working, if you click the large green button in the header image at the link below -
dev area
system
April 25, 2016, 7:12pm
10
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.