Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 530
  • Last Modified:

Add one to many table rows based on checkbox values

I have one select list and 4 checkboxes. I have enter the option value and the value of the checkbox as 2 separate values in a row.

 If one checkbox is checked, I am able to add a table row. I need help in adding multiple rows at one time if multiple checkboxes are checked.

Please help.

Thank you
sshivanna

So far this is my code...

SCRIPT

<script type="text/javascript">
      
      $(function() {

            $("#btn_addrole").click(function(){
                  if ($("#Launcher").is(":checked") == true) {
                  $("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Launcher").val()+'</td></tr>');
                  }
            });
      });      
</script>
---------------------
HTML code
--------------------
            <table class="git-role-table">
            <tr><td>
                  <select id="surveyoptions" >
                        <option value="opt1">Option 1</option>
                        <option value="opt2">Option 2</option>
                        <option value="opt3">Option 3</option>
                        <option value="opt4">Option 4</option>
                  </select>
            </td>
            <td><input type="checkbox" id="Launcher" value="Launcher">&nbsp;Launcher&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Preparer" value="Preparer">&nbsp;Preparer&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Reviewer" value="Reviewer">&nbsp;Reviewer&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                  <input type="button" id="btn_addrole" value="Add Role" />
            </td>
            </tr>
            </table>

<div id="role_container">
      <table id="rolestable">
            <tr><td>&nbsp;</td></tr>
      </table>
</div>


0
sshivanna
Asked:
sshivanna
  • 3
  • 3
1 Solution
 
sam2912Commented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#btn_addrole").click(function(){
		if ($("#Launcher").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Launcher").val()+'</td></tr>');
		}
		if ($("#Preparer").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Preparer").val()+'</td></tr>');
		}
		if ($("#Reviewer").is(":checked") == true) {
			$("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#Reviewer").val()+'</td></tr>');
		}
	});
});
</script>
</head>
<body>
<table class="git-role-table" border="1">
	<tr>
		<td><select id="surveyoptions" >
				<option value="opt1">Option 1</option>
				<option value="opt2">Option 2</option>
				<option value="opt3">Option 3</option>
				<option value="opt4">Option 4</option>
			</select></td>
		<td><input type="checkbox" id="Launcher" value="Launcher">
			&nbsp;Launcher&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="Preparer" value="Preparer">
			&nbsp;Preparer&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="Reviewer" value="Reviewer">
			&nbsp;Reviewer&nbsp;&nbsp;&nbsp; </td>
		<td><input type="button" id="btn_addrole" value="Add Role" /></td>
	</tr>
</table>
<div id="role_container">
	<table id="rolestable" border="1">
		<tr>
			<td>&nbsp;</td>
		</tr>
	</table>
</div>
</body>
</html>

Open in new window

0
 
sam2912Commented:
Actually the "== true" can be removed, as the .is() function already returns a boolean value.
if($("#Launcher").is(":checked") == true) {

TO

if($("#Launcher").is(":checked")) {

Open in new window

0
 
cstsangCommented:
Is it what you need?
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script language=javascript>
			 $(function() {

            $(".btn_addrole").click(function(){
                  if ($(this).is(":checked") == true) 
                  {
	                  var table=$(".git-role-table").get(0);
	                  var row=document.createElement("tr");
	                  cell=row.insertCell(row.length);
	                  cell.innerHTML=$("#surveyoptions option:selected").val();
	                  cell=row.insertCell(row.length);
	                  cell.innerHTML=$(this).val();
	                  table.appendChild(row);
             	  }
            });
      });      

		</script>
	</head>
	<body>
	  <table class="git-role-table">
            <tr><td>
                  <select id="surveyoptions" >
                        <option value="opt1">Option 1</option>
                        <option value="opt2">Option 2</option>
                        <option value="opt3">Option 3</option>
                        <option value="opt4">Option 4</option>
                  </select>
            </td>
            <td><input type="checkbox" id="Launcher" value="Launcher" class="btn_addrole">&nbsp;Launcher&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Preparer" value="Preparer" class="btn_addrole">&nbsp;Preparer&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="Reviewer" value="Reviewer" class="btn_addrole">&nbsp;Reviewer&nbsp;&nbsp;&nbsp;
            </td>
            <td>
                  <input type="button" id="btn_addrole" value="Add Role" />
            </td>
            </tr>
        </table>

		<div id="role_container">
		      <table id="rolestable">
		            <tr><td>&nbsp;</td></tr>
		      </table>
		</div>
	</body>
</html>		

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
sshivannaAuthor Commented:
Thank you for your responses. I am sorry I didn't explain my challenge correctly.

Here is what I want.

A user can select one of the options from the select list and can check one or more of the checkboxes before he clicks the 'Add Role' button.  For each checkbox checked, I need to insert a row into the table.

When the user checks only one of the checkboxes, that is not a problem. I am able to add a row.

What I really need is to check which of the checkboxes are checked and add a row for each checked checkbox with its value.

So if the user checks 3 checkboxes and select an option, I need to insert 3 rows into the table.
0
 
sshivannaAuthor Commented:
Thank you guys for your assistance. The problem is solved. Here is the solution to the problem.

I had to create a function and call the function to add roles.

<script type="text/javascript">
      
      $(function() {

            $("#btn_addrole").click(function(){
                  if ($("#Launcher").is(":checked")) {
                        addRole('Launcher');
                  }

                  if ($("#Reviewer").is(":checked")) {
                        addRole('Reviewer');
                  }

                  if ($("#Preparer").is(":checked")) {
                        addRole('Preparer');
                  }
            });

            function addRole(roleId){
                  $("#rolestable > tbody:last").append('<tr><td>'+$("#surveyoptions option:selected").val()+'</td><td>'+$("#"+roleId).val()+'</td></tr>');
            }

      });      

</script>
0
 
sam2912Commented:
TS, did you test my code in the first post?
0
 
sshivannaAuthor Commented:
@sam2912, Thank you for pointing it out. I totally missed it. That worked. Thank you.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now