JSFiddle - React, Tailwind, and code Playground
HTML
<label>Year:<select id="year"></select></label>
<br />
<label>Car Make:<select id="carmake"></select></label>
<br />
<label>Model:<select id="model"></select></label>
<br />
<label>Sub Model:<select id="submodel"></select></label>
<form>
<div class="hidden">
<h2>TOM FORM:</h2>
<br />
<label>Year<input type="text" id="txtYear" name='txtYear' /></label>
<label>Car Make<input type="text" id="txtCarMake" name='txtCarMake' /></label>
<label>Model<input type="text" id="txtModel" name='txtModel'/></label>
<label>Sub Model<input type="text" id="txtSubModel" name='txtSubModel'/></label>
</div>
<input type="submit" value="Next" id='submit' />
</form>
CSS
.hidden {
display: none;
}
JavaScript
$(function() {
fillYears();
$('form').submit(function() {
alert($(this).serialize());
return false;
});
});
function fillYears() {
var years = [];
for(var i = 2013; i <= 2015; i++) {
years.push(i);
}
fillSelect($('#year'), years, function(year) { populateCarMake(year); });
}
function fillSelect(select, values, onChange) {
select.find('option').remove();
select.unbind('change');
$.each(values, function() {
var opt = $('<option />').val(this).text(this);
select.append(opt);
});
if(onChange) {
select.change(function()
{
onChange($(this).val());
});
select.trigger('change');
}
return select;
}
function populateCarMake(year) {
$.getJSON('//api.datalot.com/auto?source_id=7331&key=jcvqdypx4x&year=' + year + '&jsoncallback=?',
function(data) {
fillSelect($('#carmake'), data, function(carMake) { populateModel(year, carMake); });
});
}
function populateModel(year, carMake) {
$.getJSON('//api.datalot.com/auto?source_id=7331&key=jcvqdypx4x&year=' + year +
'&make=' + carMake + '&jsoncallback=?',
function(data) {
fillSelect($('#model'), data, function(model) { populateSubmodel(year, carMake, model); });
});
}
function populateSubmodel(year, carMake, model) {
$.getJSON('//api.datalot.com/auto?source_id=7331&key=jcvqdypx4x&year=' + year +
'&make=' + carMake + '&model=' + model + '&jsoncallback=?',
function(data) {
fillSelect($('#submodel'), data, function() { updateHiddenFields(); });
});
}
function updateHiddenFields() {
$('#txtYear').val($('#year').val());
$('#txtCarMake').val($('#carmake').val());
$('#txtModel').val($('#model').val());
...