Echoing PHP Array into Javascript File/FancyZoom Popup

Question

Clicking on the “Apply for Finance” button on our Vehicle Details page opens up a FancyZoom window on our website, with financeapp.js the file that is shown in the window. I need to pass some variables (Year, Make and Model of Car) to this page so that they are displayed in the Finance App window that pops up over the Vehicle Details page.

The Car Detail page has code like:

<?php echo $product_array['make']; ?>

To show the Vehicle Make on the page, and on the FancyZoom window, I also want to have the vehicle make echoed. Is this possible with Javascript? Can it be so that when the Javascript window is opened, it gets the vehicle info from detail page?

Putting in PHP Code into the .js file is resulting in Syntax errors.

This is the code for financeapp.js

$(document).ready(function(){       
    $('#content_outer').append('<div id="fancy_zoom_large_financeapp">\
            <form action="" id="finance-app-form" method="POST">\
            <H2>Apply for Finance</H2>\
<DIV id="mcms_contact">\
  <FORM id="ContactForm" encType="multipart/form-data" method="post" name="form1" action="/financeinsurance.html">\
    <INPUT type="hidden" name="type">\
    <p>Mandatory fields are indicated with a *</p>\
    <TABLE id="tablecontact">\
      <TBODY>\
        <TR>\
          <TH width="146">First Name *</TH>\
          <TD width="328"><INPUT id="firstname" size="50" name="firstname" AUTOCOMPLETE="OFF"></TD>\
          <TD width="311">&nbsp;</TD>\
        </TR>\
        <TR>\
          <TH>Surname *</TH>\
          <TD><INPUT id="surname" size="50" name="surname" AUTOCOMPLETE="OFF"></TD>\
          <TD>&nbsp;</TD>\
        </TR>\
        <TR>\
          <TH>Mobile *</TH>\
          <TD><INPUT id="mobile" size="50" name="mobile"></TD>\
          <TH rowspan="3">You are applying for finance for<br>the following vehicle: <br><img src ="images/car.jpg"><br>YEAR MAKE MODEL OF CAR<br>(Stock #STOCKNUMBER)</TH>\
        </TR>\
        <TR>\
          <TH>Postcode *</TH>\
          <TD><INPUT id="postcode" size="50" name="postcode" AUTOCOMPLETE="OFF"></TD>     \
        </TR>\
        <TR>\
          <TH>Email *</TH>\
          <TD><INPUT id="email_address" size="50" name="email_address" AUTOCOMPLETE="OFF"></TD>          \
        </TR>\
        <TR>\
          <TH>Living Arrangement *</TH>\
          <TD><SELECT id="living" name="living">\
            <OPTION selected value="">Please select</OPTION>\
            <OPTION value="Own">Own</OPTION>\
            <OPTION value="Buy">Buy</OPTION>\
            <OPTION value="Other (employer subsided)">Other (employer   subsided)</OPTION>\
      </SELECT></TD>\
          <TD rowspan="5"></td>\
        </TR>\
        <TR>\
          <TH>Employment Status *</TH>\
          <TD><SELECT id="emp" name="emp">\
            <OPTION selected value="">Please   select</OPTION>\
            <OPTION value="Full Time Permanent more than 3 months">Full Time   Permanent more than 3 months</OPTION>\
            <OPTION value="Part Time">Part Time</OPTION>\
            <OPTION value="Pensioner">Pensioner</OPTION>\
            <OPTION value="Unemployed">Unemployed</OPTION>\
          </SELECT></TD>          \
        </TR>\
        <TR>\
          <TH>Credit Rating *</TH>\
          <TD><SELECT id="credit" name="credit">\
            <OPTION selected value="">Please select</OPTION>\
            <OPTION value="Excellent - No Recorded Defaults">Excellent - No Recorded   Defaults</OPTION>\
            <OPTION value="Unsure">Unsure</OPTION>\
          </SELECT></TD>          \
        </TR>\
        <TR>\
          <TH>Preferred Dealership *</TH>\
          <TD><SELECT id="purchfrom" name="purchfrom">\
            <OPTION selected value="">Please select</OPTION>\
            <OPTION value="North">Northern Dealership</OPTION>\
            <OPTION value="South">Southern Dealership</OPTION>\
          </SELECT></TD>          \
        </TR>\
        <TR>\
          <TH>Purchase Price *</TH>\
          <TD><INPUT id="price" size="50" name="price"></TD>          \
        </TR>\
        <TR>\
          <TH>Deposit/Trade In *</TH>\
          <TD><INPUT id="dep" size="50" name="dep"></TD>\
                    <TD>&nbsp;</TD>\
        </TR>\
        <TR>\
          <TH>Loan Amount *</TH>\
          <TD><INPUT id="amt" size="50" name="amt"></TD>\
          <TD>&nbsp;</TD>\
        </TR>\
        <TR>\
          <TH></TH>\
          <TD><INPUT value="Submit" type="submit" name="finance"></TD>\
          <TD>&nbsp;</TD> \
        </TR>\
      </TBODY>\
    </TABLE> \
  </FORM>\
</DIV>');
    $('.fancyzoom').fancyZoom();
});

Where YEAR MAKE and MODEL are in the code is where I want to insert to PHP Array [make], [model] etc. Doable....?

Answer 1

The simplest way to do this would be to load the contents of the element via ajax. For example (in jQuery):

$('#content_outer').load('ajax/car_data.php');

Here ajax/cardata.php would have code like:

 <div id="fancy_zoom_large_financeapp">
 <form action="" id="finance-app-form" method="POST">
 <H2>Apply for Finance</H2>
 etc.
 <?=$year_of_car?>

Alternatively, you could send an AJAX query for just the year/make/model of the car.