Echoing PHP Array into Javascript File/FancyZoom Popup - php

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"> </TD>\
</TR>\
<TR>\
<TH>Surname *</TH>\
<TD><INPUT id="surname" size="50" name="surname" AUTOCOMPLETE="OFF"></TD>\
<TD> </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> </TD>\
</TR>\
<TR>\
<TH>Loan Amount *</TH>\
<TD><INPUT id="amt" size="50" name="amt"></TD>\
<TD> </TD>\
</TR>\
<TR>\
<TH></TH>\
<TD><INPUT value="Submit" type="submit" name="finance"></TD>\
<TD> </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....?

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.

Related

How to dropdown selected after data fetched

I want make option selected in dropdown html form, i am fetching data from database but into the html select cant get how to option selected
Below is the My database table data get. from that account holder is the my database value. I want to compare with select option nd make then selected into dropdown.
Array
(
[ipsf_public_pf_id] => 62
[ipsf_main_id] => 216
[account_no] => 54545455
[account_holder] => self
[pf_amt] => 1500.00
[date_of_payment] => 2020-11-15
)
and my html php form like this
$str .='<input type="hidden" name="ipsf_public_pf_id" value="<?php echo $ipsf_public_pf; ?>">
<table align="center" cellspacing="1" class="table table-bordered">
<tbody>
<tr>
<td>PPF A/c No</td>
<td>Account Holder</td>
<td>Date of Payment</td>
<td>Amount</td>
</tr>
<tr>
<td>
<input name="account_no_'.$ppf.'" type="text" id="account_no_'.$ppf.'" value="'.$account_no.'" size="20" maxlength="20" class="form-control" onkeyup="Validate_number(this)"/>
</td>
<td>
<select name="account_holder_'.$ppf.'" id="account_holder_'.$ppf.'" class="form-control">
<option value="" selected>Account Holder</option>
<option value="self">Self</option>
<option value="spouse">Spouse</option>
<option value="children">Children</option>
<!--<option value="others">Others</option>-->
</select>
</td>
<td>
<input name="date_of_payment_date_'.$ppf.'" id="date_of_payment_date_'.$ppf.'" maxlength="2" style="width: 50px;" type="text" onClick="this.value="";" value="'.$date.'" class="form-control-date" onkeyup="Validate_number(this)"/>-<input name="date_of_payment_month_'.$ppf.'" id="date_of_payment_month_'.$ppf.'" maxlength="2" style="width: 50px;" type="text" onClick="this.value="";" value="'.$month.'" class="form-control-date" onkeyup="Validate_number(this)"/>-<input name="date_of_payment_year_'.$ppf.'" id="date_of_payment_year_'.$ppf.'" maxlength="4" style="width: 65px;" type="text" onClick="this.value="";" value="'.$year.'" class="form-control-date" onkeyup="Validate_number(this)"/>
</td>
<td>
<input name="ppf_amt_'.$ppf.'" type="text" id="ppf_amt_'.$ppf.'" value="'.$pf_amt.'" size="10" onBlur="javascript:increment_ppf_amnt(this.value, '.$ppf.');" maxlength="14" class="form-control-date" onkeyup="Validate_number(this)"/>
<input type="hidden" name="prev_ppf_amount_'.$ppf.'" id="prev_ppf_amount_'.$ppf.'" value="'.$ppf.'"/>
<input type="hidden" name="is_added_0" id="is_added_0" value="no"/>
</td>
</tr>
</tbody>
<input type="hidden" name="total_ppf_amount" id="total_ppf_amount" value="0"/>
</table>';
I am confused how to selected that option inside .
Anyone know then please help me
On your html just fill the selected="<?=$selectedOption;?>.
Basically the logic behind it is: you fetch the data that you want to, and the values thaty ou on option tags you will gonna use the selected id / value or whatever that you want to use for in the selected atrribute on the <select></<select> html tag.

Autocomplete attribute in html form not working

