Search code examples
javascriptphpradiobuttonlist

Show Div on Dynamically Created RadioButton Selection (PHP-AJAX)


I have created radio button is created on client side and when I click it, it should show my existing div i.e. ifPrint

Please have a look at code I am trying:

radio button creation:

var optiondiv = document.getElementById('option-div');

document.getElementById('create').onclick = function () {

newopt = document.getElementById('new-option').value;
if(newopt){
    var input = document.createElement('input'),
    label = document.createElement('label');
    input.type = "radio";
    input.setAttribute("value", newopt);
    input.setAttribute("checked", true);
    input.setAttribute("name", "radio-name");
    label.appendChild(input);
    label.innerHTML += newopt+'<br>'; 
    optiondiv.appendChild(label);
    document.getElementById('new-option').value = '';

    $.post(
        "equipments1.php", 
        { 
            "newopt": newopt  
        }, 
        function(data) {
            if(data.success){
                alert('Successful Added To dB');
                document.getElementById('newopt').checked = false;

            //  if (document.getElementById('newopt').checked) {
//document.getElementById('ifPrint').style.display = 'block';
        //$(#ifPrint).show();
                //$(#ifPrint).show();
            }else{
                alert('Not Add To DB');

            }

    });

}else{
    alert('Please Enter Radio Button Value.');
    return false;
}



};

New function for showing Div ifPrint:

$('input[type=radio][name=newopt]').change(function() {
$(#ifPrint).show();

});

Please guide if possible


Solution

  • You need to use click instead of change, and also you missing quotes in your code, and it's better to use "on" than "click" function if element is created after dinamicaly

    $('body').on('click','input[type=radio][name=newopt]',function () {
        $('#ifPrint').show();
    });