Manage Radio Button

Question

PriteshP23 0 Posting Whiz in Training

11 Years Ago

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

javascript jquery

2 Contributors
5 Replies
311 Views
2 Weeks Discussion Span
Latest Post 11 Years Ago Latest Post by PriteshP23

All 5 Replies

LastMitch

11 Years Ago

It is not working AFTER refresh anymore:

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

LastMitch

11 Years Ago

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?

Reply to this topic

Be a part of the DaniWeb community

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

PriteshP23 0 Posting Whiz in Training · Answer 1 · 2013-02-19T08:33:54+00:00

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.

PriteshP23 0 Posting Whiz in Training · Answer 2 · 2013-02-26T09:20:08+00:00

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 0 Posting Whiz in Training · Answer 3 · 2013-03-06T20:20:15+00:00

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>

Manage Radio Button

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers