Moses Dwana
asked on
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?
can you also show me how to store the values in mysql database?
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.
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
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;
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
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
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!!!
thanks for your effort!!!
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.
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>
';
?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"
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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!!!!
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!!!!!!
ASKER
thank you very mush Mr. Paseur for helping me resolved this issue that took me more the a week trying to find solution.
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.