When selecting an option from the dropdown selection box created via d3.js the value sent to the button becomes undefined

user_11462274 0
Viewed 197

This code below is perfectly suited for testing, I just used it in Visual Studio Code (https://code.visualstudio.com/) and created the page from the Live Server extension (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer):

<html>
    <head>
        </style>
        <script src="https://d3js.org/d3.v4.js"></script>
    </head>
    <body style="background-color:black;">
        <div class="row">
            <div class="column left">
                <form action="" method="post" id="formulario-radar-1">
                    <div id="caixa-suspensa-1">
                        <button class="button" id="botao-do-radar-1" onclick="funcao_radar_1()">Radar 1</button>
                        <input type="text" id="barra-de-texto-para-radar-1" style="width: 283px;">
                    </div>
                </form>
                <iframe id="iframe-do-radar-1" width="100%" height="282" frameBorder="0" src="">
                </iframe>
                <script id="script-da-caixa-de-selecao-suspensa-1">
                    var select_1 = d3.select("#caixa-suspensa-1")
                    .append("select")
                    .attr("id","select-box-1")
                    .style("width","100%");
                    
                    function caixa_suspensa_1(data) {
                    select_1
                        .on("change", function(d) {
                        var value_1 = d3.select(this).property("value");
                        document.querySelector('#barra-de-texto-para-radar-1').value = value_1;
                        var value_1_2 = d3.select(this).property("market");
                        document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;
                        });
                    let update_1 = select_1.selectAll("option")
                        .data(data);
                    update_1.exit().remove();
                    update_1.enter().append("option").merge(update_1)
                        .attr("value", d => d.value)
                        .attr("market", d => d.market)
                        .text(d => d.label);
                    }
                    d3.csv("Lista_de_Jogos.csv", function(data){caixa_suspensa_1(data)});
                </script>
                <form id="botao-de-jogo-betfair-1" action="" target="_blank">
                    <input type="submit" style="width: 100%;" value="Jogo Betfair 1"/>
                </form>
            </div>
        </div>
    </body>
</html>

The path that generates the action="undefined" value is this:

var value_1_2 = d3.select(this).property("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;

CSV file "Lista_de_Jogos.csv" is:

label,value,market
,,
hotel,bus,party
house,car,work

The selection box perfectly shows both attributes:

<option value="car" market="work">house</option>

But when I select this <option> house, instead of action of #botao-de-jogo-betfair-1 keep the value work he gets the value undefined:

<form id="botao-de-jogo-betfair-1" action="undefined" target="_blank">
                    <input type="submit" style="width: 100%;" value="Jogo Betfair 1">
                </form>

Note: when I try to use .property("value"); returns the value carperfectly.

d3.js html-select html javascript
2 Answers

You are accessing market attribute from select tag instead of selected option tag which contains the market attribute. to solve this you just need to get the option which has been selected and then get the value using attr.

var value_1_2 = d3.select(this.options[this.selectedIndex]).attr("market");
document.querySelector('#botao-de-jogo-betfair-1').action = value_1_2;

Another improvement that you can make is instead of searching for the from we can give the form name and use that to access form from documemt

<form name="myform" action="" method="post" id="formulario-radar-1">
    ...
</form>

then in javascript

var value_1_2 = d3.select(this.options[this.selectedIndex]).attr("market");
document.forms["myform"].action = value_1_2;
user_144758520

Why not stick with D3 here:

var value_1_2 = d3.select(this).property("market");
d3.select('#botao-de-jogo-betfair-1').attr('action', value_1_2);

I don't think there's any action property in Element.

user_92165120
Related