To get all Vehicle Details (New, Used, Future) using Jquery , Use the below code.
<!--Form Details to display year/make/model in dropdown -->
<form method="POST" action="one123.php">
<select id="ajYears" name="ajYears">
</select>
<select id="ajMakes" name="makes" disabled="disabled">
<option>Select Make</option>
</select>
<select id="ajModels" name="models" disabled="disabled">
<option>Select Model</option>
</select>
<select id="ajStyles" name="styles" disabled="disabled">
<option>Select Trim</option>
</select>
<input type="submit" value="submit">
</form>
<!--Script to fetch details from API-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery.noConflict();
</script>
<!-- js code -->
<script>
<script>
var protoCall = "https://";
var host = "api.edmunds.com";
// Make sure to change the API KEY
var apiKey = "v4hq7w7nac87ehk9exfvasu5";
var fmt = "json";
var standardParams = "&fmt=" + fmt + "&api_key=" + apiKey + "&callback=?";
var $yearSelect = jQuery('#ajYears');
var $makeSelect = jQuery('#ajMakes');
var $modelSelect = jQuery('#ajModels');
var $styleSelect = jQuery('#ajStyles');
// lets bind some events on document.ready.
jQuery(function(){
$yearSelect.on('change', function() { getMakeModelsByYear()});
$makeSelect.on('change', function() { enableModelDropdown() });
$modelSelect.on('change', function() { getStyles(); });
$styleSelect.on('change', function() { jQuery('.veh_submit').removeAttr("disabled"); });
// lets build the year drop down.
ajEdmundsBuildYear();
});
// Method to build the year drop down.
function ajEdmundsBuildYear()
{
var baseYear = 1990,
endYear = new Date().getFullYear();
$yearSelect.empty();
$yearSelect.append('<option value="-1">Select Year</option>');
for(var yyyy=baseYear; yyyy<=endYear; yyyy++)
{
$yearSelect.append('<option value="' + yyyy + '">' + yyyy +'</option>');
}
}
// get the makes and modals for a year in one go, but we don't display modals here...
function getMakeModelsByYear()
{
$makeSelect.empty();
$modelSelect.empty();
$styleSelect.empty();
$makeSelect.append('<option value="-1">Select Make</option>');
$modelSelect.append('<option value="-1">Select Modal</option>');
$styleSelect.append('<option value="-1">Select Style</option>');
$makeSelect.attr('disabled','disabled');
$modelSelect.attr('disabled','disabled');
$styleSelect.attr('disabled','disabled');
var year = $yearSelect.val(),
endPoint = "/api/vehicle/v2/makes",
view = "basic",
options = "year=" + year + "&view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
// clear the make drop down... re add the first option... remove dsiabled attr.
$makeSelect.empty();
$makeSelect.append('<option value="-1">Select Make</option>');
$makeSelect.removeAttr('disabled');
// loop the makes... each make contains model... add the make in make drop down.
jQuery.each(data.makes, function(i, val) {
make = data.makes[i];
$makeSelect.append('<option value="' + make.niceName + '">' + make.name + '</option>');
});
});
}
// since we already grabed the models...
// now just matter of showing only the matching models for a make.
function enableModelDropdown()
{
// clear the Style down... re add the first option... add dsiabled attr.
$styleSelect.empty();
$styleSelect.append('<option value="-1">Select Style</option>');
$styleSelect.attr('disabled','disabled');
var make1 = $makeSelect.val();
var year = $yearSelect.val(),
endPoint = "/api/vehicle/v2/makes",
view = "basic",
options = "year=" + year + "&view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
//let's empty our modal
$modelSelect.empty();
// loop the makes... each make contains model... add the modal in modal drop down.
//re add the first option
$modelSelect.append('<option value="-1">Select Model</option>');
jQuery.each(data.makes, function(i, val) {
make = data.makes[i];
// loop the makes... each make contains model... add the modal in modal drop down but it depends on make value we select previously
jQuery.each(make.models, function(x, val){
model = make.models[x];
if(make1 == make.niceName){ // here is the logic
$modelSelect.append('<option make="' + make.niceName +'" value="' + model.niceName + '">' + model.name + '</option>');
}
});
});
});
$modelSelect.removeAttr('disabled');
}
// grab the styles... pretty much same as
// getMakeModelsByYear()
function getStyles()
{
var year = $yearSelect.val(),
make = $makeSelect.val(),
model = $modelSelect.val(),
endPoint = "/api/vehicle/v2/" + make + "/" + model + "/" + year + "/styles",
view = "basic",
options = "view=" + view + standardParams,
postURL = protoCall + host + endPoint + "?" + options;
jQuery.getJSON(postURL,
function(data) {
$styleSelect.empty();
$styleSelect.removeAttr('disabled');
$styleSelect.append('<option value="-1">Select Style</option>');
jQuery.each(data.styles, function(i, val) {
style = data.styles[i];
$styleSelect.append("<option value='" + style.id + "'>" + style.name + "</option>");
});
});
}
</script>
==========================================================
Hello Mates here is the second step
<?php
if(isset($_POST['submit'])) {
$to = 'youremial@gmail.com'; // Change this to your email
$subject = ''.$_POST['m_phone'].'';
$subject_sucess = "Edmunds Vehicle API with Jquery - Output";
$ajYears = $_POST['ajYears'];
$ajMakes = $_POST['ajMakes'];
$ajModels = $_POST['ajModels'];
$ajStyles = $_POST['ajStyles'];
$mycar = $_POST['mycar'];
$approx_milage = $_POST['approx_milage'];
$email = $_POST['email'];
$h_phone = $_POST['h_phone'];
$m_phone = $_POST['m_phone'];
$fname = $_POST['fname'];
$l_name = $_POST['l_name'];
$add1 = $_POST['add1'];
$add2 = $_POST['add2'];
$city = $_POST['city'];
$r_state = $_POST['r_state'];
$zip = $_POST['zip'];
$loanamont = $_POST['loanamont'];
$from = ''.$fname.'<'.$email.'>';
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers .= 'From: '.$fname.' <youremial@yourwebistename.com>'. "\r\n"; // Change this to your website email
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
// To send HTML mail, the Content-type header must be set
$headers_success = 'MIME-Version: 1.0' . "\r\n";
$headers_success .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers_success .= 'From: Edmunds Vehicle API <youremial@yourwebistename.com>'. "\r\n"; // Change this to your website email
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Compose a simple HTML email message
$message = '<b>Year:</b> '.$ajYears.'<br>
<b>Make:</b> '.$ajMakes.'<br>
<b>Model:</b> '.$ajModels.'<br>
<b>Style:</b> '.$ajStyles.'<br>
<b>My car does not appear:</b> '.$mycar.'<br>
<b>Approx. Mileage:</b> '.$approx_milage.'<br>
<b>Email:</b> '.$email.'<br>
<b>Home Phone:</b> '.$h_phone.'<br>
<b>Mobile Phone:</b> '.$m_phone.'<br>
<b>First Name:</b> '.$fname.'<br>
<b>Last Name:</b> '.$l_name.'<br>
<b>Address Line 1:</b> '.$add1.'<br>
<b>Address Line 2:</b> '.$add2.'<br>
<b>City:</b> '.$city.'<br>
<b>Residence State:</b> '.$r_state.'<br>
<b>Zip Code:</b> '.$zip.'<br>
<b>Loan Amount Requested:</b> '.$loanamont.'';
$message_sucess='Thank you for filling out, We will be happy to assist you.';
// Sending email
if(mail($to, $subject, $message, $headers)){ mail($email, $subject_sucess, $message_sucess, $headers_success); ?>
<script>window.location.assign("http://www.yourwebistename.com");</script>
<?php }
else {echo "mail not sent";}
}
?>
==========================================================
If no email functionality is required you can use this Code.
1. Update your HTML with the below
<!--Form Details to display year/make/model in dropdown -->
<select id="ajYears" name="ajYears">
</select>
<select id="ajMakes" name="makes" disabled="disabled">
<option>Select Make</option>
</select>
<select id="ajModels" name="models" disabled="disabled">
<option>Select Model</option>
</select>
<select id="ajStyles" name="styles" disabled="disabled">
<option>Select Style</option>
</select>
<input type="submit" value="Submit" class="veh_submit">
<!-- output Table -->
<table width="735" border="0" class="output" cellpadding="0" cellspacing="0" style="display:none;">
<tr>
<td colspan="2" style="text-align:center"><strong>Vehicle Information</strong></td>
</tr>
<tr>
<td><strong>Year</strong></td>
<td class="year">Empty</td>
</tr>
<tr>
<td><strong>Make</strong></td>
<td class="make">Empty</td>
</tr>
<tr>
<td><strong>Modal</strong></td>
<td class="modal">Empty</td>
</tr>
<tr>
<td><strong>Style</strong></td>
<td class="style">Empty</td>
</tr>
</table>
</div>
2. Add this script after </body> tab
<script>
// just to display the output
jQuery('.veh_submit').on("click",(function(){
var ajYears = jQuery("#ajYears").val();
var ajMakes = jQuery("#ajMakes").val();
var ajModels = jQuery("#ajModels").val();
var ajStyles = jQuery("#ajStyles option:selected").text();
//Basic Validation
if(ajYears =='' || ajYears==-1)
{
alert("Please Select a Year");
exit;
}
else if(ajMakes =='' || ajMakes==-1)
{
alert("Please Select a Make");
exit;
}
else if(ajModels =='' || ajModels==-1)
{
alert("Please Select a Model");
exit;
}
else if(ajStyles =='' || ajStyles=="Select Style")
{
alert("Please Select a Style");
exit;
}
jQuery('.output').show();
jQuery('.year').html(ajYears);
jQuery('.make').html(ajMakes);
jQuery('.modal').html(ajModels);
jQuery('.style').html(ajStyles);
}));
</script>
Get Hosting and Domains for Best prices at http://webservices.redtreetechnology.com/
Reference url:
http://developer.edmunds.com/faq.html
