Solved: HOW TO GROUP RADIO BUTTONS THAT ARE DYNAMICALLY GENERATED WHEN ADD BUTTON IS CLICK

Create Account

JavaScript

Questions

Followers

Top Experts

Moses Dwana

HOW TO GROUP RADIO BUTTONS THAT ARE DYNAMICALLY GENERATED WHEN ADD BUTTON IS CLICK

in my code i want to dynamically generate textboxes and radio buttons to enable me add new staff information. I have succeeded in doing this but every time i selected the gender of staff1 radio button , the gender of staff2 radio will deselect. for example if staff1 was a male and staff2 also a male, selecting staff2 deselect staff1 because the radio button name generated is the same. please help!! i have been struggling with problem for almost a week.

can you also show me how to store the values in mysql database?

Zero AI Policy

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

Ray Paseur🇺🇸

Radio buttons are mutually exclusive for input controls with identical names. In other words, they are working the right way. If you want to post your HTML we might be able to show you a good way forward. If I can find an example, I'll post it here.

Ray Paseur🇺🇸

Here's an example showing how to get the associations correct.
https://iconoun.com/demo/temp_moses.php

Original form

Form filled in

Result of running the script

<?php // demo/temp_moses.php
/**
 * https://www.experts-exchange.com/questions/29026356/HOW-TO-GROUP-RADIO-BUTTONS-THAT-ARE-DYNAMICALLY-GENERATED-BY-CLICKING-A-BUTTON.html
 */
error_reporting(E_ALL);

// SHOW THE REQUEST VARIABLES
if (!empty($_POST))
{
    foreach ($_POST['person'] as $key => $val)
    {
        echo PHP_EOL . "<br>Person #$key is $val, with gender:" . $_POST['gender'][$key];
    }
}

// CREATE OUR WEB PAGE IN HTML5 FORMAT, USING HEREDOC SYNTAX
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 Page With Radio Buttons</title>
</head>
<body>

<form method="post">

<input name="person[1]" placeholder="Person #1" />
<input type="radio" name="gender[1]" value="m" />M
<input type="radio" name="gender[1]" value="f" />F
<br>

<input name="person[2]" placeholder="Person #2" />
<input type="radio" name="gender[2]" value="m" />M
<input type="radio" name="gender[2]" value="f" />F
<br>

<input name="person[3]" placeholder="Person #3" />
<input type="radio" name="gender[3]" value="m" />M
<input type="radio" name="gender[3]" value="f" />F
<br>

<input type="submit" />
</form>

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

Ray Paseur🇺🇸

For a good foundation in PHP, follow the learning resources here, but get to know HTML first.
https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html

There are millions of MySQL examples online. A few of the important ones are available here:
https://www.experts-exchange.com/articles/11177/PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

Moses Dwana

ASKER

thank you Ray for your answers. however, my intention is to create dynamic textboxes, dropdown and radio button to add more staffs information at once when the "add more staff button" is click. i have succeeded in writing code in jquery that generate the textboxes, dropdown, and two radio buttons that enable me select either male or female for each staff. all other other textboxes selectboxes are working fine except the radio buttons. now what is happening for instance, if i decide to add two staffs information at once by clicking the "add more staff" button selecting male for the first staff and also selecting male for the second does not work. as soon as the second staff radio button is click, the first staff radio is deselected basically because jquery is generating the same name for all the dynamically generated textboxes, radio,dropdowns etc. i really don't know how to about solving this problem, i am new into programming.

thanks for your effort!!!

Ray Paseur🇺🇸

OK, let's try this... Please post the code you're using, HTML, JavaScript, and the PHP action script, if you have that in play. What you want to do is exactly the same thing I posted above, but you want to generate the input control statements dynamically. That's a very common design pattern and I'm sure we can find good examples for you.

Moses Dwana

ASKER

<script>
$(document).ready(function() {

 function addMore() {
	
	var count = $('DIV.product-item').length
    if (count >= 2) {
            alert("only three staff allow");
			count++;
            return false;
        }
	
	
	
	
	$("<DIV>").load("input.php", function() {
			$("#product").append($(this).html());
			
	});


}
function deleteRow() {
	$('DIV.product-item').each(function(index, item){
		jQuery(':checkbox', this).each(function () {
            if ($(this).is(':checked')) {
				$(item).remove();
            }
        });
	});
	
}
//////////////////////////
})

</script>
this is the php file that is being call by the above script when the add more staff button is click

<?php
   	echo '
<DIV class="product-item1 float-clear" style="clear:both;" >
<input type="checkbox" name="item_index[]" />
<div class="form-group">
<DIV class="col-sm-4"><input type="text" class="form-control" name="stfname[]" placeholder ="First Name"/><br></DIV>
<DIV class="col-sm-4"><input type="text" class="form-control" name="stlname[]" placeholder ="Last Name"/><br></DIV>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stcommunity[]"placeholder ="Street/Community"/><br></DIV>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stphone[]"placeholder ="Phone Number"/><br></DIV>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stemail[]"placeholder ="Email Address"/><br></DIV>
<DIV  class="col-sm-1"><input type="radio" name="sex" class="radio-inline" value="Male">Male<br><br></div
<DIV  class="col-sm-1"><input type="radio" name="sex" class="radio-inline"  value="Female">Female<br><br></div>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stposition[]"placeholder ="Position"/><br></DIV>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stqualification[]"placeholder ="Qualification"/></DIV>
<DIV  class="col-sm-4"><input type="text" class="form-control" name="stexperience[]"placeholder ="Year of Experience"/><br></DIV>
</DIV></div>
';

Open in new window

?
it's called "Input.php"

when the add more botten is click, the php file (input.php) is call on a main html page in a div with an id called "product"

Get a FREE t-shirt when you ask your first question.

We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.

Ray Paseur🇺🇸

ASKER CERTIFIED SOLUTION

Ray Paseur🇺🇸

membership

Signing up is free and takes 30 seconds. No credit card required.

Create Account

Moses Dwana

ASKER

thanks very mush Ray!! I will try it and hopefully it works. sorry i have not been in communication with you for the past few days. i went on a weekend and while there, i never had access to internet. thank very mush for your respond!!!!

Moses Dwana

ASKER

thank you very mush Mr. Paseur. I can see it working wonderfully. I am so exerted!! i am trying right now to update the code to fit my needs. thank you so mush!!!!!!

EARN REWARDS FOR ASKING, ANSWERING, AND MORE.

Earn free swag for participating on the platform.

Moses Dwana

ASKER

thank you very mush Mr. Paseur for helping me resolved this issue that took me more the a week trying to find solution.

Moses Dwana

ASKER

Hi Mr. Paseur, every thing worked find, but i am finding it difficult to get the value of the radios into the database using php. all other textboxes values are inserted except the radios values.

JavaScript

Questions

Followers

Top Experts

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.