Manage Radio Button

[PriteshP23]

It is not working AFTER refresh anymore:

// php
<div style="padding-left:280px;">
                            <!--  Add -->
                            <input type="button" class="btnAjouterConfigure" id="add" value="Ajouter" style="text-decoration:none; width:100px; height:41px; line-height:34px; font-weight:bold;" onclick="addnature()"/>    
                            &nbsp;
                            <!--  Delete -->
                            <input type="button" class="btnSupprimerConfigure" id="delete" value="Supprimer" style="text-decoration:none; width:100px; height:41px; line-height:34px; font-weight:bold;" onSubmit="return deleteRadioButton();">
                            <div id="fooBar"></div> 
                        </div>
                        <br />
                        <div style="height:auto; padding-left:280px;" id="mainRadio">
                        <?php if(mysql_num_rows($rs)){ ?>
                            <?php while($row = mysql_fetch_assoc($rs)){ ?>
                            <div id="<?php echo $row['libelle']?>_r" class="marginTop">
                                <span><input type="radio" name="<?php echo $row['libelle']?>" id="<?php echo $row['libelle']?>"></span> 
                                <span id="<?php echo $row['libelle']?>_label"><?php echo $row['libelle']?></span>
                            </div>
                            <?php }?>
                        <?php }?>
                        </div>
<script type="text/javascript">
jQuery(function(){
    jQuery('#add').click(function(){
        if(jQuery('#xxx_add_e').length){
            return false;
        }else{
            //var name = jQuery.trim(jQuery('#radio').val());
            var elem = '<input type="radio" name="" id="xxx_add_e" />';
            var row = '<div id="xxx_add_r"><span>'+elem+'</span><span id="xxx_add_label"><input type="text" value="" placeholder="enter value" id="xxx_add_t" /></span> <span id="xxx_add_btns"><span><input type="button" value="okay" id="xxx_add_y" onclick="xaddElement();" /></span> <span><input type="button" value="cancel" id="xxx_add_n" onclick="xcancelElement();" /></span></span></div>';
            jQuery('#mainRadio').prepend(row);
        }
    });
    jQuery('#delete').click(function(){
        for(var i=0; i<jQuery(':radio').length; i++){
            var rad = jQuery(':radio')[i];
            if(jQuery(rad).is(':checked')){
                //make an ajax call here to delete record from database
                jQuery.ajax({
                    url:'radio.php?delete=1&name='+jQuery(rad).attr('name'),
                    success: function(){
                    },
                    complete: function(){
                        jQuery('#loading').hide();
                    }
                });
                jQuery('#'+jQuery(rad).attr('id')+'_r').remove();
            }
        }
    });
});
function xaddElement(){
        var val = jQuery('#xxx_add_t').val();
        jQuery('#loading').show();
        ////Make an ajax call to add element data in database
        jQuery.ajax({
            url:'radio.php?add=1&name='+val,
            success: function(html){
            },
            complete: function(){
                jQuery('#loading').hide();
            }
        });
        jQuery('#xxx_add_btns').remove();
        jQuery('#xxx_add_label').text(val);
        jQuery('#xxx_add_label').attr('id',val+'_label');
        jQuery('#xxx_add_r').attr('class','marginTop');
        jQuery('#xxx_add_r').attr('id',val+'_r');
        jQuery('#xxx_add_e').attr('name',val);
        jQuery('#xxx_add_e').attr('id',val);
}
function xcancelElement(){
    jQuery('#xxx_add_r').remove();
}
</script>
// radio.php
<?php
if($_REQUEST['add'] == 1){
    $name = trim($_REQUEST['name']);
    $sql = "insert into user_nature set ref_user=1, libelle='$name'";
    mysql_query($sql);
}
if($_REQUEST['delete'] == 1){
    $name = trim($_REQUEST['name']);
    $sql = "delete from user_nature where libelle='$name'";
    mysql_query($sql);
}
?>

[LastMitch]

It is not working AFTER refresh anymore:

You have to be more specific. What is the issue explain more?

[PriteshP23]

When we create a radio button by click on add button, it creates. But it (recently created radio button) is not displaying AFTER refresh the page.

[LastMitch]

When we create a radio button by click on add button, it creates. But it (recently created radio button) is not displaying AFTER refresh the page.

What line did you add on your code?

[PriteshP23]

I need to refresh page automatically each time when action of add or delete is performed. It is not refreshing the page. Thanks a lot in adavnced.

<html>
<head>
<title>Radio Button</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    var addCount=0;
    var deleteCount=0;
    var arr = new Array();
    var arrSend = new Array();
function add() {
   var foo = document.getElementById("fooBar");
    var id="add";
    var radio1 = document.createElement("input");
    radio1.setAttribute("value","ADD");
    radio1.setAttribute("type","radio");
    radio1.setAttribute("id",addCount);

    radio1.setAttribute("name","r1");

     var newL = document.createElement("label");
     var newT = document.createTextNode(document.getElementById("T1").value);
     arr[addCount]=document.getElementById("T1").value;
     newL.appendChild(newT);
    newL.id = addCount+"l";    
    var br = document.createElement("br");

    addCount=addCount+1;
        var str;
    var arrss=0;
for(var i=deleteCount; i<addCount; i++)
    { 
    arrSend[arrss]=arr[i];

    str+='&array_items[]='+arrSend[arrss];
    arrss++;
}
document.location.href='radiobuttonRef.php?'+str;
foo.appendChild(radio1);  
    foo.appendChild(newL);
    foo.appendChild(br);
}

