1,105,375 Community Members

Dynamically Manage Radio Button PHP JS

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

Hello All,

Objective is to manage radio button Dynamically. One should be able to add/delete radio button by ADD and DELETE button in form. To make CLEAR the question, please look at the image "BUTTON". In addition, it should be displayed with updated values (Need to manage from database side also). !! I think one may use JavaScript.

BUTTON

For example, IF one click on ADD in order to add new radio button => FERRARI, Then is should be display 3 items and IF one click on DELETE in order to delete "BMW", result should be 2 items. I Hope i am clear to you.

Thanks a lot in advanced.

Attachments
LastMitch
Deleted Member
 
0
 

@PriteshP23

Objective is to manage radio button Dynamically. One should be able to add/delete radio button by ADD and DELETE button in form.

I mean it's good that you post image how you it to look like but where is the code?

You have to post a code of what you have done so far to see what you did.

Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
2
 

Like LM states - show your code. If you're stuck, here's a few pointers. You can convert php array to json format like this:

<?php
    $json = json_encode(array("bmw","mercedes","mini","land rover"));
?>

So all you have to do is get the data from the DB in a suitable format (array).

Your form is presumably something like this:

<form>
    <div id="radio"></div>
    <button id="btnadd">Add</button>
    <button id="btndel" disabled="disabled">Delete</button>
</form>

I'd use jQuery for this, so just before your </body> tag, place this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Then under that you can do something like:

<script>
    var json = <?php echo $json;?>;
    //rest of code
</script>    

You need to code for 2 events - the btnadd and the btndel .click
Have a little play with it and come back with some effort.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

@diafol

Thanks for the code. I am begginer for JSON. I just would like to have exact flow for one demo for ADD or DELETE button. I need to know the actions behind the screen. I would like to have one complete file to understand the logic from which one can get the result. I have tried one example and i did like this.

@LastMitch
Here is my code. I did what i know.

I would like to know NEXT Steps in order to get the expected results. Please let me know if you have ANY idea.

<HTML>
<HEAD>
<SCRIPT language="javascript">
function add(type) 
{
    var element = document.createElement("input");
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
    var foo = document.getElementById("fooBar");
    foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT name="element">
    <OPTION value="button">Button</OPTION>
    <OPTION value="text">Textbox</OPTION>
    <OPTION value="radio">Radio</OPTION>
</SELECT> 
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<span id="fooBar">&nbsp;</span>
</FORM>
</BODY>
</HTML>
LastMitch
Deleted Member
 
0
 
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

What results did you get when you onclick=add()?

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

It is creating only textbox with value undefined. Please let me know by example the next steps IF you have ANY idea.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

@diafol

If possible, Please let me know it by one example. I do not know JSON. Thanking you so much in advanced.

I need help in order to get the result soon.

Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

If possible, Please let me know it by one example. I do not know JSON. Thanking you so much in advanced.

Try researching it. Google. Try coding it. If you get stuck, ask in the javascript forum.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

It is giving name for radio button all time "add". How one can enter the button value from user ? I need to do like at a time ONLY one button can be selected and then able to edit name/delete selected one. Any help would be great..!

//js
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","radio");
    var newL = document.createElement("label");
    var newT = document.createTextNode("add");
    newL.appendChild(newT);
    newL.htmlFor = "id";    
    var br = document.createElement("br");

    foo.appendChild(radio1);
    foo.appendChild(newL);
    foo.appendChild(br);
}
// php form
<!--  Add -->
<input type="hidden" name="Add" value="Add_btn" />
<input type="button"  onclick="add()"/>  
&nbsp;
<!--  Delete -->
<input type="hidden" name="Delete" value="Delete_btn" />
<input type="button" value="Delete" onclick="delete()" />
<div id="fooBar"></div> 
Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
1
 

You could do something like this:

<?php
    $json = json_encode(array("bmw","mercedes","mini","land rover"));
?>

