How to fill in Wordpress theme’s own form data using jQuery

Question

I’m using a theme that has its own form structure. I need to make this one formulário access data from API of table fipe and fill in the make and model field of the car:

I tried to insert a <option> within the <select> of the mark, using that code:

    $(document).ready(function(){
        var selectbox=$("#avia_4_1");
        selectbox.append($('<option>').text("test").val("test"));
    });

But it does not work and the following error occurs:

Uncaught Syntaxerror: Unexpected token ILLEGAL

This code is added via a code block of the theme’s visual editor. I need to fill out the form but I can’t find a way to make it work.

Answer 1

You can mount the string with all the <option> and then make the append, leaving your code like this:

$(document).ready(function(){
    var selectbox = $("#avia_4_1");

    $.get(
        'https://fipe-parallelum.rhcloud.com/api/v1/carros/marcas',
        function(api_array) {
            var options = '';
            $.each(api_array, function(i, obj) {
                options += '<option value="'+obj.codigo+'">'+obj.nome+'</option>';
            });
            selectbox.append(options);
        },
        "json"
    );
});

I made a fiddle to test: https://jsfiddle.net/felipe_elia/upnqv4q8/

Answer 2

$(document).ready(function(){
    var urlBase = "http://fipeapi.appspot.com/api/1/";
    $("#marcas").hide();
    $("#veiculos").hide();
    $("#ano").hide();
    $("#tipo").change(function(){
        $("#marcas").hide();
        $("#veiculos").hide();
        $("#ano").hide();
        $.getJSON(urlBase + $("#tipo").val() + "/marcas" + ".json", function( data ){
            var items = ["<option value=\"\">ESCOLHA UMA MARCA</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#marcas").show();
            $("#marcas").html(items);
        });
    });
    $("#marcas").change(function(){
        $("#veiculos").hide();
        $("#ano").hide();
        $.getJSON(urlBase + $("#tipo").val() + "/veiculos/" + $(this).val() + ".json", function( data ){
            var items = ["<option value=\"\">ESCOLHA UM VEICULO</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#veiculos").show();
            $("#veiculos").html(items);
        });
    });
    $("#veiculos").change(function(){
        $("#ano").hide();
        $.getJSON(urlBase  + $("#tipo").val() + "/veiculo/" + $("#marcas").val() + "/" + $(this).val() + ".json", function( data){
            var items = ["<option value=\"\">ESCOLHA O ANO</option>"];
            $.each(data, function (key, val) {
                items += ("<option value='" + val.id + "'>" + val.name + "</option>" );
            });
            $("#ano").show();
            $("#ano").html(items);
        });
    });
    $(this).change(function(){
        $("#selecao").html("Marca: " + $("#marcas option:selected").text() + " Veiculo: " + $("#veiculos option:selected").text() + " Ano: " + $("#ano option:selected").text())
    });           
});

I made this code based on your previous code, but as I noticed the link is out of the air I used this http://fipeapi.appspot.com/ Only that different from its code, already inserted the choice of cars, motorcycles and trucks so not having the need to create one for each type.

I hope you can help, because your code has helped me a lot to reach this conclusion.

Are also inserted .hide and .show as I select the select field, I’m still starting with jQuery, I don’t have many skills, but stay there in case you need.

Answer 3

The problem with running jQuery was happening by running the code only in the mode of viewing wordpress changes, which was generating some conflict.

The code I created to feed the form was this:

jQuery(document).ready(function(){
var urlBase = "https://fipe-parallelum.rhcloud.com/api/v1/carros/";

//Carrega as marcas
jQuery.getJSON( urlBase + "marcas", function( data ) {
    var htmlOptions = "<option value=\"\">Selecione</option>";
    jQuery.each( data, function( key, val ) {
        htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
    });

    jQuery("#avia_4_1").html(htmlOptions);
});

jQuery("#avia_4_1").change(function(){
    jQuery.getJSON( urlBase + "marcas/" + jQuery(this).val() + "/modelos", function( data ) {
        var htmlOptions = "";
        jQuery.each( data.modelos, function( key, val) {
            htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
        });

        jQuery("#avia_5_1").html(htmlOptions);
    });
});

jQuery("#avia_5_1").change(function(){
    jQuery.getJSON( urlBase + "marcas/" + jQuery("#avia_4_1").val() + "/modelos/" + jQuery(this).val() + "/anos", function( data ) {
        var htmlOptions = "";
        jQuery.each( data, function(  key, val ) {
            htmlOptions += "<option value=\"" + val.codigo + "\">" + val.nome + "</option>";
        });

        jQuery("#avia_6_1").html(htmlOptions);
    });             
});});

So I was able to solve the problem to integrate this data with a form of the theme Enfold.