I will create table row in javascript , in table row I have some input field and now I want to access data from this fields using thymeleaf
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
You need to add a name to each input and then on your controller, ask for those parameters. Let's assume you you expected url is /edit.
JS
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="" name="id">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea id="description" name="description"></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
Controller
#RequestMapping(value = "/edit", method = RequestMethod.POST)
public String edit(#RequestParam("id") String id,
#RequestParam("description") String description { ... }
Save (JS)
Now, since you don't have a form, if you want to submit your data, you will need one. In this case, we will do it using javascript.
function save() {
// First, let's create the form.
var form = document.createElement("form");
form.method = "POST";
form.action = "/edit";
// Now, let's add the inputs.
var id = document.getElementById('id');
var description = document.getElementBy('description');
form.appendChild(id);
form.appendChild(description);
// Submit the form.
document.body.appendChild(form);
form.submit();
}
Another, more easy way, would be to wrap your html code in a form. Of course, you would need to duplicate your code, since you would need both the edit and the delete form.
Hope it helps.
Related
three state toggle button whose functionality is different in each row in table.and store their value in array foam.like in first row i select toggle button on and in next row i will select off. all these value store in array foam
<script type="text/javascript">
var i = 1;
$(".add-row").click(function(){
var table = document.getElementById("choose-address-table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var val = ++i;
cell1.innerHTML = "<input type='text' name='key_performance[]' id='key_performance' >";
cell2.innerHTML = "<input type='text' name='target[]' id='target'>";
cell3.innerHTML = "<input type='text' name='actual[]' id='actual'>";
cell4.innerHTML = '<div id="rates"><input type="radio" id="r1" name="rate'+(val)+'" value="1"><input type="radio" id="r2" name="rate'+ (val)+'" value="0"><input type="radio" id="r3" name="rate'+(val)+'" value="2" checked="checked"></div>'
});
</script>
<script>
var data4 = new Array();
$("input[type=radio]:checked").each(function()
{
var ttt = $(this).val();
data4.push(ttt);
});
I am trying to create drop-down box dynamically, here I can create dynamically drop-down boxes but after that, I need to load the values from DB, so I need to do on-click function. Here I try the using dynamic id but it is not working how to solve this.
$( document ).ready(function() {
$("#ssr").click(function(){
alert("Test");
load_shift_code();
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
for(var i=0;i<4;i++){
var a=["html","css","java","javascript","php","c++","node.js","ASP","JSP","SQL"];
var employee_name =emp_name();
var table_body = document.getElementById("table_head");
var row = table_body.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2)
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5)
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
var cell12 = row.insertCell(11);
var drop_down_list =document.getElementById("select");
var idx="ssr";
cell1.innerHTML = employee_name[i];
cell2.innerHTML = employee_name[i];
cell3.innerHTML = "<select id='" + idx +"'><option value='default'>default</option></select>";
cell4.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell5.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell6.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell7.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell8.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell9.innerHTML = "<select id='select'><option value='default'>default</option></select>";
cell10.innerHTML ="<select id='select'><option value='default'>default</option></select>";
cell11.innerHTML ="<select id='select'><option value='default'>default</option></select>";
}
});
Put the code to add the event listener to the element with id ssr after the code that creates the element and puts it in the DOM. As posted $("#ssr") won't find anything.
I have some code that is printing out a customers order on an order confirmation screen. It is doing this using Javascript to populate a table with the information. Ideally I would like to do this in JQuery
This is my HTML
<!-- Order Confirmation Form -->
<form action="<?the_permalink()?>" method="post">
<div id="summary">
<table id="ordertable">
<tr><th>Product</th>
<th>Quantity</th>
<th>Bulk</th>
<th>Options</th>
</tr>
</table>
<!-- Comments Box -->
Comments<br/>
<textarea name="comments"></textarea><br/>
<input name="product_list" id="products_field" type="hidden" value="<?= isset($_POST['product_list'])?$_POST['product_list']:'' ?>">
Next Day Delivery <input type="checkbox" name="next-day-delivery" value="yes" />
<input type="submit" value="Confirm Order" class="confirmBtn"/>
</div>
</form>
This is my JS
//Reference to the order table
var ordertable = document.getElementById("ordertable");
//Loop through the Array and display in the table
for(var i = 0; i < productArray.length; i ++){
//This is the data to display
console.log("Order Item " + i);
console.log("StockCode: " + productArray[i].stockCode);
console.log("Quantity: " + productArray[i].quantity);
console.log("Bulk: " + productArray[i].bulk);
var row = ordertable.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = productArray[i].stockCode;
cell2.innerHTML = productArray[i].quantity;
cell3.innerHTML = productArray[i].bulk;
cell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
}
This is an image of my page, I can't seem to figure out how I could add a select box to the cells below bulk (outlined in red). The idea being if bulk == true display a select box else don't show anything. (Some products can be ordered in bulk.)
Does anyone have any suggestions as to how I might go about achieving this?
Maybe simply something like
if(productArray[i].bulk)
cell3.innerHTML = "<select><option>1</option>..</select>";
Try like this
cell3.innerHTML = (productArray[i].bulk)?'<select><option value="...">...</option></select>':'';
Try this,
var select = '<select><option value="1">1</option><option value="2">2</option></select>';
cell3.innerHTML = productArray[i].bulk?select: '';
or just
cell3.innerHTML = productArray[i].bulk? '<select><option value="1">1</option><option value="2">2</option></select>' : '
for(var i = 0; i < productArray.length; i ++){
//This is the data to display
console.log("Order Item " + i);
console.log("StockCode: " + productArray[i].stockCode);
console.log("Quantity: " + productArray[i].quantity);
console.log("Bulk: " + productArray[i].bulk);
var row = ordertable.insertRow(i + 1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = productArray[i].stockCode;
cell2.innerHTML = productArray[i].quantity;
if(productArray[i].bulk) // true means select
cell3.innerHTML = "<select><option>1</option>..</select>"
else
cell3.innerHTML = '';
ell4.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
}
How to add a table row with a text input inside the table field?
var table=document.getElementById("myTable");
var rowCount = table.row.length;
var row=table.insertRow(rowCount);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML += "<td class='align-center'>1</td>";
cell2.innerHTML += "<input type='text' class='input-long' name='newcategoryname' value='New Category' onfocus='if(this.value == \"New Category\"){ this.value = \"\"; }' onblur='if(this.value==\"\"){this.value=\"New Category\";}'/>";
You have to create input element by using createElement method,
try this
var cell1 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
cell1.appendChild(element1);
Hi I have a table structure
<table id ="tbl1" >
<thead>
<tr>
<td></td>
<td>
<button class="btn-danger btn fileinput-button" type="button">-</button></td>
</tr>
</thead>
</table>
I have to build dynamic rows in javascript...I am using the below code to generate..
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = filename;
var cell2 = row.insertCell(1);
var element2 = document.createElement("button");
element2.type = "button";
element2.className = "btn-danger btn fileinput-button";
var element3 = document.createElement("span");
element3.innerHTML = "-";
element2.appendChild(element3);
cell2.appendChild(element2);
The above code works fine in Fire fox but in ie button td is not creating. Could any one help on this.
Many Thanks
Anna
An alternative to this in jQuery:
var filename = 'sdsd';
var $btn = $('<button type="button">-</button>');
$btn.attr('class', 'btn-danger btn fileinput-button');
var $tr = $('<tr />');
$tr.append('<td>'+filename+'</td>');
$tr.append('<td />');
$tr.find('td:last').append( $btn );
$('#tbl1').append( $tr );
the error is coz of this line in ur code:
element2.type = "button";
Thanks Sally,
I have changed my code like below, this is also working.
var strTableRow = "<tr><td>" + filename + "</td><td><button class='btn-danger btn fileinput-button' type='button'>-</button></td></tr>";
$('#'+tableID).append(strTableRow);
Many Thanks
Anna