I want to have an update option in my html form in which user enters First_name then all the fields should be autofilled with corresponding values in mysql table.
I tried to use autocomplete attribute in few fields and it is not working.Please check the code and let me know if there is any error.Or any other way to implement the requirement.
<form method="post" action="demo1.php" autocomplete="on">
<link rel="stylesheet" href="contact_css.css">
<!--Create a table -->
<table>
<tr><td><b>Contact Information</b></td>
</tr>
<tr>
<div class="leftside">
<td>ContactID</td>
<td><input type="text" name="ContactID" autocomplete="ContactID"></td>
</div>
<div class="rightside">
<td>ContactOwner</td>
<!-- <td><input type="text" name="ContactOwner"></td>-->
<td><select name="ContactOwner">
<option value="None">None</option>
<option value="Malik">Malik</option>
<option value="Manish">Manish</option>
<option value="Ankit">Ankit</option>
<option value="Vikrant">Vikrant</option>
</select></td>
</div>
<tr>
<div class="rightside">
<td>LeadSource</td>
<td><select name="LeadSource">
<option value="None">None</option>
<option value="Advertisement">Advertisement</option>
<option value="ColdCall">ColdCall</option>
<option value="EmployeeReferral">EmployeeReferral</option>
<option value="ExternalReferral">ExternalReferral</option>
<option value="OnlineStore">OnlineStore</option>
<option value="Partner">Partner</option>
<option value="Web">Web</option>
<option value="TradeShow">TradeShow</option>
</select></td>
<!--<td><input type="text" name="LeadSource"></td>-->
</div>
<div class="leftside">
<td><label for="First_name">First_name</td>
<td><input type="text" id="First_name" name="First_name" autocomplete="First_name"></td>
</div>
</tr>
<tr>
<div class="rightside">
<td>Middle_name</td>
<td><input type="text" name="Middle_name" autocomplete="Middle_name"></td>
</div>
<td>Last_name</td>
<td><input type="text" name="Last_name" autocomplete="Last_name"></td>
</tr>
<tr>
<td>AccountName</td>
<td><input type="text" name="AccountName"></td>
<td>EmailID</td>
<td><input type="text" name="EmailID"></td>
</tr>
<tr>
<td>Department</td>
<td><input type="text" name="Department"></td>
<td>Phone</td>
<td><input type="text" name="Phone"></td>
</tr>
<tr>
<td>Mobile</td>
<td><input type="number" name="Mobile"></td>
<td>Fax</td>
<td><input type="number" name="Fax"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="DOB"></td>
<td>Assistant</td>
<td><input type="text" name="Assistant"></td>
</tr>
<tr>
<td>AsstPhone</td>
<td><input type="number" name="AsstPhone"></td>
<td>ReportsTo</td>
<td><input type="text" name="ReportsTo"></td>
</tr>
<tr>
<td>LinkedIn</td>
<td><input type="text" name="LinkedIn"></td>
<td>CallStatus</td>
<td><select name="CallStatus">
<option value="None">None</option>
<option value="AnsweringMachine">AnsweringMachine</option>
<option value="Callback">Callback</option>
<option value="NotInterested">NotInterested</option>
<option value="Prospect">Prospect</option>
<option value="WrongContact">WrongContact</option>
<option value="PerformedInternally">PerformedInternally</option>
<option value="LessThan30Employee">LessThan30Employee</option>
</select></td>
</tr>
</table>
<!-- Second table-->
<table>
<tr><td><b>Address Information</b></td>
</tr>
<tr>
<div class="leftside">
<td>Street</td>
<td><input type="text" name="Street"></td>
</div>
<div class="rightside">
<td>OtherStreet</td>
<td><input type="text" name="OtherStreet"></td>
</div>
</tr>
<tr>
<div class="leftside">
<td>City</td>
<td><input type="text" name="City"></td>
</div>
<div class="rightside">
<td>State</td>
<td><input type="text" name="State"></td>
</div>
</tr>
<tr>
<td>Zip</td>
<td><input type="text" name="Zip"></td>
<td>Country</td>
<td><input type="text" name="Country"></td>
</tr>
</table>
<!--Third table-->
<table>
<tr><td><b>Description Information</b></td>
</tr>
<tr>
<td>Description</td>
<td><input type="text" name="Description" class="Description"></td>
</table>
<button type="button">Cancel</button>
<!-- <button type="submit">Save and New</button>-->
<button type="submit">Save</button>
</form>
</body>
This is not how autocomplete attribute is working.
Definition and Usage
The autocomplete attribute specifies whether or not an input field
should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user
starts to type in a field, the browser should display options to fill
in the field, based on earlier typed values.
Note: The autocomplete attribute works with the following
types: text, search, url, tel, email, password, datepickers, range,
and color.
SYNTAX
<input autocomplete="on|off">
This attribute can have only value on or off
Refer to w3schools docs for more details
If you want to have a default value in those fields you can set it inside value attribute or design your database with DEFAULT values.
So you can change <input type="text" name="ContactID" autocomplete="ContactID"> to <input type="text" name="ContactID" value="ContactID">

