We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!

1,076,018 Members — Technology Publication meets Social Media

1 2 →

Start New Discussion Reply to this Discussion

Ad: Cisco Servers-unparalleled performance

0

Dynamically Manage Radio Button PHP JS

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

BUTTON.jpg 13.7KB

3

Contributors

25

Replies

4 Weeks

Discussion Span

2 Months Ago

Last Updated

74

Views

Question
Answered

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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.

Industrious Poster

4,165 posts since Mar 2012

Reputation Points: 132

Solved Threads: 334

Skill Endorsements: 45

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.

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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>

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

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

Industrious Poster

4,165 posts since Mar 2012

Reputation Points: 132

Solved Threads: 334

Skill Endorsements: 45

0

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

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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.

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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.

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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>

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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>

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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>

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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?

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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.

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

0

I have three forms on same page

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

Industrious Poster

4,165 posts since Mar 2012

Reputation Points: 132

Solved Threads: 334

Skill Endorsements: 45

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.

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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.

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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?

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

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.

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

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.

Keep Smiling

Moderator

10,654 posts since Oct 2006

Reputation Points: 1,628

Solved Threads: 1,510

Skill Endorsements: 57

0

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

Junior Poster

113 posts since Oct 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

This question has already been solved: Start a new discussion instead

You

1 2 →

Web Development > PHP

© 2013 DaniWeb® LLC

Page rendered in 0.1537 seconds using 2.8MB