How to add Value in jQuery - javascript

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
}
?>

Related

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);

drop down filtering using subpages from database

screenshot
the problem is ,if i select the drop down it has to filter the data according to dropdown, which needs template and application form. but there is a problem with javascript.it didn't works fine. didn't able to filter.
messed up with javascript and php. i cant able to find the problem. below is the php code and javascript.
javascript
$(document).ready(function() {
function addRemoveClass(theRows) {
theRows.removeClass("odd even");
theRows.filter(":odd").addClass("odd");
theRows.filter(":even").addClass("even");
}
var rows = $("table#myTable tr:not(:first-child)");
addRemoveClass(rows);
$("#selectField").on("change", function() {
var selected = this.value;
if (selected != "All") {
rows.filter("[position=" + selected + "]").show();
rows.not("[position=" + selected + "]").hide();
var visibleRows = rows.filter("[position=" + selected + "]");
addRemoveClass(visibleRows);
} else {
rows.show();
addRemoveClass(rows);
}
html & php
<select id="selectField">
<option value="All" selected>All</option>
<option value="Special">Special Needs Template</option>
<option value="Application">Application Form</option>
</select>
<table width="95%" border="0" cellpadding="5" cellspacing="0" id="myTable" class="table_fullwidth">
<tr><th width="15.8%">Application</th><th width="6%">Sequence</th><th width="22%">Group</th>
<th width="18%">Field</th><th width="20%">Description</th><th width="7%">Align</th><th width="6%">Allow Null</th><th width="6%">Edit</th>
</tr>
<div id ="table-filter">
<?php $i=1;
while ($myrow1 = DB_fetch_array($result)) {
if ($i % 2==0) $bkg='td1'; else $bkg='td2';
?>
<tr position="Special" id="trow_<?php echo $i;?>" class="<?php echo $bkg;?> ">
<td align="center"><input type="hidden" name="cur_id_<?php echo $i;?>" id="cur_id_<?php echo $i;?>" value="<?php echo $myrow1['id'];?>">
<input tabindex="<?php echo $i;?>_2" class="sel_long1 required" type="text" name="field1<?php echo $i;?>" id="field1_<?php echo $i;?>" value="<?php echo $myrow1['appd'] ;?>" readonly> </td>
<td align="center" ><input class="sel_long1 required" type="text" value="<?php echo $myrow1['sequence']; ?>" name="field2<?php echo $i; ?>" id="field2_<?php echo $i; ?>" ></td>
<td align="center" ><?php
$sql1 = "SELECT id, descr, lang FROM enr_applicationgroup1 WHERE lang =".$_SESSION['lang']." order by seq";
$result1= DB_query($sql1,$db);
?>
<select class="sel_long1 required" name="field3<?php echo $i; ?>" id="field3_<?php echo $i; ?>" >
<?php
while ($row1 = DB_fetch_array($result1)) {?>
<option <?php if ($myrow1['groupid']==$row1['id']) {?> selected="selected" <?php } ?> value="<?php echo $row1['id'];?>" ><?php echo $row1['descr'];?><?php }?></option>
</select></td>
<td align="center"><?php
$sql1 = "select * from wiz_dbtags where lang=".$_SESSION['lang']." and hide=0 and dbaseid=2 and rtrim(ltrim(tablename)) in (".$tablename.") order by description asc";
$result1= DB_query($sql1,$db);
?>
<select class="sel_long1 required" name="field4<?php echo $i; ?>" id="field4_<?php echo $i; ?>" >
<?php
while ($row1 = DB_fetch_array($result1)) {?>
<option <?php if ($myrow1['tagid']==$row1['id']) {?> selected="selected" <?php } ?> value="<?php echo $row1['id'].'_'.$row1['description'];?>" ><?php echo $row1['description'];?><?php }?></option>
</select></td>
<td align="center" width="17%"><input class="sel_long1 required" type="text" value="<?php echo $myrow1['description']; ?>" name="field5<?php echo $i; ?>" id="field5_<?php echo $i; ?>" ></td>
<td align="center" >
<select class="sel_long1 required" name="field6<?php echo $i; ?>" id="field6_<?php echo $i; ?>" >
<option <?php if ($myrow1['align']==1) {?> selected="selected" <?php } ?> value="1" > Center</option>
<option <?php if ($myrow1['align']==2) {?> selected="selected" <?php } ?> value="2" >Left</option>
<option <?php if ($myrow1['align']==3) {?> selected="selected" <?php } ?> value="3" >Right</option>
</select></td>
<td align="center"><input <?php if ($myrow1['oraseq']==1) echo 'disabled'; if ($myrow1['allownull']==1)echo 'checked';?> type="checkbox" name="field7<?php echo $i; ?>" id="field7_<?php echo $i; ?>" >
</td>
<td align="center" width="8%"><input <?php if ($myrow1['allowedit']==1)echo 'checked';?> type="checkbox" name="field8<?php echo $i; ?>" id="field8_<?php echo $i; ?>" >
</td>
<td align="center"> <img src="<?php echo $site_path;?>images/del.png" width="20" class="cur" title="Delete" onclick="deleteitem('<?php echo $myrow1['id'];?>');"></td>
</tr>
<?php
$i++;
}
$breakdown = $_POST['breakdown']+$num_rows;
$j=$num_rows+1;
I am not sure what's wrong with your code but here I wrote a clear code for you which will pretty much do what you are doing! Now go ahead and modify it accordingly for your own needs ! :P
NOTE : It's a different approach ! It doesn't use .filter(). You can always do the simple way. Try to not make things complex by involving too many things. Always think of the easiest and clear solution ! Use .show() and .hide() instead.
Here it is :
$(document).ready(function() {
$('select').on('change',function(){
if (this.value == "") {
$('tr').show();
}
if (this.value == "even") {
$('tr').show();
$('tr:nth-child(even)').hide();
}
if (this.value == "odd") {
$('tr').show();
$('tr:nth-child(odd)').hide();
}
if (this.value == "special") {
$('tr').show();
$('tr.special').hide();
}
});
});
table {margin-top:100px;border-collapse: collapse;}
th,td {border: 1px solid gray;padding: 10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
HIDE : <select>
<option value=""></option>
<option value="even">Even</option>
<option value="odd">Odd</option>
<option value="special">Special</option>
</select>
<table>
<tr>
<th>ODD</th>
<th>ODD</th>
<th>ODD</th>
</tr>
<tr>
<td>EVEN</td>
<td>EVEN</td>
<td>EVEN</td>
</tr>
<tr>
<td>ODD</td>
<td>ODD</td>
<td>ODD</td>
</tr>
<tr>
<td>EVEN</td>
<td>EVEN</td>
<td>EVEN</td>
</tr>
<tr>
<td>ODD</td>
<td>ODD</td>
<td>ODD</td>
</tr>
<tr class="special">
<td>SPECIAL BUT STILL EVEN</td>
<td>SPECIAL BUT STILL EVEN</td>
<td>SPECIAL BUT STILL EVEN</td>
</tr>
<tr class="special">
<td>SPECIAL BUT STILL ODD</td>
<td>SPECIAL BUT STILL ODD</td>
<td>SPECIAL BUT STILL ODD</td>
</tr>
<tr class="special">
<td>SPECIAL BUT STILL EVEN</td>
<td>SPECIAL BUT STILL EVEN</td>
<td>SPECIAL BUT STILL EVEN</td>
</tr>
</table>
UPDATE :
For to use it with database so you need to add classes to your different records which belongs to your 3 values of dropdown as (Assuming that $result holds data in array format from your Database) :
<?php
foreach ($result as $record) {
if ($record['type'] == "application") { $class = "application"; }
if ($record['type'] == "special") { $class = "special"; }
echo "<tr class='".$class."'></tr>";
}
?>
Then you can do it like this way in JS as :
$('select').on('change',function(){
if (this.value == "all") {
$('tr').show();
}
if (this.value == "application") {
$('tr').hide();
$('tr.application').show();
}
if (this.value == "special") {
$('tr').hide();
$('tr.special').show();
}
});

Adding new row with a dropdown box with values from database using javascript?

In my page I am trying to add a new row with a drop down which containing values from a database. For this I am using Javascript and ajax, but when I click the add new row button it is adding a first row perfectly, but when I am hitting same button for the second row that time a row is added but the drop down menu is empty. Can you please help me out.
function addworkexp(row)
{
var rowcount = $("#rowcount").val();
var i;
var row1 = "<tr><td style='border: 0px;'><input type=\"text\" class=\"form-control selectbxwidthsmall\" name=\"employer[]\"></td>";
row1 += "<td style='border: 0px;'><input type=\"text\" class=\"form-control selectbxwidthsmall\" name=\"jobtitle[]\"></td>";
row1 += "<td style='border: 0px;'><select style=\"display: inline-block;width: 80px;\" onchange=\"calculate('" + row + "')\" id=year_from_" + row + " class=\"form-control selectbxwidthsmall\" name=\"year_from[]\">";
row1 += "<option value=\"\">Select</option>";
for (i = 1994; i < 2014; i++)
{
row1 = row1 + "<option value=" + i + ">" + i + "</option>";
}
row1 += "</select>";
row1 += "<span style=\"display: inline-block;\">TO</span>";
row1 += "<select style=\"display: inline-block;width: 80px;\" onchange=\"calculate('" + row + "')\" id=year_to_" + row + " class=\"form-control selectbxwidthsmall\" name=\"year_to[]\">";
row1 += "<option value=\"\">Select</option>";
for (i = 1994; i < 2014; i++)
{
row1 = row1 + "<option value=" + i + ">" + i + "</option>";
}
row1 += "</select>"
row1 += "</td>";
row1 += "<td style='border: 0px;'><select class=\"form-control\" id=industry_" + row + " name=\"industry[]\"></select></td>";
$.ajax({
type: "POST",
url: "../server/getindustry.php",
success: function(data) {
$("#industry_" + row + "").html(data);
}
});
row1 += "<td style='border: 0px;'><input type=\"text\" class=\"form-control\" id=total_exp_" + row + " name=\"total_exp[]\"></td></tr>";
$("#workexp").append(row1);
rowcount = parseFloat(rowcount) + 1;
$("#rowcount").val("");
$("#rowcount").val(rowcount);
}
<table id="workexp" class="table">
<tr>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_emp_lang; ?><span class="text-error">*</span></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_jobtitle_lang; ?><span class="text-error">*</span></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_duration_lang; ?></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_indus_lang; ?></b>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<b><?php echo $jbs_workexp_totexp_lang; ?><span class="text-error">*</span></b>
</td>
</tr>
<?php for ($row = 0; $row < $rowcount; $row++) { ?>
<tr id="work_<?php echo $row; ?>">
<td style="border: 0px;padding-bottom: 0px;">
<?php $emparr = explode(",", $employercheck); ?>
<input class="form-control selectbxwidthsmall" type="text" name="employer[]" value="<?php echo $emparr[$row]; ?>"><br>
<span class="text-error" ><?php echo $error_msg['employer'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px; width: 134px;">
<?php $jobarr = explode(",", $jobcheck); ?>
<input class="form-control selectbxwidthsmall" type="text" name="jobtitle[]" value="<?php echo $jobarr[$row]; ?>"><br>
<span class="text-error" ><?php echo $error_msg['jobtitle'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px;">
<?php $yearfromarr = explode(",", $yearfromcheck); ?>
<select onchange="calculate('<?php echo $row ?>')" id="year_from_<?php echo $row; ?>" name="year_from[]" class="form-control" style="display: inline-block;width: 78px;">
<option value="">Select</option>
<?php for ($i = 1994; $i < 2014; $i++) { ?>
<option value="<?php echo $i; ?>" <?php if ($i == $yearfromarr[$row]) echo "selected"; ?> ><?php echo $i; ?></option>
<?php } ?>
</select>
<span style="display: inline-block;">TO</span>
<?php $yeartoarr = explode(",", $year_tocheck); ?>
<select onchange="calculate('<?php echo $row; ?>')" id="year_to_<?php echo $row; ?>" class="form-control selectbxwidthsmall" name="year_to[]" style="display: inline-block;width: 78px;">
<option value="">Select</option>
<?php for ($i = 1994; $i < 2014; $i++) { ?>
<option value="<?php echo $i; ?>"<?php if ($i == $yeartoarr[$row]) echo "selected"; ?>><?php echo $i; ?></option>
<?php } ?>
</select> <br>
<span class="text-error" > <?php echo $error_msg['yearfrom'][$row]; ?></span>
<span class="text-error" ><?php echo $error_msg['yearto'][$row]; ?></span>
</td>
<td style="border: 0px;padding-bottom: 0px; width:104px;">
<?php $industryarr = explode(",", $industrycheck); ?>
<select name="industry[]" id="industry_<?php echo $row; ?>" class="form-control">
<option value="">Select</option>
<?php for ($h = 1; $h <= count($industry_id); $h++) { ?>
<option value="<?php echo $industry_id[$h]; ?>" <?php
if ($industry_id[$h] == $industryarr[$row]) {
echo "selected";
}
?>>
<?php echo $industry[$h]; ?></option>
<?php } ?>
</select>
</td>
<td style="border: 0px;padding-bottom: 0px; width:72px;">
<?php $totalexparr = explode(",", $totalexpcheck); ?>
<input type="text" id="total_exp_<?php echo $row; ?>" name="total_exp[]" value="<?php echo $totalexparr[$row]; ?>" class="form-control" style="width:72px;">
</td>
<td style="border: 0px;padding-bottom: 0px;">
<?php $workid = explode(",", $workidheck); ?>
Delete
</td>
</tr>
<?php } ?>
</table>
<table class="table">
<tr>
<td style="border: 0px;padding-bottom: 0px;">Add Work Experience</td>
</tr>
<tr>
<td style="border: 0px;padding-bottom: 0px;">
<input type="hidden" name="rowcount" id="rowcount" value="<?php echo $rowcount; ?>">
<center>
<input class="btn btn-primary" type="submit" name="save" value="Save">
</center>
</td>
</tr>
</table>
Try appending the row first before the ajax call.
$("#workexp").append(row1);
$.ajax({
...
});
This will ensure that this call
$("#industry_" + row + "").html(data);
will successfully find the dropdown where to add the data.
Do you have any javascript errors or php errors?

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