I have table in my PHP file which is looks like this.
<div class="table-main" style="width:600px;" id="data-table-grid">
<table class="font order">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td colspan="4">
<span class="tdlist head">Party packs</span>
</td>
</tr>
<tr>
<td>
<span class="tdlist">Tango Pack</span>
</td>
<td>
$<span class="price">60</span>
</td>
<td>
<input type='text' class="item_input text-box" maxlength=9 name='item1' value='0' id='item2' style="width:60px;" />
</td>
<td>
<span></span>
</td>
</tr>
<tr>
<td>
<span class="tdlist">Gala Pack </span>
</td>
<td>
$<span class="price">100</span>
</td>
<td>
<input type='text' class="item_input text-box" maxlength=9 name='item2' value='0' id='item2' style="width:60px;" />
</td>
<td>
<span></span>
</td>
</tr>
I want to send this table output same as in mail with the filled data. I tried with this:
var msg = $("#data-table-grid").prop('outerHTML');
and I send mail and I got table format but I got an empty table. I want to get mail with the filled values.
Can anyone help me?
Turn the whole thing into a string and add it to the body of your mail. Change the "double quotes" too 'single quotes' and will work, just a little time consuming.
$mystring = "<Everything in here>";
If you have this php file seperate in directory than use
$str=file_get_contents(file path);
Now if you want to change some variable n this string tjan you can replace that too.
For examplr at first we define some special syntax in data file to be included such as ~~full_name~~.
Than now you can replace it dynamically here in mail sending page such as
$str = Str_replace("~~full_name~~", $fullName, $str);
And now you can use this above variable $str as body part of your email.
And one more important thing to keep in mind that in headera of your mail set content-type="text/html"
first of all, your table and div closing tags are missing. i hope in your original code you have them
also, #data-table-grid is your div not your table, so getting outer html will get the div as well, which you dont need.
you can do
var msg = $("#data-table-grid").html():
which will take the div's innerHTML which includes the table with values.
if you still need the div too however, refer to its parent's inner html as follows:
var msg = $("#data-table-grid").parent().html():
Related
This question already has answers here:
How to save and retrieve contenteditable data
(2 answers)
Closed 1 year ago.
I have different content editable in my html file. I have a couple of labels, and a couple of tables with content editable as well.
I want to send the info to a database after user focus out, no buttons to trigger the action.
This is part of my html:
<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
<input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
<tr>
<td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>
I'm new to programming, and I'm trying to figure the best way to get the contenteditable information, and send it to my database. I know I have to use Javascript, Ajax, and send it to a PHP file based on the information I've researched. The PHP part is not a problem for me, but I need a little help with the Javascript and AJAX parts because everything I tried so far has not retrieved any results.
Thank you.
A simple example of how to do this might be to assign a blur event listener bound to all elements that have the contenteditable attribute set and use fetch api to send the AJAX request using a FormData object to your backend PHP script.
const getparent=(e)=>{
let n=e.target;
while(n.tagName.toLowerCase()!='span' && n.className!='record'){
if(n.tagName=='BODY')return false;
n=n.parentNode;
}
return n;
}
document.querySelectorAll('[contenteditable="true"]').forEach(el=>{
el.addEventListener('blur',function(e){
let span=getparent(e);
if( !span )return;
let fd=new FormData();
fd.set('userid', span.querySelector('[name="userId"]').value );
fd.set('text', this.textContent );
fd.set('id', this.id );
fetch( 'https://www.example.com', { method:'post', body:fd, mode:'cors' })
.then( r=>r.text() )
.then( text=>{
console.log( 'Do something with returned response: %s',text )
})
})
})
.record{
display:block;
margin:1rem;
border:1px solid red;
padding:1rem;
}
<span class='record'>
<label id="label-1" contenteditable="true">Hello World</label>
<table>
<input type="hidden" name="userId" value="123456789">
<tr>
<td id="row-1" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" contenteditable="true">A message from the Bottom</div>
</span>
<span class='record'>
<label id="label-2" contenteditable="true">World Hello</label>
<table>
<input type="hidden" name="userId" value="987654321">
<tr>
<td id="row-2" name="secondRow" contenteditable="true">This is second row</td>
</tr>
</table>
<div class="footer" contenteditable="true">A bottom from the Message</div>
</span>
It's not an "out of the box" answer, but a skeleton : you can listen for an element lost the focus, ie the user is no more typing in it.
let edit = document.getElementById("firstRow");
edit.addEventListener("blur", function(e) {
console.log("You can send to php");
// please have a look here for ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX
});
<label id="firstLabel" contenteditable="true">Hello</label>
<table id="firstTable">
<input type="hidden" name="userId" id="userid" value="<?php echo $userId ?">
<tr>
<td id="firstRow" name="firstRow" contenteditable="true">This is first row</td>
</tr>
</table>
<div class="footer" id="footer" contenteditable="true">Bottom message</div>
I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().
Hi I fetching some data from database and constructing the table.
foreach($data_array->LINEDETAILS as $data){
if(empty($data->CREDITEDAMOUNT)){
$data->CREDITEDAMOUNT=0;
}
$linetotal='';
$linetotal = $data->LINEAMOUNT + $data->TAXAMOUNT;
$column='<td>
<input onclick="sum_value(\''.trim($data->LINEAMOUNT).'-'.$data->TAXAMOUNT.'\',this.checked)" type="checkbox" name="checkdata'.$i.'" id="checkdata'.$i.'" value="'.$data->CUSTOMERTRXLINEID.'"style="position: inherit;" checked />
</td>
<td>'.$data->DESCRIPTION.'</td>
<td>'.$data->ORIGINALLINEAMOUNT.'</td>
<td>'.$data->CREDITEDAMOUNT.'</td><td>'.$data->LINEAMOUNT.'<input type="text" value="'.$data->LINEAMOUNT.'" hidden="true"></td>
<td>'.$data->TAXAMOUNT.'</td><td>'.$linetotal.'</td>
<td>
<select>
<option>--</option>
<option>%</option>
<option>Area</option>
<option>Period In Months</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>';
$row .= '<tr>'.$column.'</tr>';
$grandtotal = $grandtotal + $data->LINEAMOUNT + $data->TAXAMOUNT;
$i++;
}
This code returns one to many lines of data.
Each like has a dropdown of 3 value based upon which calculations will be done. If I select as % and Credit value as 80%, the approved line amount should be calculated onblur 80% of Eligible line amount.
I tried to set id's for each elements and do the math using JavaScript it won't calculate and give the result. it gives an error since ID of an element should be unique and since the elements are looped the ID also gets looped. Please help.
Give a try for : "onChange" of the dropdown value and then fetch the % value and calculate in your javascript code and display on the filed that is required, and mark the field as read-only if you want it "not" to be changed.
You can dynamically add id for each element as in the loop.. abd after that fetch all the records till the max value or iteration (say i)
You can add a class on each input field. For eg.
jQuery('.credit_val').change(function(){
var eligible = parseFloat(jQuery(this).parents('tr').find('.eligible_line').text());
var credit = parseFloat(jQuery(this).val());
jQuery(this).parents('tr').find('.approve_amount').val(eligible*credit/100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="eligible_line">1000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
<tr>
<td>
<div class="eligible_line">2000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
</table>
How do I go about getting a reference to an element nested inside another element I can find by getElementByID()?
I have this so far:
<table>
<tr id="templateRow" style="display: none;">
<td><input name="f_name[]" type="text"></td>
<td><textarea name="f_description[]" rows="4"></textarea></td>
<td><input name="f_category[]" type="text"></td>
</tr>
</table>
and have some JS that adds in copies of that to build out the table (removing the id and style attributes as I go).
Assuming I have a reference to the <tr>, how do I reference the input named f_name[] within that table row?
Background: For the moment I have temporary id's on the nested elements, removing them too as I go. The tricky situation I have is that I have a function that adds 1 row (and returns a reference to it), and another function that adds multiple rows (calling the addOneRow function) .. and I want the addManyRows function to end up setting the focus on the first row added.
In any reasonably recent browser, you can use the querySelector method to query for children of the element.
Example:
var templateRow = document.getElementById('templateRow');
var f_name = templateRow.querySelector('[name="f_name[]"]');
var f_description = templateRow.querySelector('[name="f_description[]"]');
var f_category = templateRow.querySelector('[name="f_category[]"]');
console.log(f_name.outerHTML);
console.log(f_description.outerHTML);
console.log(f_category.outerHTML);
<table>
<tr id="templateRow" style="display: none;">
<td><input name="f_name[]" type="text"></td>
<td><textarea name="f_description[]" rows="4"></textarea></td>
<td><input name="f_category[]" type="text"></td>
</tr>
</table>
Use Element#querySelector method and where use attribute equals selector to get based on the attribute.
tr.querySelector('td input[name="f_name[]"]')
var tr = document.getElementById('templateRow');
tr.querySelector('td input[name="f_name[]"]').style.color = 'red';
<table>
<tr id="templateRow" style="">
<td>
<input name="f_name[]" type="text">
</td>
<td>
<textarea name="f_description[]" rows="4"></textarea>
</td>
<td>
<input name="f_category[]" type="text">
</td>
</tr>
</table>
enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.
It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})