在onClick事件之前设置输入值

Question

I have a Group of Radio button with different values, I'm trying to call a function based on the value of the input.

HTML:

<form class="form">
 <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
   <label class="btn btn-info"  onclick="getChart()">
     <input name="chart" value="" type="radio">All
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="total" type="radio">Total
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="max" type="radio">Max
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="mean" type="radio">Mean
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="min" type="radio">Min
   </label>
   <label class="btn btn-info" onclick="getChart()">
     <input name="chart" value="extrapolation" type="radio">Extrapolation
   </label>
 </div>
</form>

JS:

function getChart() {
    var startDate = $('#range').val().slice(0, 10) + 'T' + $('#range').val().slice(11, 16) + ':00+00:00';
    var endDate = $('#range').val().slice(19, 29) + 'T' + $('#range').val().slice(30, 38) + ':00+00:00';
    var appName = $('select[name=applicationSelect]').val();
    var envName = $('input[name=env]:checked').val();
    var chartType = $('input[name=chart]:checked').val();
    // Load chart
    ajaxLoadChart(startDate, endDate, appName, envName, chartType);
};

// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate, appName, envName, chartType) {
    // If no data is passed (the chart was cleared)
    if (!startDate || !endDate) {
        return;
    }
    // Otherwise, issue an AJAX request
    $.ajax({
        url: 'http://MyServlet.com',
        crossDomain: true,
        async: true,
        type: "GET",
        dataType: "json",
        data: {
            start: startDate,
            end: endDate,
            env: envName,
            app: appName,
            type: chartType
        },
        success: function (data) {
            defaultChart(data);
        }
        error: function(xhr, status, error) {
        alert(status + " " + error);
        console.log(xhr);
        }
    });
}

The problem is value of the selected input is set after the function has been called so the previous selected value is fetched in the Ajax request.

I'm new to JS, can I fix this without massive changes to my code?

Answer 1

set the parameter to the function

function getChart(param){
alert(param);
}

and then give it to the event,

<label class="btn btn-info" onclick="getChart(20)">
  <input name="chart" value="mean" type="radio">Mean
</label>
<label class="btn btn-info" onclick="getChart(25)">
  <input name="chart" value="mean" type="radio">Mean
</label>

It can be String value too, just give quote on the event

<label class="btn btn-info" onclick="getChart('mean')">
  <input name="chart" value="mean" type="radio">Mean
</label>

It will show the value of getChart into an alert. Sorry for bad english, I'm Erwin from Indonesia, hope this will help you :D

Answer 2

This is because you have onClick handler on the label, and not the input field.

Also it might be easier to extract values from input fields once any of them change using jQuery ala $('[type=input]').change(function(){ // extract all field values and call Ajax to retrieve new chart });

Answer 3

Without significant changes to the existing code, you should simply let the event propagate before calling your getChart . Change the function name of getChart to getChart_ and create a new function like so: function getChart() { setTimeout(getChart_, 0); } function getChart() { setTimeout(getChart_, 0); } .

What we're doing here is scheduling the original getChart call to happen after the event handler has been executed (and state of the input updated).

Answer 4

As you have the code now, the function getChart will be executed twice on every click, because the event is fired for both the input element and the label element. Which is the checked radio button at the time of these events is different for these two cases.

But you'd anyway want to avoid a double call, as you'll want to do your Ajax calls only when necessary.

I would advise to make these changes:

• First remove the onclick attributes from all input tags;
• Wrap the getChart function inside $('[name=chart]').change(...) . This makes it the change event handler for all these chart input s in one go.

Here is the result (testable):

 $('[name=chart]').change(function getChart() { var chartType = $('input[name=chart]:checked').val(); // just for testing: alert('Choice = ' + chartType); // rest of your getChart function follows here... }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form"> <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect"> <label class="btn btn-info"> <input name="chart" value="" type="radio">All </label> <label class="btn btn-info"> <input name="chart" value="total" type="radio">Total </label> <label class="btn btn-info"> <input name="chart" value="max" type="radio">Max </label> <label class="btn btn-info"> <input name="chart" value="mean" type="radio">Mean </label> <label class="btn btn-info"> <input name="chart" value="min" type="radio">Min </label> <label class="btn btn-info"> <input name="chart" value="extrapolation" type="radio">Extrapolation </label> </div> </form> 

I kept the name of the function getChart , but the function can be anonymous as it is being used here.