I have a text input that holds email addresses, each one gets separated by a , to indicate a breaking point for php.
<input type="text" name="to" class="form-control">
Rather than having to retype every email address every time, I have came up with a table that holds all my email addresses and allows me to select the ones I want to send emails to.
<table class="table">
<thead>
<tr>
<th>
</th>
<th>
Client
</th>
<th>
Email
</th>
</tr>
</thead>
<tbody>
<?php foreach($clients as $client): ?>
<tr>
<td>
<input id="toList" name="to" type="checkbox">
</td>
<td>
<?php echo $client->name.' '.$client->last_name; ?>
</td>
<td>
<?php echo $client->email; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Add To Email
Now, I just need to figure out a way, using javascript that when the add button is clicked javascript adds all the values of all the checked checkboxes to the to input field dividing each one by ,.
hi i have created a jsfiddle for you..
code:-
$(document).ready(function() {
$("#btn").click(function() {
var checkedEmails = $("input[name=to]:checked").closest("tr");
var data = [];
$.each(checkedEmails, function() {
data.push($.trim($(this).find("td:eq(2)").text()));
});
var str = data.join(",");
$("#txt").val(str);
});
});
working example:-
http://jsfiddle.net/XUjAH/1102/
thanks
Change your checkbox to look like this
<input id="toList<?php echo $counter; ?>" class="email-check-box" name="to" type="checkbox" value="<?php echo $client->email;?>">
Javascript part
$(".add").on("click", function() {
$('.email-check-box').each(function () {
var current= (this.checked ? $(this).val() : "");
if(current) {
$(".form-control").val(
$(".form-control").val() + current+ ","
);
}
});
});
Related
I have an add button in a table for every row, which when clicked should print the price in the price column by multiplying the quantity entered by the user with the price of the product. But it is only working for the 1st row. How do I make it work?
<div class="container">
<div class="row">
<div class="bg-white">
<form method="POST">
<table class="table table-responsive" id="myTable">
<tr>
<th class="text-center">Item</th>
<th class="text-center">Qty</th>
<th></th>
<th class="text-center">Price</th>
<th class="text-center"></th>
</tr>
<body>
<?php
$i = 1;
foreach($_SESSION['cart'] as $name => $array){
$price = "select item_name, Item_price from item where item_name='$array'";
$result = mysqli_query($conn, $price);
while($rows = mysqli_fetch_array($result)){
$name = $rows['item_name'];
$pr = $rows['Item_price'];
?>
<tr>
<td class="text-center"><?php echo $name;?></td>
<td><input class="form-control" type="text" id="qty" style="width: 40px" name="ss"></td>
<td><button type="button" class="btn btn-success" onclick="values()">add</button></td>
<script type="text/javascript">
function values() {
var n1, n2, final;
n1 = parseFloat(document.getElementById('qty').value);
n2 = parseFloat(<?php echo $pr ?>);
final = n1*n2;
alert(final);
document.getElementById('qty').value = n1;
document.getElementById('val') = final;
}
</script>
<td id="val"></td>
<td><button type="button" name="remove" class="btn btn- danger btn_remove">X</button></td>
</tr>
<?php
}
$i++;
}
?>
</body>
</table>
</form>
</div>
</div>
You should first and foremost use prepared statements as mentioned in the comments. Make it a habit. Do it every time. It is important. And correct the tag issue.
You need to know that the function values is re-defined at every iteration of the loop, so all calculations are using the price of the last item. You should define the function exactly once. You should consider changing it to accept arguments, eg price and name. It will become clear why as you read on.
You could make the id's unique for each qty and val by adding the "name". Instead of
<input class="form-control" type="text" id="qty" ...
try something like
<input class="form-control" type="text" id="<?php echo $name.'_qty'; ?>" ....
And something similar for the val id.
Now, have the onclick take arguments, so instead of onclick="values()" when the button is created, something like onclick="values(<?php echo '\''.$name.'\','.$pr; ?>)" [all the ticks and \ are to quote the name, maybe there's a better way!].
The (one) values function can take the two arguments (function values(name,price) {), and it can "construct" the ids something like this
n1 = parseFloat(document.getElementById(name + '_qty').value);
The code I've supplied is sample only and not guaranteed syntax error free. You have a lot of typing and testing and retyping and retesting ahead of you. Slow and steady......
I have a table consist of 5 column: Code, Name, Qty, Price, and Total.
Code contain a dropbox menu which dynamically retrieve from another table. If user click the dropbox and select a code, name of the item will appear automatically in Name column.
For Total column, the value will appear from multiplying Qty and Price. The multiply script I used is:
<script language="javascript" type="text/javascript">
function multiply()
{
a=Number(document.calculator.qty.value);
b=Number(document.calculator.price.value);
c=a*b;
document.calculator.total.value=c;
}
</script>
My code for the table as below:
<table id="theTable" border="1">
<script>
var maxID = 0;
function getTemplateRow() {
var x = document.getElementById("templateRow").cloneNode(true);
x.id = "";
x.style.display = "";
x.innerHTML = x.innerHTML.replace(/{id}/, ++maxID);
return x;
}
function addRow() {
var t = document.getElementById("theTable");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
r.parentNode.insertBefore(getTemplateRow(), r);
}
</script>
<thead>
<tr>
<th> Code </th>
<th> Name </th>
<th> Qty </th>
<th> Price </th>
<th> Total </th>
<tr>
</thead>
<tbody>
<tr id="templateRow">
<td type="text" name="code" id="code"/readonly>
<?php
mysql_connect("localhost","root","");
mysql_select_db("inventory");
$result = mysql_query("select * from input_code_data");
$jsArray = "var code = new Array();\n";
echo '<select name="code" onchange="changeValue(this.value)">';
echo '<option></option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['code'] . '">' . $row['code'] . '</option>';
$jsArray .= "code['" . $row['code'] . "'] = {name:'" . addslashes($row['name']) . "',desc:'".addslashes($row['name'])."'};\n";
}
echo '</select>';
?>
</td>
<td><input type="text" name="name" id="name"/readonly>
<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('code').value = code[id].name;
document.getElementById('name').value = code[id].desc;
};
</script>
</td>
<td><input type="text" name="qty"></td>
<td><input type="text" name="price"></td>
<td><input type="text" name="total" /readonly><INPUT type="button" value="Click" onclick="javascript:multiply();"></td>
</tr>
</tbody>
</table>
<INPUT type='button' value='+' onclick="addRow('theTable')" />
If I click add row, then a new row will appear and the format is right. The problem is, when I select a code (from the dropbox) in second row, the name appear in the first row instead, not in the second row. Another problem, Click button for multiply isn't working in the second row.
Would anybody tell me how I fix this? Thanks.
It's because your changeValue(id) function is being called with the select field's value, not the row Id. Additionally, you're getting element by static id's instead of passing them in. HTML assumes that an Id will only appear once per page, you're breaking that so it always returns the first match.
EDIT for some example code:
This deals with some of the issues (if I'm understanding you properly). You might find the MDN docs helpful around how ids and other selectors work.
multiply suffers from the same issues as your original code, but you should be able to figure it out based on what is below:
<table id="theTable" border="1">
<thead>
<tr>
<th> Code </th>
<th> Name </th>
<th> Qty </th>
<th> Price </th>
<th> Total </th>
<tr>
</thead>
<tbody>
<tr class="templateRow" id="invoice-line-1">
<td class="code">
<select onchange="changeValue(this.value, 'invoice-line-1')">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<!-- etc. -->
</select>
<span></span>
</td>
<td class="name"></td>
<td><input type="text" name="qty"></td>
<td><input type="text" name="price"></td>
<td>
<input type="text" name="total" /readonly>
<input type="button" value="Click" onclick="javascript:multiply();">
</td>
</tr>
</tbody>
</table>
<input type='button' value='+' onclick="addRow('theTable')" />
<script type="text/javascript">
var codes = {
"1": {value: 1, name: "Option 1"},
"2": {value: 2, name: "Option 2"},
// etc.
},
numRows = 1;
function changeValue(value, id){
document.querySelector('#' + id + ' td.name').innerHTML = codes[value].name;
document.querySelector('#' + id + ' td.code > span').innerHTML = code[value].value;
};
function addRow() {
var newRow = document.getElementById("invoice-line-1").cloneNode(true),
table = document.querySelector("#theTable > tbody");
newRow.id = "invoice-line-" + (numRows = numRows + 1);
table.appendChild(rewRow);
document.querySelector("#invoice-line-" + numRows + " .code > select").setAttribute('onchange', "changeValue(this.value, 'invoice-line-" + numRows + "')");
}
</script>
Am very new to php and JavaScript. Am trying to round the value that i get from php and store that value in a JavaScript Variable and display it in a text input.
Below is my code:>
This is my order_stack.php file
<div class="order Page">
<h1>Order Entry</h1>
<form name="orderEntry" action="process_stack.php" method="post" >
<table>
<tr>
<th>
<label for="QUNTY">Quantity: </label>
</th>
<td>
<input name="quantity" type="text" id="QUNTY">
</td>
</tr>
<tr>
<th>
<label for="APW">Approx. PCS Weight: </label>
</th>
<td>
<input name="approxPcsWeight" type="text" id="APW">
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
This is my process_stack.php file
<?php
$quantity = $_POST["quantity"];
$ApxPCW = $_POST["approxPcsWeight"];
$quantity1 = $_REQUEST["quantity"];
$ApxPCW1 = $_REQUEST["approxPcsWeight"];
$knittingLT = ($quantity1 * $ApxPCW1) / 200;
?>
<fieldset class="new">
<legend>Entry Tracking Details</legend>
<p>
<table>
<tr>
<th>
<label for ="QTY">Quantity: </label>
</th>
<td>
<input name="quantity" type="text" readonly="readonly" id ="QTY" value=<?php echo $quantity?>>
</td>
</tr>
<tr>
<th>
<label for ="APW">Approximate PCS Weight: </label>
</th>
<td>
<input name="Approx_PCS_weight" type="text" readonly="readonly" id="APW" value=<?php echo $ApxPCW?>>
</td>
</tr>
<tr>
<th>
<label for = "KLT">Knitting Lead Time: </label>
</th>
<td>
<input name="Knitting_Lead_time" type="text" id ="KLT" >
<script>
var data = "<?php echo $knittingLT; ?>";
var roundedData = Math.round('data');
document.getElementById('KLT').value = roundedData;
</script>
</td>
</tr>
</table>
</p>
</fieldset>
What am doing here is, i multiply both Quantity and Approx. PCS Weight and divide the obtained value by 200. Then i store the value in $knittingLT.
Now in process_stack.php, i want to update the Knitting Lead Time(which is a JS variable) by taking $knittingLT(which is a php variable) and round up the data and store it in Knitting Lead Time.
When i run the files, the Knitting Lead Time field is empty.
Is my approach toward this problem is wrong?
Kindly help me to solve this issue.
Thanks.
I guess the problem is that you are trying to round the string literal 'data'.
Instead of
var roundedData = Math.round('data');
write
var roundedData = Math.round(data);
You are rounding a string with the word 'data'.
Instead of Math.round('data'); use Math.round(data);.
Also, you are making the PHP outcome a string by putting it between quotes. Although you can use Math.round on a string, it is better to make it a number to prevent confusion.
20 == '20' // true
20 === '20' // false
Try:
var data = <?php echo $knittingLT; ?>;
<script>
var data = <?php echo $knittingLT; ?>;
var roundedData = Math.round(data);
document.getElementById('KLT').value = roundedData;
</script>
Change Math.round('data'); to Math.round(data);
Math.round() expect a number not a string.
Try this
var roundedData = Math.round(data); //edited this line 'data' to data
document.getElementById('KLT').value = roundedData;
$(document).ready(function() {
var maxField = 10;
var addButton = $('.add_button');
var wrapper = $('.field_wrapper');
var fieldHTML = '<div><input type="text" name="Tape_Code[]" value=""/>delete</div>';
var x = 1;
$(addButton).click(function() {
if (x < maxField) {
x++;
$(wrapper).append(fieldHTML);
}
});
$(wrapper).on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
<?php
include_once 'dpconnect.php';
$que=mysqli_query($MySQLiconn,"select Backup_Name from admin_backup_list ");
if(isset($_POST['confirm'])) {
$Date=date('d/m/y');
$Backup_Name=$_POST['Backup_Name'];
$Tape_Code = $_POST['Tape_Code'];
$Operator_Approval = $_POST['Operator_Approval'];
$Operator_Remark = $_POST['Operator_Remark'];
$abc=mysqli_query($MySQLiconn,"insert into backup_details(Date, Backup_Name, Tape_Code,Operator_Approval,Operator_Remark)values('$Backup_Name','$Tape_Code','$Operator_Approval','$Operator_Remark')");
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<?php $Date=date( 'd/m/y'); ?>
<form name="form2" action="" method="post">
<table>
<tr>
<td width="103">Date</td>
<td width="94">Backup_Name</td>
<td width="94">No Of Tapes</td>
<td width="53">Tape Code</td>
<td width="71">Operator Approval</td>
<td width="144">Operator Remark</td>
</tr>
<?php if ($que->num_rows > 0) { while ($row = mysqli_fetch_array($que)) { ?>
<tr>
<td>
<?php echo $Date; ?>
</td>
<td>
<?php echo $row[ 'Backup_Name']; ?>
</td>
<td>
<input type="text" name="No_Of_Backup">
</td>
<td>
<div class="field_wrapper">
<input type="text" name="Tape_Code" value="" />add
</div>
</td>
<td>
<input type="text" name="Operator_Approval">
</td>
<td>
<input type="text" name="Operator_Remark">
</td>
<td colspan="8">
<input type="submit" name="confirm" value="Confirm">
</center>
</td>
</tr>
<?php } } ?>
</table>
</form>
</body>
</html>
I'm doing this code in php. I need a help to add text fields dynamically in to the table's particular column. I have done the code using JavaScript also. But the problem is when I add field in one row, all rows are updating with extra fields. I need a help. How can I insert those data to MySQL?
The problem with your code is that you are using the class selector to select the elements. Class selector returns array like object of all the elements having that class.
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
you can find out which element was clicked if you change your code similar to below one.
add
and in the script
function addButton(ev) {
var clickedElement = console.log(ev.target);
}
Now you have the element which was clicked by user and you can find the parent td/tr and append html for textbox.
In $Tape_Code = $_POST['Tape_Code']; You will get array of text input you have to insert it in database in form that you want.
$Tape_Code = $_POST['Tape_Code']
foreach($Tape_Code as $code){
echo $code;
}
I am trying to autopopulate an input field (location-name) with the value entered in another field (location-address). I have looked online everywhere and managed to make the JS snippet work on a straightforward example, but for some reason this is not working with the following php code.
Just to clarify, I would like the value entered in "location-address to be passed to "location-name".
<script>
$('#location-address')
.keyup(function() {
var value = $(this).val();
$('#location-name').text(value);
})
.keyup();
</script>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<?php _e ( 'Address:', 'dbem' )?> </th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
Firstly your code needs to be placed in a document.ready handler. Secondly, you need to use val() not text() to set the value of an input field.
$(function() {
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val(value);
}).keyup();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="em-location-data-name">
<th style="padding-top: 14px;">
<?php _e ( 'Event unique identifier:', 'dbem' )?>
</th>
<td>
<input id="location-name" type="text" name="location_name" />
</td>
</tr>
<tr class="em-location-data-address">
<th style="padding-top: 14px;">
<? php _e( 'Address:', 'dbem') ?>
</th>
<td>
<input id="location-address" type="text" name="location_address" value="<?php echo esc_attr($EM_Location->location_address, ENT_QUOTES); ; ?>" />
</td>
</tr>
</table>
You need to wrap your jQuery code in $(document).ready(); so that jQuery binds all HTML elements.
Corrected code:
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
}).keyup();
</script>
Use this
<script>
$(document).ready(function(){
$('#location-address').keyup(function() {
var value = $(this).val();
$('#location-name').val( value );
});
});
</script>