I'm trying to copy one row of a table and append a radio button to it. There are 3 rows that i declared in the html and an add button in jquery which can add names to the table. All of these rows are appended with a delete button. when I click the start button I want the names to go to the next div without the delete button and append a radio button to it. and the user should be able to vote the names.when i add names, an extra radio button without name value is passed to the div. I can't figure out why. I'm trying to make a voting system using jquery without using any databases(temporary). Please help. I can't figure out why the extra radio button is getting passed. It's only passed when i add candidate using the add button.
here's my code:
$(document).ready(function()
{
$('#start').click(function()
{
$("#div1").hide();
$("#buttonset1").hide();
$("#div2").show();
$("#voterName").val("")
if( $('#candidateTable thead tr').children().length = 1)
{
if( $('#newTable thead').children().length == 0 )
{
$('#newTable thead').append('<tr></tr>');
}
$('#newTable thead tr').append('<th>' $($('#candidateTable thead tr').children()).text() '</th>');
$('#candidateTable tbody tr').each(function(i)
{
if( $('#newTable tbody').children().length != $('#candidateTable tbody').children().length)
{
$('#newTable tbody').append('<tr></tr>');
}
$('#newTable tbody tr:nth-child(' (i 1) ')').append('<td>' $($(this).children()[0]).text() '</td>' '<td><input type="radio" ></td>');
});
}
});
//delete candiates
$("#candidateTable").on('click', '.del', function()
{
$(this).closest('tr').remove();
});
//add candidate
$("#add").click(function()
{
//adding candidates
var candidatename = $("#candidatename").val();
if(candidatename.length!=0)
{
$("#candidateTable tbody").append('<tr><td>' candidatename '</td>' '<td>' '<button id="Delete">Delete</button>' '</td><tr>');
$("#candidatename").val('');
}
});
});
$(document).ready(function()
{
$("#final").click(function(){
$("#div2").hide();
$("#div4").show();
});
});
table, tr, th, td{
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Voting System </h1>
<body>
<div id="div1">
<table id="candidateTable">
<thead>
<tr>
<th id="candidatelist">Candidate Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXX</td>
<td><button id="Delete">Delete</button></td>
</tr>
<tr>
<td>YYYY</td>
<td><button id="Delete">Delete</button></td>
</tr>
<tr>
<td>ZZZZ</td>
<td><button id="Delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div id="buttonset1">
<br>
<br>
<input type="text" id="candidatename">
<button id="add">Add</button>
<br>
<br>
<button id="start">Start</button>
<br>
<br>
</div>
<br>
<form action="javascript:void(0)">
<div id="div2" style="display: none;">
<div id="buttonset2">
<label>Name</label>
<input type="text" name="Name" id="votername">
<button id="vote">Vote</button>
<br>
<br>
<table id="newTable">
<thead>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<button id="final">Submit Votes</button>
</div>
</div>
<br>
<br>
<br>
<div id="div4" style="display:none;">
<h2>
Result
</h2>
</div>
</body>
</html>
CodePudding user response:
If i should get you correctly, you want the radio button to only select 1 entry out from the 3.
if that's the case, i have modified your code to work as thus..
the modified area is also indicated in the js/jquery section. you only missed assigning a name Attr. to your radio button..
$(document).ready(function()
{
$('#start').click(function()
{
$("#div1").hide();
$("#buttonset1").hide();
$("#div2").show();
$("#voterName").val("")
if( $('#candidateTable thead tr').children().length = 1)
{
if( $('#newTable thead').children().length == 0 )
{
$('#newTable thead').append('<tr></tr>');
}
$('#newTable thead tr').append('<th>' $($('#candidateTable thead tr').children()).text() '</th>');
$('#candidateTable tbody tr').each(function(i)
{
if( $('#newTable tbody').children().length != $('#candidateTable tbody').children().length)
{
$('#newTable tbody').append('<tr></tr>');
}
//Modified area to asign a name to the rdio button
$('#newTable tbody tr:nth-child(' (i 1) ')').append('<td>' $($(this).children()[0]).text() '</td>' '<td><input type="radio" name="boy"></td>');
});
}
});
//delete candiates
$("#candidateTable").on('click', '.del', function()
{
$(this).closest('tr').remove();
});
//add candidate
$("#add").click(function()
{
//adding candidates
var candidatename = $("#candidatename").val();
if(candidatename.length!=0)
{
$("#candidateTable tbody").append('<tr><td>' candidatename '</td>' '<td>' '<button id="Delete">Delete</button>' '</td><tr>');
$("#candidatename").val('');
}
});
});
$(document).ready(function()
{
$("#final").click(function(){
$("#div2").hide();
$("#div4").show();
});
});
table, tr, th, td{
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Voting System </h1>
<body>
<div id="div1">
<table id="candidateTable">
<thead>
<tr>
<th id="candidatelist">Candidate Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXX</td>
<td><button id="Delete">Delete</button></td>
</tr>
<tr>
<td>YYYY</td>
<td><button id="Delete">Delete</button></td>
</tr>
<tr>
<td>ZZZZ</td>
<td><button id="Delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div id="buttonset1">
<br>
<br>
<input type="text" id="candidatename">
<button id="add">Add</button>
<br>
<br>
<button id="start">Start</button>
<br>
<br>
</div>
<br>
<form action="javascript:void(0)">
<div id="div2" style="display: none;">
<div id="buttonset2">
<label>Name</label>
<input type="text" name="Name" id="votername">
<button id="vote">Vote</button>
<br>
<br>
<table id="newTable">
<thead>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<button id="final">Submit Votes</button>
</div>
</div>
<br>
<br>
<br>
<div id="div4" style="display:none;">
<h2>
Result
</h2>
</div>
</body>
</html>
CodePudding user response:
Change this line of code:
$("#candidateTable tbody").append('<tr><td>' candidatename '</td>' '<td>' '<button id="Delete">Delete</button>' '</td><tr>');
with this:
$("#candidateTable tbody").append('<tr><td>' candidatename '</td><td><button id="Delete">Delete</button></td></tr>');
in your add function. Now it will not add one extra row.
Full working example link is below