I have the table in the below format.
FirstName Last Name
Jill Smith
Eve Jackson
Also i have Form for updating the firstname & lastname. This is the form code.
<!DOCTYPE html>
<html>
<body>
<form border="1">
<tr>
<td><label >FirtsName</label></td>
<td><input type="text" id="firstname" class="medium"></td>
</tr>
<tr>
<td><label >LastName</label></td>
<td><input type="text" id="lastname" class="medium"></td>
</tr>
</form>
</body>
</html>
How to send the table data to a form using jquery or javascript. Any help will be much appreciated!
Thanks & regards
Karthick
I'm not an expert in js, but you could submit the form each time the input looses the focus
Use <form name="myform" border="1">
and :
<input type="text" id="firstname" class="medium" onBlur="document.forms["myform"].submit()">
there's probably better ways to do this but here's just an idea...
-- Edit : --
sorry i forgot something important : you have to name your form like this :
<form name="myform" action="file.php">
I'm not very good in english, so maybe I don't understand well enough, but to do what you want, I would do like this :
First things first, you should improve your HTML code, this will make the job a lot easier :
In your users table :
<table> </table>: add an id to handle it more easly with jQuery : $('#id') method
ex: <table id="users"></table>
<thead><tr><th> </th></tr></thead><tbody> </tbody>: use this markups allow you to distinguish table header from table content
<tr> </tr>: add an id on the server side to know who is who (i.e : if you have two John Smith)
ex: <tr id="name_01"><td>...</td></tr>
<td> </td>: add a class attribute to know where is the firstname and the last name
ex: <td class="firstname">...</td><td class="lastname"></td>
In your form :
<form> </form>: add an id to grab it more easly too
ex: <form id="usersform"></form>
<table> </table> : don't forget the <table> markup !
<label> </label>: add the for attribute matching the input id
ex: <label for="firstname" >FirtsName</label>
Now, your table should look like this :
<table id="users">
<thead>
<tr>
<th>Firstname</th><th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="name_01">
<td class="firstname">Jill</td><td class="lastname">Smith</td>
</tr>
<tr id="name_02">
<td class="firstname">Eve</td><td class="lastname">Jackson</td>
</tr>
</tbody>
</table>
There are several ways for make what you want, but, basically, there is two main ways :
Have only one of the table entry in the form at a time
Have all of the table entries
I - Only one table entry at a time
HTML
<form id="usersform" name="usersedit" >
<table id="users">
<tr>
<td><label for="firstname" >FirtsName</label></td>
<td><input type="text" id="firstname" class="medium"></td>
</tr>
<tr>
<td><label for="lastname" >LastName</label></td>
<td><input type="text" id="lastname" class="medium"></td>
</tr>
</table>
</form>
jQuery :
//When there is a click on a line of the table
$('#users tbody tr').click(function(e) {
//Get the <tr> id
userid = $(this).attr('id');
//Put the value of the firstname cell in the firstname input
$('#usersform input#firstname').val($(this).find('td.firstname').html());
//You can add a name attribute or an id for later works
$('#usersform input#firstname').attr('name','first'+userid);
//Now for the lastname input
$('#usersform input#lastname').val($(this).find('td.lastname').html()).attr('name','first'+userid);
}
II - All table entries
HTML
<form id="usersform" name="usersedit" >
<table id="users">
<thead>
<tr>
<th>Firstname</th><th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
jQuery :
//When there is a click on the table (#users) :
$.('#users').click(function(e){
//handle the part of the form where we want to add input field
myformtable = $('#userform table tbody');
//For each row in the table
$.('#users tbody tr').each(function(e) {
//Create and append a new line
userline = $(document.createElement('tr'));
userline.appendTo(myformtable);
//Create and append a firstname cell
tdfirstname = $(document.createElement('td')).addClass('firstname');
tdfirstname.appendTo(userline);
//Create and append a firstname input
firstname = $(document.createElement('input')).addClass('medium');
firstname.appendTo(tdfirstname);
//Add attribute
firstname.attr({type: 'text', name: 'first'+$(this).attr('id')});
//Set value
firstname.val($(this).find('.firstname').html());
//Same things with the lastname
tdlastname = $(document.createElement('td')).addClass('lastname');
tdfirstname.after(tdlastname);
lastname = $(document.createElement('input')).addClass('medium');
lastname.appendTo(tdlastname);
lastname.attr({type: 'text', name: 'last'+$(this).attr('id')});
lastname.val($(this).find('.lastname').html());
}
}
You can improve it with a loop, or use css pseudo-class to handle your table cells or form inputs, but I thought it was easier to understand this way.
Related
I'm doing a simply project on intellij with spring boot and i did a table with an input for the searches. What I want is to show a message whene the search fails and no results are found. How can I do it?
This is my table:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" class="table table-striped">
<thead class = "thead-dark">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
</table>
</div>
And this is the script I use for the research:
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
The question is, how can you do that in the templating engine you use. It's not really a Spring question, or HTML or JavaScript for that matter.
You should be able to check if allPatients is empty and then render something. If you use thymeleaf and want to do it server side:
<tr th:if="${#lists.isEmpty(allPatients)}">
<td>no patients found...</td>
</tr>
<tr th:each="patient : ${allPatients}">
...
If you want to do it in the JavaScript logic, you posted, which looks like it uses jQuery, do something like this:
after filtering the rows, check if the result is empty
if so, add another row to render the empty message, e.g.:
$('#mytable').append('<tr id="empty-message"><td>no patients found...</td></tr>');
if the result is not empty, remove #empty-message
Alternativley, you can always add the row, but use show() and hide() insteaf of append and remove.
I am using JS/Jquery to dynamically add rows to by Table. Here is a template that I found online:
<table id="tblCustomers" cellpadding="0" cellspacing="0" border="1">
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" /></td>
<td><input type="text" id="txtCountry" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
From what I gather, in order to ensure that the actual cell content values get passed on Post I need to assign them to hidden fields.
How do I read the actual contents of the cells.
I tried:
$("#submitForm").click(function(){
alert("submit Clicked");
$('#tblCustomers tfoot td').each(function() {
var cellText = $(this).html();
});
});
however, All I got was this as return value:
Can you let me know what I need to do to get actual value of cell.
I need to make a dynamic table/item list and i would like to send the list of items back to server for processing. Sort of like a purchase list etc..
BTW: the backend is Django 2.0
Thanks for your help.
Tanmay
this is my first question in stackoverflow, in my html page i have a table, i want to send data to the servlet using modal form. But, i have this error :Uncaught TypeError: Illegal invocation.
table.html
<body>
<table border="1">
<tr>
<th>ID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
<tr>
<td>1</td>
<td>JHON</td>
<td><input type="button" value="display" class="d"></td>
</tr>
<tr>
<td>2</td>
<td>Max</td>
<td><input type="button" value="display" class="d"></td>
</tr>
</table>
<div id="dialog-form">
<input type="text" value="" id="id">
<input type="text" value="" id="name">
</div>
<div id="res"></div>
</body>
test.js
$(".d").click(function(){
var id =$("#id").attr("value",$(this).parent().prev().prev().text());
var name =$("#name").attr("value",$(this).parent().prev().text());
$("#dialog-form").dialog({
modal: true,
buttons: {
"Send":function () {
$.post("Controller",{id:id,name:name},function(data){
$("#res").html(data);
}) ;
}
Servlet.java
String name=request.getParameter("name");
String id=request.getParameter("id");
out.println(id +" "+ name);
I guess you are trying to modify the value and update it in the backend.
var id =$("#id").attr("value",$(this).parent().prev().prev().text());
var name =$("#name").attr("value",$(this).parent().prev().text());
This will assign the objects to the variables id and name. You cannot send them in ajax and you don't need to. Hence the error.
In your case, you need to update the modal text box with the id and name values and send them to the server. Also do note that since it is a text box, you need to send the updated value which the user might have changed.
Hence we do the following changes.
First we just set the id and name values in the text box present in the modal
$("#id").attr("value", $(this).parent().prev().prev().text());
$("#name").attr("value", $(this).parent().prev().text());
Then in the ajax post, we send the updated value taken from the text box
$.post("Controller", {
id: $("#id").val(),
name: $("#name").val()
}, function (data) {
$("#res").html(data);
});
Here is the working code http://jsfiddle.net/xec61c0m/
How to correctly copy/clone a html table with javascript and submit it to php, where it will be converted to PDF and XLS documents?
So far I have a html something like this:
<table class="planning-table">
<thead>
<tr>
<td>blah blah</td>
</tr>
</thead>
<tbody>
<tr>
<td>blah blah</td>
</tr>
</tbody>
</table>
<form id="exportPDFform" method="post">
Eksport
<input id="table_data" type="hidden" name="table" value="" />
</form>
and jquery:
$("#exportPDF").on("click", function (){
var value = $('.planning-table').clone();
$("#table_data").val( escape( value ) );
$("#exportPDFform").submit();
return false;
});
Now, the cloning works, but, when put inside input field, it gives me:
[object-Object]
How do I correctly do this?
PS: the form gets changed/created dinamically when selecting different filters, so it would be much easier to use the final product then to recreate it on PHP side.
Presumably escape() takes a string whereas you are providing a jQuery object. When you try and cast an object to a string javascript gives you "[object Object]". Instead, you need to retrieve the HTML value of the table, like this:
var value = $('.planning-table').clone().wrap('<div />').parent().html();
I do not think you want to use the Clone() function, instead I think you want to get the HTML content of an element, but using the .html() function on an element above the table.
<div id="table-container">
<table class="planning-table">
<thead>
<tr>
<td>blah blah</td>
</tr>
</thead>
<tbody>
<tr>
<td>blah blah</td>
</tr>
</tbody>
</table>
</div>
<form id="exportPDFform" method="post">
Eksport
<input id="table_data" type="hidden" name="table" value="" />
</form>
and
$("#exportPDF").on("click", function (){
var value = $('#table-container').html();
$("#table_data").val( escape( value ) );
$("#exportPDFform").submit();
return false;
});
I have an html code like this -
<table border="0" cellspacing="2" cellpadding="2" width="99%" id="subAccTable">
<tr>
<h2>Sub Accounts</h2>
</tr>
<tr>
<th>action </th>
<th>account</th>
<th>homeDir</th>
<th>primaryGroup</th>
</tr>
<tr>
<td><input type="hidden" name="vtierId" value="" /></td>
<td><input type="text" name="subAcc"
value=""/></td>
<td><input type="text" name="subHomeDir"
value=""/></td>
<td><input type="text" name="subPriGroup"
value=""/></td>
</tr>
</table>
Now i want to fill the values of textboxes named subAcc, subHomeDir, subPriGroup using javascript. How can i do it ?
There are multiple ways to get the proper DOMElement; including:
Giving each element an id and getting it using document.getElementById
Using document.getElementsByName. This is not preferred since there can be multiple elements with the same name, however there can be only one with the same id.
Using the form directly. For example if your form's name is form1: form1.subAcc
Using document.getElementsByTagName('input') and then getting the proper index.
I'd recommend using the id to retrieve the proper element.
The easiest way would be to give these textboxes a unique id, then reference them like this:
<input type="text" id="subHomeDir" name="subHomeDir" value=""/>
var tb = document.getElementById("subHomeDir");
tb.value = "foo";
If you're stuck with the names only, then you can use document.getElementsByName, just remember, this will return a collection of elements (since names are not necessarily unique), which you'll have to index:
var tb = document.getElementsByName("subHomeDir")[0];
tb.value = "foo";