evenment onclick javascript - javascript

I have a problem with my code
<tr>
<td id="<?php echo; $id ?>" onclick="addrow(?php echo $id; ?>)">...</td>
</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id; ?>" class="ndisplay">...</tr>
css:
.ndisplay {
display: none;
}
JS:
function addrow($id) {
var id = document.getElementById($id);
if (id.hasClass("ndisplay")) {
id.removeClass("ndisplay");
} else {
id.addClass("ndisplay");
}
}
That's work but just for the first tr ...
The problem it's $id is the same value for each tr but i'm forced to use the same id for each <tr>
I have testing with a div between the tr but it doesn't work.

The person who forced to use same ID for all tr elements, say him/her to purchase a beginners book for html and js, in other words it is not valid in HTML specification, you will have to use same classes rather then same id's , :)

At least, with $id1, $id2, $id3, $id4 being different :
<tr>
<td id="<?php echo; $id1 ?>" onclick="addrow(?php echo $id1; ?>)">...</td>
</tr>
<tr id="<?php echo $id2; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id3; ?>" class="ndisplay">...</tr>
<tr id="<?php echo $id4; ?>" class="ndisplay">...</tr>

try this it should work (Open to corrections)
<tr id="1" onClick="addrow()" class="ndisplay">...</tr>
<tr id="2" class="ndisplay">...</tr>
<tr id="3" class="ndisplay">...</tr>
<tr id="4" class="ndisplay">...</tr>
<style type="text/css">
.ndisplay {
display:none;
}
</style>
<script>
function addrow(e) {
var div = e.target;
if(div.hasClass("ndisplay")) {
div.removeClass("ndisplay");
}
else {
div.addClass("ndisplay");
}
}
</script>

Related

How to add Value in jQuery