<form>
    <div id="radio"></div>
    <button id="btnadd">Add</button>
    <button id="btndel" disabled="disabled">Delete</button>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    var json = <?php echo $json;?>;
    var num = json.length;
    var displayed = 0;
    $('#btnadd').click(function(e){
        e.preventDefault();
        addItem();
    });
    $('#btndel').click(function(e){
        e.preventDefault();
        delItem();
    });

    function addItem(){
        $('#radio').append('<input type="radio" name="cars" value="' + json[displayed] + '" checked="checked" /><label class="rad">' + json[displayed] + '</label>');
        displayed++;
        if($('#btndel').attr('disabled')) $('#btndel').removeAttr("disabled");
        if(displayed == num) $('#btnadd').attr('disabled','disabled');
    }

    function delItem(){
        $('#radio input').last().remove();
        $('#radio label').last().remove();
        displayed--;
        if($('#btnadd').attr('disabled')) $('#btnadd').removeAttr("disabled");
        if(displayed == 0)$('#btndel').attr('disabled','disabled'); 
    }
</script>
Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

Thank you so much.

Now, I did like this. Only problem is that it is not displaying after REFRESHING the page.

<!-- PriteshP23 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.marginTop{margin-top:20px;width:350px;text-align:left;}
#xxx_add_r{width:350px;text-align:left;}
</style>
<title>PriteshP23</title>
</head>
<body id="page_bg">

<div class="center" align="center">

    <div id="wrapper_r">

        <div class="fullWidth header">

            <table>
                <tr>
                    <td colspan="2">Add radio buttons...</td>
                </tr>
                <tr>
                    <td><input type="button" name="add" id="add" value="Add" /></td>
                    <td><input type="button" name="delete" id="delete" value="Delete" /></td>
                </tr>
            </table>
            <div id="main">

            </div>

        </div>

    </div>

</div>

<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" 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('#main').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('#'+jQuery(rad).attr('id')+'_r').remove();
            }
        }
    });

});
function xaddElement(){
        var val = jQuery('#xxx_add_t').val();

        ////Make an ajax call to add element data in database
        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>
</body>
</html>
Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
1
 

Hmmm. You seem to be using jQuery, but then are using onclicks?

Consider using the .on syntax (I have a blog post here: http://diafol.blogspot.co.uk/2013/01/bind-events-to-dynamically-added.html)

Am I to assume that this is an admin form for setting up user forms?

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

It is user form. In my project, user can add/edit/delete radio button items on the form. I have three forms on same page. It should be display AFTER REFRESH the page.

Any help or correction will be great.

LastMitch
Deleted Member
 
0
 

I have three forms on same page

I thought you have 1 form with 3 radio button option?

Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

It is user form. In my project, user can add/edit/delete radio button items on the form.

Why??

ANyway, you need to save it server-side (or to a cookie) for it to show on page refresh. You can either save it to SESSION, DB or cookie, or even XML or JSON. Your choice.
You also need to decide whether you want ajax to update after each addition and deletion. or a one-off save at the end. Loads of ways to do this.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

It is part of the project. So, i would like to know only one way to get the output that should be easy and less time consuming.

Correction in the code or one example would be great.

Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

from what I can see, the code should work to add elements - doesn't it?
I'm afraid I don't have the time to create an update script. Have you created one that we could look at?

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

Well, it is working perfectly to add and delete both. Only two things are remaining: 1.Save on page after REFRESH & 2. Save in database.

I have put whatever i have in my last post. Please take your time. Thanks a lot in advanced.

Member Avatar
diafol
Where are my eyes?
12,983 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

OK, so research ajax saving (jQuery makes it easy - loads of tuorials out there). In a nutshell you can use $.post or $.ajax to pass data to a php file which updates the DB and then get the php to pass a msg back to js to say whether it was successful or not.

Member Avatar
PriteshP23
Posting Whiz in Training
206 posts since Oct 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 6 [?]
 
0
 

I just need to save the data on page after REFRESH and save in DB. Any example of CODE would be great.

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: