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);
}
?>

Recommended Answers

It is not working AFTER refresh anymore:

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

Jump to Post

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?

Jump to Post

All 5 Replies

Member Avatar

It is not working AFTER refresh anymore:

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

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.

Member Avatar

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?

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>

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.