Edmunds Vehicle API with Jquery

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