I have a table which I populate with data from server using php. Next, I add a cell for each row of data and put a radio button in that cell. I do it with the following code:
<script>
var table=document.getElementById("dataTables-1");
table.createTHead()
var cell;
var row;
for(var i=1;i<table.rows.length-1;i++){
row=table.rows[i];
cell=row.insertCell(0);
cell.innerHTML="<?php echo '<input type=' . "'radio'" . ' name=' . "'radio'" . '>' ?>"
}
</script>
What I need to do is add value property to the radio button node, that would equal the innerHTML of cell in that table, in the same row.
My aim is to create a table in which user selects a table row (using radio button) and then presses the button below the table which has action="some_other_page.php" and keep the $_POST["radio"] (value taken from one of the columns, in the row selected by user) to process it further.
Change this line :
cell.innerHTML="<?php echo '<input type=' . "'radio'" . ' name=' . "'radio'" . '>' ?>"
to this :
cell.innerHTML="<?php echo '<input type=' . "'radio'" . ' name=' . "'radio'" . 'value=' . "$valueOfInnerHTMLOfTable" . '>' ?>"
Where $valueOfInnerHTMLOfTable is the value you want to set.
Related
I want rest the value in the text box when the rest button click in dynamical created table .how do i do it?
$table .='<tbody><tr>';
$table .='<td>' . $row["emp_id"] . '</td>';
$table .='<td>' . $row["emp_name"] . '</td>';
$table .='<td>' . $row["date"] . '</td>';
$table .='<td><input type="text" name="firstname" class="form-control" value="'.$row["ot_hour"] .'" size="4"></td>';
$table .='<td><button type="button" name="ot_approval_rset" class="btn btn-primary btn-sm ot_approval_rset" " id="'.$row["emp_id"].'">Reset</button></td>';
$currentMonth= date('Y-m');
$query01 ="SELECT SEC_TO_TIME( SUM( TIME_TO_SEC( `ot_hour` ) ) ) AS timeSum
FROM otresquest
WHERE emp_id ='".$row["emp_id"]."' AND date LIKE '$currentMonth%' AND overtime_status=6";
$statement = $connect->prepare($query01);
if($statement->execute())
{
$result = $statement->fetchAll();
foreach($result as $row){
$table .='<td>' . $row["timeSum"] . '</td>';
}
}
$table .='</tr></tbody>';
java script code
$(document).on('click', '.ot_approval_rset', function() {
emp_id = $(this).attr('id');
//i need write code here to reset (00:00:00) value of ot_approval_rset input box
});
when click the reset button particular row ot hours should 00:00:00 .
Let try this code
$(document).on('click', '.ot_approval_rset', function() {
var otherInput = $(this).closest('tr').find('input').val('00:00:00');
});
It may be help to you
I followed some solutions founded around and most of them was working but I'm having an issue of duplicating the SELECTED id record not only the structure of HTML.
foreach ($pdo->query($sql) as $row) {
echo '<tr id="myrow">';
echo '<td>'. $row['id'] . '</td>';
echo '<td>'. $row['finishing'] . '</td>';
echo '<td>'. $row['price'] . '</td>';
echo '<td width=250>';
echo '<a class="btn btn-warning" onclick=duplicate()>Duplicate</a>';
}
when i click the DUPLICATE button I want to duplicate the entire row with regard of the selected id.
That my duplicate implementation:
var i = 1;
$("table tr:first").clone().find("tr").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().appendTo("table");
i++;
});
UPDATE: Another Try for duplication:
document.getElementById('duplicateid').onclick = addMoreFields;
var newRow = document.getElementById('myrow').cloneNode(true),
myTable = document.getElementById('myTable');
function addMoreFields() {
myTable.appendChild(newRow.cloneNode(true));
}
You need to add the function duplicate() with quotation marks. onclick="duplicate()"
echo '<a class="btn btn-warning" onclick="duplicate()">Duplicate</a>';
EDIT:
Every row has the same ID (myrow), this is incorrect so Im going to change it to a class. Give each row a new attribute, like data-id.
Since Im sure the ID is a integer Im not giving it the attribute ID since ID's cant start with a integer.
echo '<tr class="myrow" data-id="'.$row['id'].'">';
and then send the ID to the duplicate function.
echo '<a class="btn btn-warning" onclick="duplicate(\''.$row['id'].'\')">Duplicate</a>';
And then duplicate the row and append it to the table.
function duplicate(id){
$("#themeTable tr[data-id='"+id+"']").clone().appendTo($("#themeTable"));
}
I don't understand completly what you want. Is this it? Append the row to the end of the table on click?
Below is my code, which serializes the list of radio button, these radio buttons are generated by PHP, and then it is printed on the client side using javascript.
What I need is,
after I choose all the radio buttons, and when i click on Submit button, I want it to "check if all the radio buttons are selected in the form", if even a single/multiple radio buttons are not selected in the form, then i need a RED colour Star (mandatory symbol) next to each Not selected radio button
Then pass to another PHP which will save to DB. (this is working)
PHP:
$mysqli=mysqli_connect('localhost','Uid','Pass','DB');
$standard1 = mysqli_real_escape_string($mysqli,trim($_POST["tclass"]));
$section1 = mysqli_real_escape_string($mysqli,trim($_POST["tsection"]));
$SchoolID1 = mysqli_real_escape_string($mysqli,trim($_POST["tschoolid"]));
$query3="SELECT * FROM euser_student WHERE StudCourse='$standard1' and SchoolID='$SchoolID1'and StudentSection='$section1' order by StudentFirstName ASC";
$res3=mysqli_query($mysqli, $query3);
echo '<table border="1">';
for($i=0; $row=mysqli_fetch_assoc($res3); $i++) {
$dat3 = $row['StudentFirstName'];
$dat4 = $row['StudentRegID'];
// data to ajax to display data in a div
// we put the student's name in a hidden input
echo "<tr>
<td>" . $dat3 . " <input type='hidden' name='student[" . $i . "]' value='" . $dat3 . "'><input type='hidden' name='Reg[" . $i . "]' value='" . $dat4 . "'><input type='hidden' name='schoolid[" . $i . "]' value='" . $SchoolID1 . "'></td>
<td><input name='present[" . $i . "]' type='radio' value='Present'>Present</td>
<td><input name='present[" . $i . "]' type='radio' value='Absent'>Absent</td>
<td><input name='present[" . $i . "]' type='radio' value='Leave'>Leave</td>
</tr>";
}
echo '</table>';
Javascript:
$(document).ready(function() {
// radio buttons and input type Hidden data
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'save.php',
data: $(this).serialize(), // reads the data ...
success: function(data) {
alert("data Updated Successfully");
window.location = 'login.html';
});
});
});
You want something like jQuery validation plugin.
http://jqueryvalidation.org/
Checkout demo here
http://jqueryvalidation.org/files/demo/
I have a dynamically generated table that takes attendance for students. The rows will expand with additional information about the student, if any part of the row is clicked. My problem is that if the attendance button (red x) is clicked, then the row expands, but the attendance is marked just fine.
I found a way to disable the last column (by giving all cells on the last column the same name and using some jquery to make it unclickable), but when doing that the buttons got disabled too.
Javascript/jQuery
$(function () {
//This is the line I used to disable the last column, but is affecting the buttons
$('td[name="attend"]').click(function () {
return false;
});
//the rest of the code is used for expanding each row
$("td[colspan=7]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") > 1) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
I have named all the cells in the last column "attend". Any help is much appreciated!
Upon Request, here is the code for each button. Each button is it's own form that is inside the last cell of every row.
php
echo "<td style=\"min-width:75px;\" name=\"attend\">";
echo "<form method=\"POST\" onSubmit=\"return new_user(this);\" >";
echo "<input type=\"hidden\" value=\"" . $row2['status'] . "\" name=\"astatus\" />";
echo "<input type=\"hidden\" value=\"" . $row2['cancel_key'] . "\" name=\"mark_attend\" />";
echo "<input type=\"image\" src=\"$image\" name=\"pic\" />";
echo "</form>";
echo "</td>";
Examine the target tag name like so:
alert($target.prop('tagName'));
It will be "TD" (or SPAN, or whatever is in the cell), or your button.
I'm cycling through data in a foreach loop. On each loop a container class contains the following:
foreach($resultarray AS $value){
$filename = substr($value['img_file_name'],9);
$cat_id = $value['cat_id'];
echo '<article class="post">';
echo '<div class="post_title">' . $value['post_title'] . '</div>';
echo '<div class="post_info">' .
'Category: ' . $cat_name = get_cat_name($cat_id) .'<br />'.
'Year: ' . $value['post_year'] .'<br />'.
$value['post_desc'] .'<br />'.
'</div>';
echo '<div class="link-to-post">Click to view</div>';
echo '<img class="post-thumb" src="img/thumb_/'.$filename.'" alt="MJbox Michael Jackson memorabilia thumbnail" />';
echo '<img class="cover-img" src="img/post-bg-1.png" alt="test" />';
echo '<form name="form"><input type="text" class="postid" value="'.$value['post_id'].'" /></form>';
echo '</article>';
}
I have the following div made visible with Jquery when the "lintopost" link/image is clicked.
<div id="main-post">
<div id="gotpostid">some text</div>
</div>
Currently I am using the collowing Jquery to handle when the #main-post div appears and when to get the data for that post to put inside the div.
$(".cover-img").click(function(){
$("#main-post").fadeIn(1000);
$.post("inc/fullpost.php", {postid: $('.postid').val()},
function(output){
$("#gotpostid").html(output).show();
}).fail(function(x,y,z){
$("#gotpostid").html(x + "<br />" + y + "<br />" + z)
});
});
The problem I'm having at the moment is that the value of the input "postid" is not being selected properly. How can I select it so that it gets the value form this input field and not just from the first .postid it comes across which makes the id the same for every iteration.
I hope I explained myself well enough.
1) I suggest you to use .on('click', function() {when you're going to add new elements on markup.
2) After clicking on image use .find() and .parent() to get exactly the input.