Echo data in same form after submitting

I have a simple html form, which is included in a Spry Tabbed Panel.
So, i would like to know, is it possible to submit that form, and only that form in the Panel, and then echo the submitted data back in the correct fields.
The echo part is not a problem doing it on a different page, or redirect after submitting, but my issue comes in with the other forms that should/can not be cleared if this one is submitted.
A hint in the right direction would be greatly appreciated!
Thank you in advance.
see code below:
(i know that the form action should not direct to a different file, but that is just how I've been using it until now...)
<form action="caller_upd.php" method="post" name="contact" >
<table width="200" border="0">
<?php
$_SESSION['uid'] = $uid;
?>
<tr>
<td width="68">Title</td>
<td width="4">:</td>
<td width="144"><select name="title" id="title">
<option selected="selected" disabled="disabled"</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select></td>
<td width="6"> </td>
<td width="53">Number</td>
<td width="3">:</td>
<td width="301"><input style="color:rgb(255,0,0);" autofocus="autofocus" type="text" name="contactnr" id="contactnr" /></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="fname" id="fname" /></td>
<td> </td>
<td>Surname</td>
<td>:</td>
<td><input type="text" name="sname" id="sname" /></td>
</tr>
<tr>
<td>Nature of Call</td>
<td>:</td>
<td><select name="type" id="type">
<option disabled="disabled" selected="selected"></option>
<option value="Domestic">Domestic</option>
<option value="MVA">MVA</option>
<option value="Assult">Assult</option>
<option value="Padestrian">Padestrian</option>
<option value="Transfer">Transfer</option>
<option value="Private">Private</option>
</select></td>
<td> </td>
<td>Nr of Patients:</td>
<td>:</td>
<td><select name="nop" id="nop">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select></td>
</tr>
<tr>
<td>Location</td>
<td><label for="location"></label></td>
<td colspan="5"><input name="location" type="text" id="location" size="50" /> <?php if (!empty($location)){ ?>Show Map<?php } else { } ; ?></td>
</tr>
<tr>
<td>Comments:</td>
<td colspan="6"><textarea name="comment" id="comment" cols="70" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="7" class="form"><input type="submit" name="submit" id="submit" value="Update" /></td>
</tr>
</table>
</form>
Check if the post value exists, and if so either select the option or put the value in the input element...
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="contact" >
<table width="200" border="0">
<tr>
<td width="68">Title</td>
<td width="4">:</td>
<td width="144"><select name="title" id="title">
<option value="Mr" <?php if(isset($_POST['title']) && $_POST['title'] == "Mr") echo "selected"; ?>>Mr</option>
<option value="Ms" <?php if(isset($_POST['title']) && $_POST['title'] == "Ms") echo "selected"; ?>>Ms</option>
<option value="Dr" <?php if(isset($_POST['title']) && $_POST['title'] == "Dr") echo "selected"; ?>>Dr</option>
</select></td>
<td width="6"> </td>
<td width="53">Number</td>
<td width="3">:</td>
<td width="301"><input style="color:rgb(255,0,0);" autofocus="autofocus" type="text" name="contactnr" id="contactnr" value="<?php if(isset($_POST['contactnr'])) echo $_POST['contactnr']; ?>" /></td>
</tr>
<tr>
<td>Name</td>
<td>:</td>
<td><input type="text" name="fname" id="fname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" /></td>
<td> </td>
<td>Surname</td>
<td>:</td>
<td><input type="text" name="sname" id="sname" value="<?php if(isset($_POST['sname'])) echo $_POST['sname']; ?>" /></td>
</tr>
...
</table>
</form>

javascript change remaining dropdown values depending on first

My HTML table populates its rows dynamically. One of the table data is a dropdown with thesame options. What I want to do is when I change the value of the first, the remaining dropdowns on the other rows will have a selected value, thesame as what is recently selected.
If I change the selected value on the second row, the rest of the dropdowns will be like the second, without affecting the value of the first. Here are a few codes:
<table id="CheckDetails" width="60%">
<tr>
<th>Date</th>
<th>Category</th>
<th>Description</th>
<th>Amount</th>
</tr>
<tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
<option value="0">[-- Please Choose --]</option>
<option value="1">References</option>
<option value="2">Inspirational</option>
</select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
</tr>
<tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
<option value="0">[-- Please Choose --]</option>
<option value="1">References</option>
<option value="2">Inspirational</option>
</select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
</tr>
<tr class="row1">
<td><input name="date1" id="date1" class="" value="22-09-2013" /></td>
<td><select name="category" id="cat0" class="dropdown" >
<option value="0">[-- Please Choose --]</option>
<option value="1">References</option>
<option value="2">Inspirational</option>
</select>
</td>
<td><input type="text" class="entry" name="desc" id="desc0" value="1"/></td>
<td><input type="text" class="entry" name="amt" value="420.83333333333"/></td>
</tr>
I am working with php for this project. Any help is appreciated. Thanks!
Try
$('select[name="category"]').change(function(){
var $this = $(this), $nextAll = $this.closest('tr').nextAll('tr').find('select[name="category"]');
$nextAll.val($this.val())
});
Demo: Fiddle

Adding more field to PHP form (user can add more than one address)

My users can enter more than one address but I want an actual button that generates the extra fields as only one address is compulsory and empty fields will look ugly! I also need the extra addresses to go into mysql database.
How would I do with Javascript if PHP is not possible
Some code that may help:
<td width="732" valign="top"><p>
<h3 class="main">Address Details</h3>
<p class="normal"> You are able to add up to 3 addresses but only 1 is compulsory.
However it would be helpful if you could insert 3 addresses:
<ul>
<li>Permanent home address</li>
<li>Postal address (where you will be from June to September)</li>
<li>Local address (where you currently live)</li>
</ul>
<?php
if(!empty($err)) {
echo "<div class=\"msg\">";
foreach ($err as $e) {
echo "* $e <br>";
}
echo "</div>";
}
?>
<br>
<form action="address.php" method="post" name="regForm" id="regForm" >
<table width="95%" border="0" cellpadding="3" cellspacing="3" class="forms">
<tr>
<td>Street<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Street" type="text" id="Street" class="required" size="50">
</tr>
<tr>
<td>Line 2
</td>
<td><input name="Line2" type="text" id="Line2" class="required" size="50">
</tr>
<tr>
<td>Line 3
</td>
<td><input name="Line3" type="text" id="Line3" class="required" size="50">
</tr>
<tr>
<td>Town<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Town" type="text" id="Town" class="required" size="30">
</tr>
<tr>
<td>Postcode<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Postcode" type="text" id="Postcode" class="required" size="10">
</tr>
<tr>
<td>Country <font color="#CC0000">*</font></span></td>
<td><select name="Country" class="required" id="select8">
<option value="" selected></option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
(etc)
</select></td>
</tr>
<tr>
<td>Telephone Number<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Tele" type="text" id="Tele" class="required" >
</tr>
<tr>
<td>Fax<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Fax" type="text" id="Fax" class="required" >
</tr>
<tr>
<td>Mobile<span class="required"><font color="#CC0000">*</font></span>
</td>
<td><input name="Mobile" type="text" id="Mobile" class="required" >
</tr>
<tr>
<td>Type <font color="#CC0000">*</font></span></td>
<td><select name="Type" class="required" id="select8">
<option value="" selected></option>
<option value="H">Home</option>
<option value="P">Postal</option>
<option value="L">Local</option>
</table>
<p align="center">
<input name="doAddress" type="submit" id="doAddress" value="Submit">
to fix your parse error - put ; at the end of line $numrows = 0 + $_GET['numrows']
to generate more fields dynamically - use javascript, really, it's way better for this task than php

Categories