function deleteEle(){
   element = document.getElementById(deleteCount);
   element.parentNode.removeChild(element);
   element = document.getElementById(deleteCount+"l");
   element.parentNode.removeChild(element);
deleteCount=deleteCount+1;
    var str;
    var arrss=0;
for(var i=deleteCount; i<addCount; i++)
    { 
    arrSend[arrss]=arr[i];

    str+='&array_items[]='+arrSend[arrss];
    arrss++;
}
document.location.href='radiobuttonRef.php?'+str;
}
</script>

<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function parseMe() {

var json=document.getElementById("json_text").value;

var obj=eval('('+json+')');

for(val in obj){
     var foo = document.getElementById("fooBar");

    var id="add";
    var radio1 = document.createElement("input");
    radio1.setAttribute("value","ADD");
    radio1.setAttribute("type","radio");
    radio1.setAttribute("id",addCount);

    radio1.setAttribute("name","r1");

     var newL = document.createElement("label");
     var newT = document.createTextNode(obj[val]);
     arr[addCount]=obj[val];
     newL.appendChild(newT);
    newL.id = addCount+"l";    
    var br = document.createElement("br");

    addCount=addCount+1;

    foo.appendChild(radio1);  
    foo.appendChild(newL);
    foo.appendChild(br);
}


}
</head>
<body onload="parseMe()">
 <?php
 for ($i=0; $i<count($_GET['array_items']); $i++){ 
    $array[] = $_GET['array_items'][$i];
}
$json=json_encode($array);
?>

<form>
<p><input type="text" name="T1" id="T1" size="20"></p>
<INPUT type="button" value="Add" onclick="add()"/>
<INPUT type="button" value="Delete" onclick="deleteEle()"/>
<input type="hidden" id="json_text" value='<?php echo $json; ?>' />
<div id="fooBar"></div> 
</form>
</body>
</html>

[PriteshP23]

Finally, i solved it out. Here it is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
    jQuery('#add').click(function(){

        if(jQuery('#xxx_add_e').length){
            return false;           
        }

        else{
            //var name = jQuery.trim(jQuery('#radio').val());

            var elem = '<input type="radio" name="" id="xxx_add_e" />';
            var row = '<div id="xxx_add_r"><span>'+elem+'</span><span id="xxx_add_label"><input type="text" placeholder="enter value" id="xxx_add_t"/></span> <span id="xxx_add_btns"><span><input type="button" value="OK" id="xxx_add_y" onclick="xaddElement();" /></span> <span><input type="button" value="Cancel" id="xxx_add_n" onclick="xcancelElement();" /></span></span></div>';

            jQuery('#mainRadio').prepend(row);
        }

    } );
    jQuery('#delete').click(function(){

        for(var i=0; i<jQuery(':radio').length; i++){
            var rad = jQuery(':radio')[i];
            if(jQuery(rad).is(':checked')){
                //make an ajax call here to delete record from database
                jQuery.ajax({

                    //url:'radio.php?action=delete&name='+jQuery(rad).attr('name'),
                    url:'radio.php?action=delete&name='+jQuery(rad).val(),
                    success: function(){
                        window.location = window.location.href;
                    },
                    complete: function(){
                        jQuery('#loading').hide();
                    }
                });
                jQuery('#'+jQuery(rad).attr('id')+'_r').remove();
            }
        }
    });

});
function xaddElement(){
        var val = jQuery('#xxx_add_t').val();
        //alert(val);
        jQuery('#loading').show();
        ////Make an ajax call to add element data in database 
        var myurl = 'radio.php?action=add&name='+val;
        //alert(myurl);
        jQuery.ajax({
              url:myurl,

            success: function(html){
//alert(html);
            },
            complete: function(){
                jQuery('#loading').hide();
            },
            onError:function(xhr){
            alert(html);
            }
        });

        jQuery('#xxx_add_btns').remove();
        jQuery('#xxx_add_label').text(val);
        jQuery('#xxx_add_label').attr('id',val+'_label');
        jQuery('#xxx_add_r').attr('class','marginTop');
        jQuery('#xxx_add_r').attr('id',val+'_r');
        jQuery('#xxx_add_e').attr('name',val);
        jQuery('#xxx_add_e').attr('id',val);
}
function xcancelElement(){
    jQuery('#xxx_add_r').remove();
}

</script>
<div id="loading" style="position: fixed;width:100%;top:0;left:0;right:0;bottom:0;background:#f7f7f7;opacity:0.4;display:none;">
    <div id="" style="text-align:center;width:100%;position:relative;top:100px;color:#fff">
    Loading...
    </div>
</div>