CODEWITHSUNDEEP
javascriptjqueryonchange
J.Kim
J.Kim

Reputation: 17

jQuery radio button Onchange is not working

If a user uploads a file, it will call createArray(data) function then display radio button. After that, if the user select a radio button it suppose to alert which button the user choose but onchange function is not working TT. I tried several different way but it doesn't work.

My radio button is in var string format and use .innerHTML.

function createArray(data) {
  if (data !== null && data !== "" && data.length > 1) {
    this.CSVdata = data;
    document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records!";
    var radioHtml = "<div style='padding: 15px; width:100; height: 300;'><br>";
    radioHtml += "<form id='mybutton'>"
    radioHtml += "<p><b>Please select one of the following choice, and run one of the graph in the View menu</b></p><br>"
    radioHtml += "<input type='radio' name='radiobut' id ='avgwages'/> AvgWages (Bar, Line) <br> "
    radioHtml += "<input type='radio' name='radiobut' id ='estpopulation'/> EstimatedPopulation (Bar, Line)<br>"
    radioHtml += " <input type='radio' name='radiobut' id ='state'/> State (Bar, Pie,Line) <br>";
    radioHtml += "</form>";
    radioHtml += "</div>";
    document.getElementById("dataselection").innerHTML = radioHtml;
  } else {
    document.getElementById("message").innerHTML = " Cannot upload File!";
  }
};

$("#mybutton").on('change', 'input[name=radiobut]:checked', function() {
  alert("change");
});

Both are inside of document.ready function.

Upvotes: 0

Views: 483

Answers (2)

Vishal modi
Vishal modi

Reputation: 1720

When you are adding elements dyanamically, you need to handle it's event globally like below.

$(document).on('change','#mybutton',function(){
        alert("change");
    });

if you are managing change event using id you do not need to pass other parameters in change event function.

try below solution.

$("#mybutton").on('change',function(){
        alert("change");
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="mybutton" />

Upvotes: 1

Hardik Masalawala
Hardik Masalawala

Reputation: 1076

Please check following snippet perfect solution exactly what you want:

(function() {
   $('input[type=radio][name=radiobut]').change(function() {
           alert("Changed: " + this.id);//selected radio ID
    });
})();


(function() {
   $('input[type=radio][name=radiobut]').change(function() {
		   alert("Changed: " + this.id);//selected radio ID
	});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='padding: 15px; width:100; height: 300;'><br>
<form id='mybutton'>
<p><b>Please select one of the following choice, and run one of the graph in the View menu</b></p><br>
<input type='radio' name='radiobut' id ='avgwages'/> AvgWages (Bar, Line) <br> 
<input type='radio' name='radiobut' id ='estpopulation'/> EstimatedPopulation (Bar, Line)<br>
<input type='radio' name='radiobut' id ='state'/> State (Bar, Pie,Line) <br>
</form>
</div>

Upvotes: 0

Related Questions