External JS form field validation

JavaScript
1

Hello all,

I have a external JS problem I have been working on for 2 days now, any help would be appreciated.

I have a form that in the head area of the PHP landing page has the following source of JS:


<script type="text/javascript" src="/js/gcert_process_form.js"></script>

on the same page it has an include to grab the form:


<?php include(DIR_WS_PHP."gcert_form.inc.php");?>

That being said here is the form code:


<form id="contact_form" name="contact_form" method="post" action="/process_gcert_form.php">
<p>
<label class="contact">* Which location is most convenient?</label>
<select name="location">
<option selected><?php if ($location){ echo $location;}else{ echo "Choose one";}?></option>
<option disabled="disabled" value "">-----------------------------------------</option>
<option value="Sheridan">confidential 1</option>
<option value="Pen Centre">confidential 2</option>
<option value="Grantham">confidential 3</option>
</select><br />

<label class="contact">* First Name:</label><input type="text" name="fname" size="25" value="<?php if ($fname){ echo $fname;}?>" /><br /> 
<label class="contact">* Last Name:</label><input type="text" name="lname" size="25" value="<?php if ($lname){ echo $lname;}?>"  /><br />                   
<label class="contact">Age:</label>
<select name="age" id="age">
<option selected><?php if (isset($age)){ echo $age;}else{ echo "Choose one";}?></option>
<option disabled>-------</option>
<option>13 - 17</option>
<option>18 - 24</option>
<option>25 - 29</option>
<option>30 - 39</option>
<option>40 - 49</option>
<option>50 - 59</option>
<option>60 - 69</option>
<option>70 and over</option>
</select><br /><br />
<label class="contact">Gender:</label>
<input type="radio" name="gender" value="Male" style="margin:0; padding:0; border:none;" <?php if ($gender=="Male"){ echo "checked";}?>>Male&nbsp;&nbsp;<input type="radio" name="gender" value="Female" style="margin:0; padding:0; border:none;" <?php if ($gender=="Female"){ echo "checked";}?>>Female<br /><br />
<label class="contact">Address:</label><input type="text" name="address" size="25" value="<?php if (isset($address)){ echo $address;}?>" /><br />
<label class="contact">City:</label><input type="text" name="city" size="25" value="<?php if (isset($city)){ echo $city;}?>"/> <br />                            
<label class="contact">Postal Code:</label><input type="text" name="pcode" value="<?php if ($pcode){ echo $pcode;}?>"/><br />                          
<label class="contact">* Phone number:</label><input type="text" name="phone" value="<?php if ($phone){ echo $phone;}?>" /><br />                         
<label class="contact">* E-Mail Address:</label><input type="text" name="email" size="25" value="<?php if ($email){ echo $email;}?>"/><br />
<label class="contact">* Certificate Code:</label><input type="text" name="gcode" size="15" value="<?php if ($gcode){ echo $gcode;}?>"/><br />
<input type= "hidden" id="gcodedate" name="gcodedate" value="<?php echo( $gcode);?>">
                                               
<label class="contact">Your question or comments:</label>
<textarea rows="5" cols="45" name="message"><?php if (isset($message)){ echo $message;}?></textarea>    <br>       
<input type="hidden" name="contact_form_completed" value="1" />
<input type="hidden" name="interest" value="<?php if (isset($interest)){ echo $interest;}?>" />
<div id="ajax_loading"><img align="absmiddle" src="/img/spinner.gif" style="border:none; margin:0; padding:0;">&nbsp;Processing...</div>               
<div style="margin-top: 10px;" align="center"><input id="submit" class="inquirebttn" type="image" src="/img/transparent.gif" alt="Make Inquiry" title="Make Inquiry" name="submit" style="border:none;" />
</p>
</div>

</form>

In the sourced javascript page I am trying to grab a php variable and pass it into the JS page for processing. Here is how I try to grab the variable:


function getValue(form) {
var gcodeben = contact_form.gcodedate.value;
}
var exdategc = "";

//if statement to say that if gcode is one of the 5 then print expiry date.
if (gcodeben="lux")
  {
  exdategc="May 31, 2010";
  }
else if (gcodeben="trill")
  {
  exdategc="May 31 2010";
  }
else if (gcodeben="zine")
  {
  exdategc="April 30 2010";
  }
else if (gcodeben="spv")
  {
  exdategc="June 30 2010";
  }
else if (gcodeben="golf")
  {
  exdategc="May 31 2010";
  }
else
  {
  exdategc="(error: expiry date not available)";
  }


$('expire').set('html', '<div id="finished" style="text-align:left; font-size:14px; font-weight:normal;">This certificate expires on <span style="font-size:14px; font-weight:normal; color:#ff0000;">'+exdategc+'</span></div>');

How do I fix the Javascript in order to properly retrieve the correct variable?

2

PHP creates the page.
The page is sent to the web browser
The web browser loads the page
The JavaScript is run on the page.

The only way to “grab” a php variable is to have PHP explicitly write that variable to the page, for example:

echo 'var jsVariable = "' . $phpString . '";';
3

Thank you for the processing hint. So I have revamped my code, but unfortunately the output still does not function.

Here is a link to the landing page:
Link to PHP landing page

Here is the updated code in the form field:


<form id="contact_form" name="contact_form" method="post" action="/process_gcert_form.php">
<label class="contact">* Certificate Code:</label><input type="text" name="gcode" size="15" value="<?php if ($gcode){ echo $gcode; echo 'var gcodepms = "' . $gcode . '";';}?>"/>
</form>

Here is the updated JS code:


function finished()
{
$('status').set('html', '<div id="finished" style="text-align:left; font-size:14px; font-weight:normal;">Thank You. Please print this page. You will be contacted by an authorized<br /> Premier Medical Spa Clinic Coordinator via telephone withing 24hrs.</div>');
$('barcode').setStyle('display', 'block');
//take in gcode
var exdategc = "";

//if statement to say that if gcode is one of the 5 then print expiry date.
if (gcodepms=="lux")
  {
  exdategc="May 31, 2010";
  }
else if (gcodepms=="trill")
  {
  exdategc="May 31 2010";
  }
else if (gcodepms=="zine")
  {
  exdategc="May 31 2010";
  }
else if (gcodepms=="spv")
  {
  exdategc="June 30 2010";
  }
else if (gcodepms=="golf")
  {
  exdategc="May 31 2010";
  }
else if (gcodepms=="fedex")
  {
  exdategc="July 31 2010";
  }
else
  {
  exdategc="(error: expiry date not available)";
  }


$('expire').set('html', '<div id="finished" style="text-align:left; font-size:14px; font-weight:normal;">This certificate expires on <span style="font-size:14px; font-weight:normal; color:#ff0000;">'+exdategc+'</span></div>');
$('status2').set('html', '<div id="finished" style="text-align:left; font-size:12px; font-weight:normal;">One per client only. This certificate may be used towards any laser aesthetic service at Premier Medical Spa. May not be redeemed or exchanged for cash*</div>');
}

Any ideas why the last two divs are not showing? in the previous format they were showing, but not anymore. Everything up until the if statement is being output.

4

Ok So there is a correction to be made: I had to put the “echo ‘var gcodepms = "’ . $gcode . '”;'; on the php landing page which shows up in the uirl so basicaly the apge that keeps includign aall of the necessary fiels (aka the landing page). However, now all it does show output ont he screen that says:

var gcodepms = “”;