Lightbox not showing contact form

JavaScript
1

I am trying to use a light box to show a pop-up contact form but for some reason the form is not coming up. It is just coming up with the loading animation but the form isnt showing. I have tried everything I can and I am out of ideas.

If anyone could help me I would greatly appreciate it.

form html

<div id="quote"><a href="#TB_inline?height=155&width=300&inlineId=TBForm&modal=false" data-lightbox="image-1"> 
<"here is my img path" class="imgquote" width="297" height="75" (border="0px" /></a><br />

<div id="TBThanks" style="visibility:hidden;">
    <p>
    Thank you, we will send you a quote shortly.
    </p>
</div>
<div id="TBForm" class="TBForm" style="visibility:hidden">
    <p>
        <form id="FormTB" action="">
        <input type="hidden" id="Form_ID" name="Form_ID"  value="<?php echo $eid; ?>" />
        <center><strong>Request a Quote</strong></center><br />
            <table width="100%">
            <tr>
            <td width="30%">*Your Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Name" name="Form_Name" /></td>
            </tr>
            <tr>
            <td width="30%">Company Name:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Company" name="Form_Company" /></td>
            </tr>
            
            <tr>
            <td>*Your E-Mail:</td><td>&nbsp;</td><td><input type="text" id="Form_Email" name="Form_Email" /></td>
            </tr>
            <tr>
            <td width="30%">*Phone Number:</td><td width="20%">&nbsp;</td><td width="50%"><input type="text" id="Form_Number" name="Form_Number" /></td>
            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr>
            <td width="100%" align="center" colspan="3">
            <input type="button" class="button" name="Form_Submit" value="Request Quote" />
            </td>
            </tr>
            <tr><td colspan="3">&nbsp;</td></tr>
            <tr>
            <td width="100%">
            <b><?php echo $name; ?></b><br />
            <b>Manufacturer:</b> #<?php echo $manu;?><br />
            <b>Model#:</b> <?php echo $model;?><br />
            <b>Category:</b> <?php echo $Category;?><br />
            </td>
            </tr>
            </table>
        </form>
    </p> 
</div>



Then I have this in the header (along with the script files "js / css)

    <script language="javascript" type="text/javascript">
    $(function() {  
   $(".button").click(function() {  
   var name = $("#Form_Name").val();
   var email = $("#Form_Email").val();
   var eid = $("#Form_ID").val();
    var company = $("#Form_Company").val();
    var number = $("#Form_Number").val();
    var dataString = 'name='+ name + '&email=' + email + '&eid=' + eid + '&Company=' + company + '&Number=' + number;    
//alert (dataString);return false;  
		$.ajax({  
		  type: "POST",  
		  url: "AJAX_Quote.php",
		  data: dataString,  
		  success: function() {  
			tb_remove();
			setTimeout("Thanks()", 450);
		  }  
		});   
	});  
});  
function Thanks()
{
tb_show('Thank You', '#TB_inline?width=400&height=400&inlineId=TBThanks&modal=false', false);
}
jQuery.noConflict(); 
function clearText(field){

    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;

}
</script>

I read somewhere that I could have conflicting js scripts but I tried to take them out 1 by 1 and it still didnt work.

2

Could you post a link to a page where we can see it not working?

3

if you click on the more info button

http://www.packagingequipment4sale.com/new-product.php?Item=26
4

Well, a few things are wrong. If you look at the console (usually F12 > Console) you can see a whole bunch of 404 errors. You’ll probably want to fix them.

Secondly, it seems you are trying to open a second page within the lightbox (an iframe?)
AFAIK Lightbox2 doesn’t do iframes. I would recommend colorbox instead.

5

When I look at the code, I do not see anything that would be calling all the 404 errors.

As for the form, It is not on a second page, it is basically a contact form in a lightbox. Now if I take the “visibility:hidden” away, it will show, but it shows under the content. So I know it is there, i just need it to show in the lightbox.

6

These are the 404 errors I see in the console:

1032×251 85.4 KB

It took a little detective work, but it seems that the first three CSS errors are being caused by this file: http://www.packagingequipment4sale.com/css/zoo.css

I’m not sure why it is reporting the error as being caused by line 35 though.
If you look through the rest of your includes, I’m sure you’ll find the other errors.

As I said, Lightbox2 only supports images. You’ll need to use another Lightbox-type script.
Plus, it is working for me in Chrome, latest:

925×653 244 KB

Did you change something in the meantime?

7

Yes, I changed the code following a members advice. I was able to get the form to show but it isnt sending the data. I am slowly trying to work this out, but being new to php it is taking a bit of time.

Basically when a visitor requests info on a product, I need the email to be sent that says something like

Someone has requested info on product ABC Bulk Depalletizer

Name - Visitors Name
Email - Email
Phone - 123-456-7890

But I cannot figure out how to get the product info sent, there are 100’s of products and the page url looks like the one I showed above, The item number changes based on the item.

8

Do you have multiple products on a page or is it one product per page, denoted by the query string as in your example?

9

No, just one product per page.

But the pages are set up like

product.php?Item-1
product.php?Item-2 and so on

10

Ok, so taking new-product.php?Item=26 as an example, when I click on “More Information about this product” I see the form in the lightbox.

Within the form, you have marked three fields with an asterisk (name, email and phone). I am assuming that you wish to validate these on the client-side when the form is submitted. Is that correct?

Below the “Request quote” button I see:

ABC Bulk Depalletizer

Manufacturer: 
Model: 
Category:

What should go here?

11

If the item has any of that info then it will show up.

I am also trying to figure how to not show them if there is no data for them variables.

I can get the form to send the basic info (name, email, phone) but I cannot get it to also send the Item info. Item name.

I would like the form that is mailed to me to have all the info and also have the item name and the page url the item is on.

12

I would do this in PHP.
I assume you have all of your product info in the database, so would it be possible to output it to the page if it is present and skip it if it isn’t?

13

Correct, I do have my page written in php, what I am after now is getting the form to send the product info. It is sending the usual info but not the stuff being pulled from the database.

14

Do you have an example of as page where this info (e.g. manufacturer, model and category) is present in the form?

15

Hi,

I just got your PM, but would rather keep the discussion in one place so will reply here :slight_smile:

You said:

Well, you would need to send this info to your PHP script. Currently you have:

var dataString = 'name='+ name + '&email=' + email + '&eid=' + eid + '&Company=' + company + '&Number=' + number;

can you not just add an unique identifier to the product name:

<div class="element element-itemname first last" id="productName">ABC Bulk Depalletizer</div>

then add the following to the dataString variable:

+ '&url' = document.URL + '&productName' = $("#productName");
16

Thats the thing, I dont know where to add it in the code being brand new to php.

17

The code above you add to your JavaScript, then you can pull the variables out of the $_POST on the other end:

$url = $_POST['url'];
$product_name = $_POST['productName'];
18

For reference to the PHP side of this discussion, please see

19

I appreciate it. I am posted in the php section to see if there was an easier way to accomplish what I am needing to have done.

20

I got your PM. Could you please keep the discussion here, as otherwise it is hard to keep track of :smile:

You said:

Sure.

On your page new-product.php?Item=26, change:

<div class="element element-itemname first last">ABC Bulk Depalletizer</div>

to:

<div class="element element-itemname first last" id="productName">ABC Bulk Depalletizer</div>

Then adjust the JavaScript:

<script language="javascript" type="text/javascript">
  $(function() {  
     $(".button").click(function() {  
       var name = $("#Form_Name").val();
       var email = $("#Form_Email").val();
       var eid = $("#Form_ID").val();
       var company = $("#Form_Company").val();
       var number = $("#Form_Number").val();
       var dataString = 'name='+ name + '&email=' + email + '&eid=' + eid + '&Company=' + company + '&Number=' + number + '&url' = document.URL + '&productName' = $("#productName"); 
       $.ajax({  
        type: "POST",  
        url: "AJAX_Quote.php",
        data: dataString,  
        success: function() {  
          tb_remove();
          setTimeout("Thanks()", 450);
        }  
      });   
    });  
  });  
  function Thanks(){
    tb_show('Thank You', '#TB_inline?width=400&height=400&inlineId=TBThanks&modal=false', false);
  }
  jQuery.noConflict(); 
  function clearText(field){
    if (field.defaultValue == field.value) field.value = '';
    else if (field.value == '') field.value = field.defaultValue;
  }
</script>

And in AJAX_Quote.php:

<?php
  $url = $_POST['url'];
  $product_name = $_POST['productName'];