What I require is a pretty standard feature. And I am sure its easy enough, but somehow I cant make it happen. Please help me out here.
This is the scenario-->
I have a struts form on a jsp, which takes in employee information. Now with every employee I want to associate some family members.
So for information of family members I want :
1.) A row of -- 1 select element and 3 text field elements -- in the end of the form.
2.) A 'add' button which appends such rows on demand for adding more family members.
I dont know how I can attach a screen shot to give you exact idea of what I want.
I have tried doing this, using javascript, but javascript adds standard HTML elements, because of which I am not able to access the value of those fields in my action class.(Please tell me if this is not the case, because then the only question that will remain is, why am I unable access those values)
Currently what I am trying:
JSP:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td>Relationship</td>
<td>Name</td>
<td>Age</td>
<td>Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName[]"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++){
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
root.appendChild(cRow);
}
With this I am able to add a new row of specified elements, but unable to access the field values in the action class. I would like to point out that I am not able to access even the first row's elements in action class (probably because they are standard HTML).
Any help is appreciated.
Thanks!!
here is the solution to the problem, for those still stuck on it.
In the jsp:
<s:form name="enterEmployeeInfo" id="enterEmployeeInfo" action="enterEmployeeInfo">
////OTHER FORM ELEMENTS//////////////
<table>
<tr>
<td align="center">Relationship</td>
<td align="center">Name</td>
<td align="center">Age</td>
<td align="center">Occupation</td>
</tr>
<tr>
<td>
<select name="rel">
<option value=""></option>
<option value="Father">Father</option>
<option value="Mother">Mother</option>
<option value="Spouse">Spouse</option>
<option value="Child">Child</option>
</select>
</td>
<td> <input name="rName"/></td>
<td> <input name="rAge"/> </td>
<td> <input name="rOccupation"/> </td>
</tr>
<tr>
<td colspan="4" align="right"><button type="button" onclick="tryFunc(this.parentNode);">Add</button></td>
</tr>
</table>
<s:submit value="Add Employee" name="submit"/>
<s:reset value="Reset" name="reset"/>
</s:form>
The JS:
function tryFunc(node){
var root = node.parentNode.parentNode;
var allRows = root.getElementsByTagName('tr');
var cRow = allRows[1].cloneNode(true);
root.appendChild(cRow);
}
Then in the action class, just define a variables like this:
private String rel[];
private String rName[];
private String rAge[];
private String rOccupation[];
Define their getters and setters, and you can access each element of each row in jsp like this :
rel[0], rel[1], ........
rName[0],rName[1], .......
etc......
As for copying the Value of select element to cloned row, its simple javascript. Just do this:
clonedSelect.selectedIndex = original.selectedIndex;
If you still have issues, comment. :)
Related
I have a form that shows a drop-down menu and a text field next to it:
<html>
<body>
<table>
<tbody class="project_wrapper">
<tr>
<td scope="row">
<select id="test_project" name="test_project[]">
<option selected>Select</option>
<option>10</option>
<option>20</option>
</select>
</td>
<td><input id="test_value" name="test_value[]" type="text" placeholder="Enter value"></td>
<td><div id="test_calc"></div></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="3">
Add another project
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can select one of the values in the drop-down, and when you enter a numeric value into the text field, on each keyup, it'll display the value multiplied by the selected value. You can also click the "Add another project" link and it'll append/create another drop-down and text field. This already works, and is done with the following Jquery code:
<script type="text/javascript">
$(document).ready(function(){
var addProject = $('.add_project');
var wrapper = $('.project_wrapper');
var projectHTML = `<tr>
<td scope="row">
<select id="test_project2" name="test_project[]" class="custom-select">
<option selected>Select</option>
<option>10</option>
<option>20</option>
</select>
</td>
<td><input id="test_value2" name="test_value[]" type="text" placeholder="Enter value"></td>
<td><div id="test_calc2"></div></td>
</tr>`;
$(addProject).click(function(){
$(wrapper).append(projectHTML);
});
});
$('#test_value').keyup(function(){
$('#test_calc').text(Math.round($(this).val() * $("#test_project option:selected").val()));
});
The problem is I can't get the multiplication function to work/display the result for any newly appended lines. Above you can see I tried hardcoding the values of test_value2 and test_calc2 and then added this below:
$('#test_value2').keyup(function(){
$('#test_calc2').text(Math.round($(this).val() * $("#test_project2 option:selected").val()));
});
I would expect the result (at least for one new appended line) to appear in the same way as for the first line, but nothing seems to happen. My goal is to get the results to appear for the appended line, and then also find a way to have that keyup calculation function work for any number of appended lines (rather than hardcode 2, 3, 4, etc. values).
The ids, I think, will need to be dynamically assigned as the lines are appended, and then the name will stay the same to hold the arrays for test_array and test_value which I'm going to receive and process via PHP.
Thanks!
Remove all your IDs from the template rows, use classes or name="" instead as your selectors
Assign an ID to your TBODY, we'll use it as the .on() event delegator
Use the "input" event, not the "keydown" event. You can also copy/paste values, remember?
on "input" - refer to the parent TR using .closest() before descending back (using .find()) to find the elements specific for that row
Use parseInt() or parseFloat() to handle input strings. Also remember to always fallback to a number i.e: 0 to prevent NaN results
jQuery(function($) {
const projectHTML = `<tr>
<td>
<select name="test_project[]" class="custom-select">
<option value="" selected>Select</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<td><input name="test_value[]" type="type" placeholder="Enter value"></td>
<td><div class="result"></div></td>
</tr>`;
const $projects = $("#projects"); // assign an ID to your tbody
const $addProject = $('.add_project');
const arrRow = () => $projects.append(projectHTML);
// Create new row on click
$addProject.on("click", arrRow);
// Add the first row
arrRow();
// use a delegator which is not dymanic (the TBODY in this case),
// and use delegated events to any ":input" element:
$projects.on("input", ":input", function(ev) {
const $tr = $(this).closest("tr");
const $project = $tr.find('[name="test_project[]"]');
const $value = $tr.find('[name="test_value[]"]');
const $result = $tr.find(".result");
const project = parseInt($project.val(), 10) || 0;
const value = parseFloat($value.val()) || 0;
const result = project * value;
$result.text(result);
});
});
<table>
<tbody id="projects"></tbody>
<tbody>
<tr>
<td colspan="3">
Add another project
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
The IDs must be unique, instead whenever you add another row you duplicate the IDs.
Instead of IDs I changed them to class in order to combine this keyword with .closest() and .find() to get the values of interest.
Moreover, because you add new elements to the table you need to delegate the event.
If you change the select you need to calculate again, not only on typing into the input field.
var addProject = $('.add_project');
var wrapper = $('.project_wrapper');
var projectHTML = '<tr>\
<td scope="row">\
<select class="test_project" name="test_project[]" class="custom-select">\
<option selected>Select</option>\
<option>10</option>\
<option>20</option>\
</select>\
</td>\
<td><input class="test_value" name="test_value[]" type="number" placeholder="Enter value"></td>\
<td><div class="test_calc"></div></td>\
</tr>';
$(addProject).click(function () {
$(wrapper).append(projectHTML);
});
$(document).on('input', '.test_value', function (e) {
$(this).closest('tr').find('.test_calc').text(Math.round($(this).val() * $(this).closest('tr').find('.test_project option:selected').val() || 0));
});
$(document).on('change', '.test_project', function(e) {
$(this).closest('tr').find('.test_value').trigger('input');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody class="project_wrapper">
<tr>
<td scope="row">
<select class="test_project" name="test_project[]">
<option selected>Select</option>
<option>10</option>
<option>20</option>
</select>
</td>
<td><input class="test_value" name="test_value[]" type="number" placeholder="Enter value"></td>
<td>
<div class="test_calc"></div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="3">
Add another project
</td>
</tr>
</tbody>
</table>
So I've got a bit of a challange..
I'm trying to get 2 or 3 predefined outputs from a input value.
The code is below, but what I need to get working is that is I select ball_1, ball_2, ball_3 or ball_4 the VLAN and IP are diffrent.
ball_1 needs to output VLAN 12 and IP 32 but ball_2 needs to be VLAN 22 and IP 33 as for ball_3 and ball_4 the VLAN needs to remain empty..
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = (theSelect.selectedIndex);
secondP.innerHTML = (theSelect[theSelect.selectedIndex].value) - (10);
thirdP.innerHTML = (theSelect[theSelect.selectedIndex].value);
}
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="32">ball_1</option>
<option value="33">ball_2</option>
<option value="84">ball_3</option>
<option value="85">ball_4</option>
</select>
</form>
<table class=table2>
<tr>
<td>bla</td>
<td>VLAN</td>
<td>IP</td>
</tr>
<tr>
<td>
<p id="firstP"> </p>
</td>
<td>
<p id="secondP"> </p>
</td>
<td>
<p id="thirdP"> </p>
</td>
</tr>
</table>
bla is unused for now so that is not that important.
I've also found this bit of code which seems to better meet my needs but I can't get a dropdown menu to run the input value so it outputs a more or less correct value
<form
oninput="x.value=parseInt(a.value)*parseInt(300);y.value=parseInt(a.value)*parseInt(400);">
<table style="text-align: left; width: 100px;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><input name="a" value="" type="text"></td>
</tr>
<tr>
<td><output name="x" for="a b"></td>
</tr>
<tr>
<td><output name="y" for="a b"></td>
</tr>
</tbody>
</table>
</form>
I've got some basic knowledge about hmtl and java I think but I can't get it to work properly or is it impossible?
thanks in advance
kind regards
Wouter
ps. I don't use a database and have 0 knowledge on how to build and run one, also where the site runs it's almost impossible to run a SQL server.
You are not accessing drop down selected value correctly, Please look below working code.
Javascript function for accessing drop down selected value and setting IP and VLAN
function showData() {
var ddlDemo = document.getElementById("ddlDemoSelect");
var selectedValue = ddlDemo.options[ddlDemo.selectedIndex].value;
if (selectedValue == 32) {
document.getElementById('firstP').innerText = "bla";
document.getElementById('secondP').innerText = "12";
document.getElementById('thirdP').innerText = "32";
}
else if (selectedValue == 33) {
document.getElementById('firstP').innerText = "bla";
document.getElementById('secondP').innerText = "22";
document.getElementById('thirdP').innerText = "33";
}
else {
document.getElementById('firstP').innerText = "";
document.getElementById('secondP').innerText = "";
document.getElementById('thirdP').innerText = "";
}
}
Html. I have added Id for drop down to access it later on.
<form name="demoForm">
<select id="ddlDemoSelect" name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="32">ball_1</option>
<option value="33">ball_2</option>
<option value="84">ball_3</option>
<option value="85">ball_4</option>
</select>
</form>
<table class=table2>
<tr>
<td>bla</td>
<td>VLAN</td>
<td>IP</td>
</tr>
<tr>
<td>
<p id="firstP"> </p>
</td>
<td>
<p id="secondP"> </p>
</td>
<td>
<p id="thirdP"> </p>
</td>
</tr>
</table>
I need one help.i want to fetch each row data of a table using Angular.js.I am explaining my code below.
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td> <select class="form-control" name="catagory[$index]" id="catagory[$index]" ng-model="catagory" ng-options="cat.name for cat in listOfCatagory track by cat.value " ng-change="removeBorder('catagory',$index,catagory.value);" >
</select></td>
<td>
<select class="form-control" name="subcatagory[$index]" id="subcatagory[$index]" ng-model="subcatagory[$index]" ng-options="sub.name for sub in listOfSubCatagory[$index] track by sub.value " ng-change="setSubCatagory($index,subcatagory[$index].value);" >
<option value="">Select Subcategory</option>
</select>
</td>
<td><input type="text" name="comment[$index]" id="comment" class="form-control oditek-form" placeholder="Add Comment" ng-model="comment[$index]" ng-keyup="comment($index,comment[$index]);"></td>
</tr>
<input type="button" class="btn btn-success" ng-click="saveResturantDetails(billdata);" id="saveData" value="Save" style="margin-right:20px;"/>
When user will click on save button the each row data should fetch to the controller.I am explaining my code below.
$scope.saveResturantDetails=function(billdata){
for(var i=0;i< $scope.days.length;i++){
var data={'cat':$scope.catagory[i].value,'subcat':$scope.subcatagory[i].value,'comment':$scope.comment[i]};
arr.push(data);
}
console.log('arr',arr);
}
Here i am using $index in each model so that i can get data into a loop.But in this way i am getting this following error.
TypeError: Cannot read property 'value' of undefined
Please help me to resolve this issue.
In your controller Declare a scope object called answers.
$scope.days = [{name:"m"},{name:"t"}];
$scope.answers={};
$scope.save = function(){ console.log($scope.answers)};
Then your html iterate days and assign ng-model to answers object.
<div><tr ng-repeat="d in days">
<td>{{d.name}}</td>
<td><input type="text" ng-model="answers['comment'+$index]"/></td>
</tr></div>
<button ng-click="save()">Save</button>
Ng Repeat creates Chid Scope so we won't get that in controller. This will definitely work. I Checked
Sorry for my bad english
So I am trying to add additional columns to a table inside a form. Adding the columns themselves is not that difficult but I don't know how to go about setting their ng-models.
This is my current code:
(HTML)
<button ng-click="add()" type="button">+ column</button>
<table>
<thead id="inputtablehead">
<th class="theadlabel">(in 1.000 EUR)</th>
<th>{{startyear}}</th>
<th class="NBBCodesHeader">NBB Codes</th>
<th>Source</th>
</thead>
<tbody class="input">
<tr>
<td>number of months</td>
<td>
<input ng-model="input{{startyear}}.NumberMonths" type="text" class="{{startyear}}" required>
</td>
<td class="NBBCodes"></td>
</tr>
<tr>
<td>Fixed assets</td>
<td>
<input ng-model="input{{startyear}}.FixedAssets" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">20/28</td>
</tr>
<tr>
<td>Inventory</td>
<td>
<input ng-model="input{{startyear}}.Inventory" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">3</td>
</tr>
</table>
(JS)
angular.module("inputFields", []).controller("MyTable", function ($scope) {
$scope.startyear = new Date().getFullYear();
var nextyear = new Date().getFullYear() - 1;
$scope.add = function () {
$(".NBBCodesHeader").before("<th>"+nextyear+"</th>");
$(".input .NBBCodes").before('<td><input class='+nextyear+' type="text" required></td>');
nextyear--;
};
});
So in my JS the <input class='+nextyear+' type="text" required> should become something like <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> for the <td> element added next to the 'number of months' row.
I was thinking to give ea row an id in the form of NumberMonths and then look up the id when adding the column.
So my question would be: is this a valid way to do it and how would I get this id? Or am I overthinking it and is there an easier way to do this?
Use standard javascript [] object notation for variable property names.
<input ng-model="input[startyear].Inventory"
You shouldn't do DOM manipulations from a controller. It's not a good practice when working with AngularJS. A good rule to remember that is: don't use jQuery. It's a common mistake when starting working with AngularJS. And, in case you would be completely sure that you need to modify the DOM, do it always from a directive.
About your problem, maybe you can base your solution in create a data structure in your controller (a Javascript Object), and render it through a ng-repeat in your template. This way, if you modify the object (adding a new column), the template will be automatically updated.
This is my first code with jQuery, so be indulgent please. The code below is part of a table in which each row displays: a reload button (Reload.gif), and two comboboxes (cmb1 and cmb2). Here is the edited code for just one row:
<table>
<form name="myformname" form action="Handler.php" method="post">
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" src="Reload.gif" border="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</form>
</table>
Variables MyQuestion, cmb1 and cmb2 (user-selected) are passed to Handler.php (as all are in the same form), that search data in databases and reload the page with the new data. This is working OK.
But now I want to change the logic, cause I dont want to reload the whole page, but only the row that was clicked. I tried with jQuery something like this (OnClick added to Reload.gif!):
<table>
<tr>
<td>
<input type="hidden" name="MyQuestion" value="0">
<input type="image" onclick="recp('0')" src="Reload.gif" border="0" name="MyQuestion" value="0"/>
</td>
<td>
<select name="cmb1"><option>One</option><option>Two</option></select>
</td>
<td>
<select name="cmb2"><option>A1</option><option>A2</option></select>
</td>
</tr>
</table>
And in the header I added this code (I took it from here)
function recp(id) {
$('#myStyle').load('data.php?id=' + id);
}
I got some results for the id, but here is my question:
In the
load('data.php?id=' + id)
, can I send multiple variables (id, cmb1 and cmb2)?
To send multiple variables you could use for example,
load('data.php?id=' + id + '&var1=' + var1 + '&var2=' + var2)
For more examples and other ways to do it, have a look in the jQuery manual for the load() function.
Why not use .serialize()?
$("#myStyle").load('data.php?' + $("form[name=myformname]").serialize());