this is my JSP page:
function adding()
{
var text = "<br><br><br>" +
"<form action='addEmployee' method='get'>" +
"<tr>" +
"<input type='text' name='idEmployee' style='width: 20px;'>" +
"<input type='text' name='CIN' style='width: 35px;'>" +
"<input type='text' name='nom' style='width: 35px;'>" +
"<input type='text' name='prenom' style='width: 35px;'>" +
"<input type='text' name='e_mail' style='width: 35px;'>" +
"<input type='text' name='telephone' style='width: 35px;'>" +
"<input type='text' name='fonction' style='width: 35px;'>" +
"<button type='submit'> Confirmer l'ajout </button>" +
"</tr>" +
"</form>";
$(".liste").append(text);
}
I am recovering the fields in my servlet but getting an error: the method setCIN is not applicable for the arguments (Object) and this is the case for the other setters:
e.setCIN(Integer.parseInt(req.getParameter("CIN")));
Related
I write code of html and javascript in which when i click on button it add a new row.It is working fine now i have to find total by multiplying quantity and cost.It works for first row but if i add more rows it not work
<table class="table table-bordered table-striped">
<thead>
<th>#</th>
<th>Item Name</th>
<th>Batch No</th>
<th>Remarks</th>
<th>Quantity</th>
<th>Cost Per Piece</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="tbody">
</tbody>
<center><button type="button" name="" onclick="additem()" class="btn btn-success"> Add</button></center></td>
and javascript code is
function additem() {
x++;
var html="<tr";
html += "<td><center>"+x+"</center></td>";
html += "<td><input type='text' class='form-control' name='product_name'></td>";
html += "<td><input type='text' class='form-control' name='batch_no'></td>";
html += "<td><input type='text' class='form-control' name='remarks'></td>";
html += "<td><input type='number' class='form-control' oninput='calculate()' id='qty' name='total_qty'></td>";
html += "<td><input type='number' class='form-control' oninput='calculate()' id='cost' name='cost'></td>";
html += "<td><input type='number' class='form-control' id='total' name='total' readonly></td>";
html += "<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>";
html += "</tr>";
document.getElementById("tbody").insertRow().innerHTML= html;
}
You can set a dynamic id on these inputs using x variable:
Check out this jsfiddle link
let x = 0;
function additem() {
x++;
var html=`<tr;
<td><center>${x}</center></td>
<td><input type='text' class='form-control' name='product_name'></td>
<td><input type='text' class='form-control' name='batch_no'></td>
<td><input type='text' class='form-control' name='remarks'></td>
<td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' id='qty' name='total_qty'></td>
<td><input id='cost${x}' type='number' class='form-control' oninput='calculate(${x})' id='cost' name='cost'></td>
<td><input type='number' class='form-control' id='total${x}' name='total' readonly></td>
<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
</tr>`;
document.getElementById("tbody").insertRow().innerHTML= html;
}
function calculate(x) {
const qty = document.getElementById(`qty${x}`).value;
const cost = document.getElementById(`cost${x}`).value;
const totalElem = document.getElementById(`total${x}`);
totalElem.value = qty * cost
}
You need to create a unique id for each row and get the element by unique Id. Something like this.
let x = 0;
function additem() {
x++;
var html = "<tr";
html += "<td><center>" + x + "</center></td>";
html += "<td><input type='text' class='form-control' name='product_name'></td>";
html += "<td><input type='text' class='form-control' name='batch_no'></td>";
html += "<td><input type='text' class='form-control' name='remarks'></td>";
html += "<td><input id='qty_" + x + "' type='number' class='form-control' oninput='calculate(" + x + ")' id='qty' name='total_qty'></td>";
html += "<td><input id='cost_" + x + "' type='number' class='form-control' oninput='calculate(" + x + ")' id='cost' name='cost'></td>";
html += "<td><input id='total_" + x + "' type='number' class='form-control' id='total' name='total' readonly></td>";
html += "<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>";
html += "</tr>";
document.getElementById("tbody").insertRow().innerHTML = html;
}
function calculate(x) {
let qty;
let cost
if (document.getElementById('qty_' + x))
qty = document.getElementById('qty_' + x).value;
if (document.getElementById('cost_' + x))
cost = document.getElementById('cost_' + x).value;
let total = qty * cost;
if (document.getElementById('total_' + x))
document.getElementById('total_' + x).value = total;
}
I do not know how to formulate this question but it is near close to my issue. I am trying to make a Point of sale system so when client clicks in each product it adds in the table. There are no issues in my code but I do not know how to set the product's price using a textbox when using .append.
This is my code:
$(".agregarListaF").click(function (e) {
e.preventDefault();
var padre = $(this);
var hijos = padre.children().children("span");
var i = 0;
var datos = new Array();
hijos.each(function () {
switch (i) {
case 0:
datos[0] = $(this).text();
break;
case 1:
padre;
datos[1] = $(this).text();
break;
case 2:
padre;
datos[2] = $(this).text();
break;
}
i++;
});
console.log(datos[0]);
console.log(datos[1]);
$(".detallefactura").append(
"<tr>" +
"<td>" +
datos[0] +
"</td>" +
"<td>" +
datos[1] +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value='1'>" +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value=''>" +
"</td>" +
"<td class='tota-sub-fila'>" +
parseFloat(Math.floor(datos[2]) * parseFloat(1)).toFixed(2) +
"</td>"
);
});
My issue is in the line:
+ "<td>" + "<input type='text' class='form-control text-center' value=''>" + "</td>"
I want to add javascript value variable inside * input value=''* but I know It wont work but I tried it:
+ "<td>" + "<input type='text' class='form-control text-center' value='datos[2]'>" + "</td>"
This is my point of sale view:
In the column precio is where I want to set the price inside that textbox.
How do I solve this?
Please try this code,To How to set Javascript's variable value inside
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript| Set the value of an input field.
</title>
</head>
<body style="text-align:center;" id="body">
<input type='text' id='id1' />
<br>
<br>
<button onclick="gfg_Run()">
click to set
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px;font-weight: bold;"></p>
<script>
var el_down = document.getElementById("GFG_DOWN");
var inputF = document.getElementById("id1");
function gfg_Run() {
inputF.setAttribute('value', 'defaultValue');
el_down.innerHTML = "Value = " + "'" + inputF.value + "'";
}
</script>
</body>
</html>
I hope this information will be useful.
Thank you.
Follow this using template literals
const html = `<tr>
<td>${datos[0]}</td>
<td>${datos[1]}</td>
<td><input type="text" class="form-control text-center" value="${datos[3]}"></td>
<td><input type="text" class="form-control text-center" value="${datos[4]}"</td>
<td class="tota-sub-fila">${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)}</td>
</tr>`;
$(.detallefactura").append(html);
You can do:
var variable="x";
"<input type='text' class='form-control text-center' value='"+ variable +"'>";
Or,
`<input type='text' class='form-control text-center' value='${variable}'>`
you can use Template literals like this instead of having this concatenation:
$(.detallefactura").append(`<tr>
<td> ${datos[0]} </td>
<td> ${datos[1]} </td>
<td> <input type='text' class='form-control text-center' value='1'> </td>
<td> <input type='text' class='form-control text-center' value='${datos[2]}'> </td>
<td class='tota-sub-fila'> ${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)} </td>
`);
I have this javascript which will allow a user to hit the edit button on a table and edit the content. They can then press save to save the new input. I want to do 4 things which I don't know how to do.
I want to remove the border from the input box after the edit button has been pressed and then the save button is pressed.
Once the save button is pressed I want the Edit, Save, and Delete Button to go back to the same format they were at before pressing Edit.
I want the select picker to be read only when the edit button has not been clicked.
Instead of Having the words "Edit","Save" and "Delete" I want to use font awesome icons.
I have uploaded the JS, CSS, and HTML code here.
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
var chore_val = document.getElementById("chore_text" + no).value;
var duration_val = document.getElementById("duration_text" + no).value;
var rotation_val = document.getElementById("rotation_text" + no).value;
document.getElementById("chore_row" + no).innerHTML = chore_val;
document.getElementById("duration_row" + no).innerHTML = duration_val;
document.getElementById("rotation_row" + no).innerHTML = rotation_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit pageButton" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save pageButton" onclick="save_row('1')">
<input type="button" value="Delete" class="delete pageButton" onclick="delete_row('1')">
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>
Here you go you can use the following.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("select").attr("disabled", false);
$("edit_button" + no).show();
$("save_button" + no).show();
//document.getElementById("edit_button"+no).style.display="none";
//document.getElementById("save_button"+no).style.display="block";
var chore = document.getElementById("chore_row" + no);
var duration = document.getElementById("duration_row" + no);
var chore_data = chore.innerHTML;
var duration_data = duration.innerHTML;
chore.innerHTML = "<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>";
duration.innerHTML = "<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>";
}
function save_row(no) {
$("input[type='text']").css({
border: 0
});
$("#edit_button" + no).show();
var chore_val = $("chore_text" + no).value;
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
$("#save_button" + no).show();
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = document.getElementById("new_chore").value;
var new_duration = document.getElementById("new_duration").value;
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row'" + table_len + "'>" +
"<select class='selectpicker1'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit pageButton' onclick='edit_row(" + table_len + ")'> " +
" <input type='button' id='save_button" + table_len + "' value='Save' class='save pageButton' onclick='save_row(" + table_len + ")'> " +
" <input type='button' value='Delete' class='delete pageButton' onclick='delete_row(" + table_len + ")'>" +
" </td>" +
"</tr>";
document.getElementById("new_chore").value = "";
document.getElementById("new_duration").value = "";
document.getElementById("new_rotation").value = "";
}
There are several errors in your code, so i revised it but the chore_text name input is not defined and i cant figure out why are you using it so i commented out the lines involved with that input, but the things you addressed are here you can see, just one thing I could not get your 2nd point the buttons that you want to switch back to the previous layout. They never change or maybe I am not getting what you said, I have commented out the portions for you to fix that are buggy, but the problem you are concerned I have added the solution.
$(document).ready(function() {
$("select").attr('disabled', true);
});
function edit_row(no) {
$("#selectpicker" + no).attr("disabled", false);
$("#save_button" + no).show();
var chore = $("#chore_row" + no);
var duration = $("#duration_row" + no);
var chore_data = chore.html();
var duration_data = duration.html();
chore.html("<input type='text' id='chore_text" + no + "' value='" + chore_data + "'>");
duration.html("<input type='text' id='duration_text" + no + "' value='" + duration_data + "'>");
$("input[type='text']").css({
border: 0
});
}
function save_row(no) {
var chore_val = $("#chore_text" + no).val();
var duration_val = $("#duration_text" + no).val();
var rotation_val = $("#rotation_text" + no).val();
$("#chore_row" + no).html(chore_val);
$("#duration_row" + no).html(duration_val);
$("#rotation_row" + no).html(rotation_val);
$("#edit_button" + no).show();
//$("#save_button" + no).hide();
$("#selectpicker" + no).attr("disabled", true);
}
function delete_row(no) {
// $("#row" + no + "").clone().wrap('<p>').parent().html('');
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_chore = $("#new_chore").val();
var new_duration = $("#new_duration").val();
var table = document.getElementById("ChoreTbl");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "" +
"<tr id='row" + table_len + "'>" +
" <td id='chore_row" + table_len + "'>" + new_chore + "</td>" +
" <td id='duration_row" + table_len + "'>" + new_duration + "</td>" +
" <td id='rotation_row" + table_len + "'>" +
"<select disabled class='selectpicker1' id='selectpicker" + table_len + "'>" +
"<option>Daily</option>" +
"<option>Weekly</option>" +
"<option>Monthly</option>" +
"</select>" +
"</td>" +
" <td><i id='edit_button" + table_len + "' class='fa fa-pencil' onclick='edit_row(" + table_len + ")'></i> " +
" <i id='save_button" + table_len + "' class='fa fa-floppy-o' onclick='save_row(" + table_len + ")'></i> " +
" <i class='fa fa-trash' onclick='delete_row(" + table_len + ")'></i>" +
" </td>" +
"</tr>";
$("#new_chore").val();
$("#new_duration").val();
//document.getElementById("new_rotation").value = "";
}
input {
background-color: #fff1d9;
border: solid;
border-color: #fea680;
}
.pageButton {
border: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="Chores">
<table id="ChoreTbl" class="choreHead">
<h1><b>Chore Setting</b></h1>
<thead>
<tr class="header" style="color:#008f95;">
<td id="name_row2"><b>Chore</b></td>
<td id="country_row2"><b>Time Frame to Complete</b></td>
<td id="age_row2"><b>Rotation Cycle</b></td>
<td></td>
</thead>
<tbody>
<tr id="row1">
<td id="chore_row1">Wash Floor</td>
<td id="duration_row1">3 days</td>
<td id="rotation_row1">
<select class="selectpicker1" id="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td>
<i id="edit_button1" class="fa fa-pencil" onclick="edit_row('1')"></i>
<i id="save_button1" class="fa fa-floppy-o" onclick="save_row('1')"></i>
<i class="fa fa-trash" onclick="delete_row('1')"></i>
</td>
</tr>
<tr>
<td><input type="text" id="new_chore"></td>
<td><input type="text" id="new_duration"></td>
<td>
<select class="selectpicker1">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</td>
<td><input type="button" class="add pageButton" onclick="add_row();" value="Add Chore"></td>
</tr>
</tbody>
</table>
I'm trying to get the row contents by selecting the tr element which has a unique id.
This is what i have so far, i'm fairly new to this, and really unsure why this isn't working.
var value = $('tr#'+idd).find('input[type=text]').map(function() { return $(this).attr("value"); }).get();
I've tried changing the id so it's not unique and it does receive data. So just confused why this statement doesn't.
Any help is appreciated
while ($record = mysql_fetch_array($entrys))
{
echo "<tr id='" . $record['id'] . "'>";
echo "<td>" . "<input type='text' id='id' name='id' value=" . $record['id'] . " ></td>";
echo "<td>" . "<input type='text' id='make' name='make' value=" . $record['make'] . " ></td>";
echo "<td>" . "<input type='text' id='fuel' name='fuel' value=" . $record['fuel'] . " ></td>";
echo "<td>" . "<input type='text' id='transmission' name='transmission' value=" . $record['transmission'] . " ></td>";
echo "<td>" . "<input type='text' id='size' name='size' value=" . $record['size'] . " ></td>";
echo "<td>" . "<input type='text' id='doors' name='doors' value=" . $record['doors'] . " ></td>";
echo "<td>" . "<input type='hidden' id='hidden' name='hidden' value=" . $record['id'] . " ></td>";
echo "<td>" . "<button name='update' onclick=edit('".$record['id']."') >Edit</button>";
echo "<td>" . "<button id='delete' name='delete' onclick=del('".$record[id]."') value=" . $row . " >Delete</button> </td>";
echo "</tr>";
}
echo "</table>";
Try this:
return $(this).val();
Your last line:
echo "<td>" . "<button id='delete' name='delete' onclick=del('".$record[id]."') value=" . $row . " >Delete</button> </td>";
.$record[id]." - should be .$record['id']." like the others.
I would like to add a new div from javascript to my existing html page. Normally I do this with the instruction document.createElement("div") and I fill this div with the methode div.innerHTML = "" (for example). This works fine in most cases, but now I would like to add a selectionlist to my div and fill this lists with some data. This method doesn't work:
function initEdit(){
addPanel = document.createElement("div");
addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
$('body').jAlert(contents, 'info', offset);
list1.forEach(function(element, id){
var option = document.createElement("OPTION");
option.text = option.value = property;
form.data_property_selection.options.add(element);
})
}
Does anybody know how to solve this? (BTW: I can't set this html code in the page at the beginning, because this is the contents of a jAlert div)
update: solution
properties1.concat(properties2).forEach(function(property, id){
if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})
propertyList = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
propertyList1 + "</select> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
objectList + "</select> </td>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
propertyList2 + "</select> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
As far as I know, achieving what you want with this method is impossible. Instead of using innerHTML, you should do the long way, creating all the inner tags with createElement as well, and appending them as children. Using jQuery can make this job a lot easier.
Here is an example of how to do it with jQuery: link, and the official API.
Alternatively, if you can first create the inner list, then just create it and concatenate it as a string as a part of innerHTML (first make the list, only then edit innerHTML).