I want to add value to td in jquery. I have this code but not working.
Return all values for single td. I need that input [name="text-194] contain further values not all.
<table id="mytable" style="width: 100%;" border="1">
<tbody>
<?php
$counter = 1;
foreach ($result_list as $key => $row) { ?>
<tr>
<td class="jakas"><p><?php echo $counter; ?></p></td>
<td class="numer" value="<?php echo $row->numer; ?>"><p><?php echo $row->numer; ?></p></td>
<td class="nazwa" value="<?php echo $row->nazwa; ?>"><p><?php echo $row->nazwa; ?></p></td>
<td class="input" value="<?php htmlspecialchars($row->nazwa); ?>">
<?php echo do_shortcode('[contact-form-7 id="73" title="plik"]'); ?></td>
<?php echo '<input type="text" name="idtest" value="' . htmlspecialchars($row->nazwa) . '">'; ?>
</tr>
<?php $counter++; ?>
<script>
(function ($) {
$(document).ready(function () {
var value = '<?=htmlspecialchars($row->nazwa)?>';
console.log(value);
$('input[name="text-194"]').val($('input[name="text-194"').val() + value);
});
})(jQuery);
</script>
<?php
}
?>

PHP submit button while loop

Hi guys im having a bit of a problem on how to get the value of the table row everytime i click an add button. what im trying to achieve is that to pass the value of the row to another php file for sql query. at the moment i have a table using a while loop and displaying a list of names from the database with a "ADD" button per row. When ever i click the add button regardless of which row i always get the value of the last row. can someone please point of on which part of the code i made a mistake?
here is my code
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
Try Below code. As you want only $row["username"] and it is already stored in button value. Add form in while loop and give same name for button so that you can get username in addFriend.php
<table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<form action="addFriend.php" method="post">
<button type="submit" name="row" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
</form>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
Now in addFriend.php you can get value by $_POST['row'];
Try Below script
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="**addedUser[]**" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
In addFriend.php
print form data using print_r($_REQUEST);

javascript unkown error on css code line

I have this html table:
<center><input type="button" value="Print last visit report" id="printpagebutton" onclick="printData()"/>
<input type="button" value="Print all reports" id="printpagebutton2" onclick="printData1()"/>
</center></BR>
<center></center>
<div class=WordSection1 id="mydiv1">
<?php while($rows = mysqli_fetch_array($result)) { $data2 =$rows['echo_files'];
$dataFile2 = str_replace('/', '\\', $data2); ?>
<div id="mydiv">
<form action="/clinic form/update/update.php" id="Form2" method="post">
<table border="1" align="center" id="table">
<tr align="center">
<th colspan="3" bgcolor="#7a7878">DR. Omar GHNEIM - Patient Medical History</th>
</tr>
<tr align="center">
<th colspan="3"><?php echo 'Medical History of '.$rows['name']?></th>
</tr>
<tr>
<th>Medicaments</th>
<th>Illness</th>
<th>Echo Results</th>
</tr>
<tr>
<?php if(!empty($rows['remarcs']) && trim($rows['remarcs'])!=''):?>
<td width="250px"><?php echo $rows['remarcs'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['illness']) && trim($rows['illness'])!=''):?>
<td width="250px"><?php echo $rows['illness'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['echo']) && trim($rows['echo'])!=''):?>
<td width="250px"><?php echo $rows['echo'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
</tr>
<tr>
<th>Clinic Test Result</th>
<th>Habbits</th>
<th>Allergy</th>
</tr>
<tr>
<?php if(!empty($rows['test_res']) && trim($rows['test_res'])!=''):?>
<td width="250px"><?php echo $rows['test_res'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['habbits']) && trim($rows['habbits'])!=''):?>
<td width="250px"><?php echo $rows['habbits'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['allergy']) && trim($rows['allergy'])!=''):?>
<td width="250px"><?php echo $rows['allergy'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
</tr>
<tr>
<th>Occupation</th>
<th>PMHx</th>
<th>PSHx</th>
</tr>
<tr>
<?php if(!empty($rows['occup']) && trim($rows['occup'])!=''):?>
<td width="250px"><?php echo $rows['occup'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['pmhx']) && trim($rows['pmhx'])!=''):?>
<td width="250px"><?php echo $rows['pmhx'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<?php if(!empty($rows['pshx']) && trim($rows['pshx'])!=''):?>
<td width="250px"><?php echo $rows['pshx'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
</tr>
<tr>
<th colspan="3">Echo Files</th>
</tr>
<tr>
<?php if(!empty($data2) && trim($data2)!=''):?>
<td colspan="3" align="center"><center><a href='download_PopUp.php?data=<?php echo $dataFile2; ?>'>Echo Test files exist</a></center></td>
<?php else: ?>
<td colspan="3" align="center"><center>No echo files</center></td>
<?php endif;?>
</tr>
<tr>
<th>P.E</th>
<?php if(!empty($rows['pe']) && trim($rows['pe'])!=''):?>
<td width="250px"><?php echo $rows['pe'] ?></td>
<?php else: ?>
<td width="250px" align="center">Not Available</td>
<?php endif; ?>
<th rowspan="4" align="left">Signature</th>
</tr>
<tr>
<th>Date</th><td><?php echo $rows['date'] ?></td>
</tr>
<tr>
<th>Address of Patient</th><td><?php echo $rows['address'] ?></td>
</tr>
<tr>
<th>Phone Number of patient</th><td><?php echo $rows['phone_num'] ?></td>
</tr>
</table>
And this javascript file to print a div in a page with a css, but dreamweaver software give an error:
function printData()
{
var divToPrint=document.getElementById("mydiv");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
var css =`table, td, th {
border: 1px solid black;
text-align:justify;
}
th {
background-color: #7a7878;
text-align:center
}`;
var div = $("<div />", {
html: '­<style>' + css + '</style>'
}).appendTo( newWin.document.body);
newWin.print();
newWin.close();
}
$('button').on('click',function(){
printData();
});
But in the browser when I hit F12, nothing is given as error, and the css style won't work.
Template strings are not supported in IE. That's probably why dreamweaver throws an error on that line.
Either escape newlines:
var myString = 'some \n\
multiline \n\
string';
Or concatenate lines:
var myString = 'some \n' +
'multiline \n' +
'string';
A multiline string in javascript can be made like that in most modern browsers but does not work in IE and older browsers.
You should change
var css =`table, td, th {
border: 1px solid black;
text-align:justify;
}
th {
background-color: #7a7878;
text-align:center
}`;
to:
var css = "table, td, th { \n\
border: 1px solid black; \n\
text-align:justify; \n\
} \n\
\n\
th { \n\
background-color: #7a7878; \n\
text-align:center \n\
}";
It is even better to make it:
var css = "table, td, th { \n"+
" border: 1px solid black; \n"+
" txt-align:justify; \n"+
"} \n"+
"th { \n"+
" background-color: #7a7878; \n"+
" text-align:center; \n"+
"}";
The reason that your css is not displayed is:
Once IE has processed all the styles loaded with the page, the only reliable way to add another stylesheet is with document.createStyleSheet(url)
See the MSDN article on createStyleSheet for a few more details.
edit
So in your case, you can add the above css code to table.css, upload it to your server. And at the moment you want to add the style, you use
document.createStyleSheet('http://yourserver.com/table.css');

how to uppercase multiple id (checkbox in php using javascript)

How to uppercase each j1 "click" then the f1 text change to uppercase, j2 "click" then the f2 text change to uppercase, et seq..
<table>
<form>
<?
$i=0;
foreach ($im as $row):
$i++;
?>
<tr>
<td><? echo $i;?></td>
<td><? echo $row['Something'] ?></td>
<td><input type="checkbox" id="j<? echo $i ?>" onclick="if(this.checked){myFunction()}"></td>
<td><input type="text" id="f<? echo $i ?>" value="Test"></td>
</tr>
<script>
function myFunction() {
document.getElementById("f"+<? echo $i ?>).value = document.getElementById("f"+<? echo $i ?>).value.toUpperCase();
}
</script>
<? endforeach; ?>
</form>
</table>
Pass the value of $i to the function and use it to identify the element. Try with -
<td><input type="checkbox" id="j<? echo $i ?>" onclick="if(this.checked){myFunction('<? echo $i ?>')}"></td>
And define the function -
<script>
function myFunction(i) {
document.getElementById("f"+i).value = document.getElementById("f"+i).value.toUpperCase();
}
</script>
You dont have to put the function inside the loop.
for another option, you don't need to declare "id" attribute in input text element, you can use "name" attribute http://jsfiddle.net/j4080ytq/
<form>
<table>
<?
$i=0;
foreach ($im as $row):
$i++;
?>
<tr>
<td><? echo $i;?></td>
<td><? echo $row['Something'] ?></td>
<td><input type="checkbox" onclick="if(this.checked){f<? echo $i; ?>.value = f<? echo $i; ?>.value.toUpperCase();}"></td>
<td><input type="text" name="f<? echo $i ?>" value="Test"></td>
</tr>
<? endforeach; ?>
</table>
</form>

How i can get value of specific cell if row is checked?

I have an HTML table. I need to get specific cell value if column is checked! For each row I have a checkBox.
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità </th>
<th>Quantità di alert</th>
<th>Stato</th>
<th>Quantità da ordinare</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php
foreach ($query as $row):
$quantitaDaOrdinare = $row->alert - $row->quantita;
if ($quantitaDaOrdinare > 0) {
?>
<tr id="<?php echo $row->aic; ?>" >
<td ><?php echo $row->aic; ?></td>
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td>
<input type="text" class="form-control auto" name="codiceFarmaco" value="<?php echo $quantitaDaOrdinare ?>"/>
</td>
<td> <label>
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> ">
</label></td>
</tr>
<?php
} else {
}
endforeach;
?>
</tbody>
I need (using javascript or jquery) to get, if a button is clicked, every value of cell that have name="nomeFarmaco" for every row that is checked! I try to call this function whe
function getValue(){
var nome = $('input[name="checkBox"]:checked').map(function() {
return $(this).parent().parent().parent().find('name="nomeFarmaco').val();
}).get();
return nome;}
but nome is an empty array! any ideas? thanks in advance!
You can put a custom attribute for the check box and set the value in this attribute.
Like this :
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> " customattr="<?php echo $row->denominazione ?>">
And you javascript function will be :
function getValue(){
var nome = $('input[name="checkBox"]:checked').attr('customattr');
return nome;
}
I think this is typo?
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
Change it to:
<td name="nomeFarmaco"><?php echo $row->denominazione ?></td>
And you are targetting a <td> and .val() won't work. Should be .text()
var name = [];
$('input[name="checkBox"]').click(function(){
if($(this).is(':checked')) {
name.push($(this).parent().parent().siblings('td[name="nomeFarmaco"]').text());
} else {
var index = name.indexOf(name);
name.splice(index, 1);
}
console.log(name);
});

Categories