Develop Reference

Filter Table with JQuery using the “each” element

OK everybody, I hope you can help me. I have a problem with JQuery or better with the each selector of JQuery.
I have an example table, where I want to filter for special values which I entered before. Those values I got from my input field , store them in a variable, split the data an create an JQuery Object.
Well and then I think I have a problem with the selection, marked in the code section.
<p>
<input id="testyear" size="4" type="text">
<input value="Werte" onclick="getvalue()" type="button">
</p>
<script>
function getvalue() {
var wert = $('#testyear').val();
$("#years").find("tr").hide();
var data = this.value.split(" ");
// create jQuery Object
var jQueryObject = $("#years").find("tr");
// i think here is my error, i want to display only the object which are equal or better stored in my variable “wert”.
$.each(data, function (){
//jQueryObject = jQueryObject.filter(wert);
jQueryObject == wert;
});
jQueryObject.show();
};
<!--Example Table-->
<table id="years">
<tbody>
<tr>
<td>1997</td>
<td class="century">20</td>
</tr>
<tr>
<td>2001</td>
<td class="century">21</td>
</tr>
</tbody>
</table>
I expect, that when I enter 1997 in the inpt field, the whole tr which contains 1997 will be displayed. I know it is simple but I have no idea so thanks for your help.

Use a filter on the TR's after initially hiding them all.
e.g.
getvalue = function() {
var wert = $('#testyear').val();
// create jQuery Object
$("#years tr").hide().filter(function() {
return ~~$("td", this).first().text() >= wert;
}).show();
};
JSFiddle: https://jsfiddle.net/TrueBlueAussie/h8Lejfac/
Notes:
The ~~ is a little conversion to integer trick
You seem to have extra code you do not need in the example
Just get filter to return true for each item you want to keep and false for the rest
When using jQuery, avoid using inline event handlers (like onclick=). Use jQuery event handlers instead. See below:
e.g.
$('#wert').click(function() {
var wert = $('#testyear').val();
// create jQuery Object
$("#years tr").hide().filter(function() {
return ~~$("td", this).first().text() >= wert;
}).show();
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/h8Lejfac/1/

I think your problem is not in each() method (not selector). Your problem is here:
var data = this.value.split(" ");
this is not defined (you are not in an object scope). I think you need this:
var data = wert.split(" ");
-----------^^^^
You've obtain the value of wert in the last line.

How to grab value of read-only text field and use in angular js result

I have a textfield that is read only and pulling it's value from the query string. I can't get the value set in an output of javascript when bound with AngularJS.
<input type="text" class="form-control accountNumber" name="accountNumber" id="accountNumber" ng-model="accountNumber" ng-controller="main" data-placement="top" readonly>
function main($scope) {
var url = window.location.href;
var accountId = url.substr(url.indexOf("=") + 1);
$scope.accountNumber = accountId;
}
The account number needs to be placed into the "publisherId" field within the resulting javascript:
<script type="text/javascript" src="//cdnstatic.domain.com/"></script>
<script type="text/javascript">
window.addEventListener("load", function(e) {
var playerH = new Player({
adTag:"{{adTag}}",
fontElClass:"{{fontTag}}",
playerClass:"{{playerClass}}",
publisherId: "{{accountNumber}}"<===NEEDS TO BE REPLACED WITH VALUE FROM READ ONLY FIELD
});
});
</script>
To clarify:
1) function main($scope){} grabs the URL (which is also displayed in the textfield which is readonly), does some work on it and the value is stored in accountId.
2) That value is then supposed to be set in $scope.accountNumber, and used in the "publisherId:" field.
The resulting JavaScript is displayed to the user as text(not to be run on the page), and should have the {{accountNumber}} replaced with the value of the accountId.
The issue is that when the field is read only, its not showing the account number. It is also not setting the value in the publisherId field.

Here's my plnkr : Link,
I think your problem is that your controller is not defined for the entire view, just for your input.

How to get checkbox cheked value in javascript by using html dom

Basically i have a list of checkbox which the data are retrieved from database and i stored it in vector to loop it. Now I need to get the value those are selected(checked) and bring it to another jsp for some purpose, may i know how can i make it ? i get "undefined" value when i alert in javascript. Any help would be appreciated. Thanks
First.jsp
<%
Vector vFruit_code = new Vector();
Vector vFruit_descp = new Vector();
DB_FRUIT.makeConnection();
String SQL = "SELECT * FROM TB_FRUIT WHERE TYPE='FC' WITH UR";
DB_FRUIT.executeQuery(SQL);
while(DB_FRUIT.getNextQuery())
{
String FRUIT_CODE = DB_FRUIT.getColumnString("VALUE1");
String FRUIT_DESCP= DB_FRUIT.getColumnString("VALUE2");
vFruit_code.addElement(FRUIT_CODE);
vFruit_descp.addElement(FRUIT_DESCP);
}
DB_FRUIT.takeDown();
%>
<html>
<head>
<script language="Javascript">
function fnCalulate()
{
document.getPremium.FRUIT_CODE.value = document.mainform.FRUIT_CODE.value;
document.getPremium.submit();
// this part i i get undefined value when i try to alert
alert(document.mainform.FRUIT_CODE.value);
}
</script>
</head>
<body>
<form name="mainform" method="post" action="pop_fruit_route.jsp">
<table>
<tr>
<td>
<%
for (int i=0;i<vFruit_code.size();i++)
{
String sCODE = (String) vFruit_code.elementAt(i);
String sDESCP = (String) vFruit_descp.elementAt(i);
%>
<input name="FRUIT_CODE" type="checkbox" id="<%=sCODE%>" value="<%=sCODE%>" onclick="fnCalulate();"><%= sDESCP %>
<%}%>
</td>
</tr>
</table>
</form>
<form name="getPremium" method="post" action="home/calculation/calFruit.jsp">
<input type="hidden" name="FRUIT_CODE">
</form>
</body>
</html>
i need to get the value from the checkbox which the items are checked to calFruit.jsp
String[] ID = request.getParameterValues("FRUIT_CODE");
output

With what you show, this will fail:
document.getPremium.FRUIT_CODE.value = document.mainform.FRUIT_CODE.value;
because there is no FRUIT_CODE in getPremium.
If you have multiple checkboxes, you can't say document.mainform.FRUIT_CODE.value; FRUIT_CODE will return an array of all your fruit input tags. you can loop over them and get the value for one that is checked, like:
for (var i = 0; i < document.mainform.FRUIT_CODE.length; ++i ) {
if (document.mainform.FRUIT_CODE[i].checked)
document.getPremium.FRUIT_CODE.value = document.mainform.FRUIT_CODE[i].value;
}
alert(document.getPremium.FRUIT_CODE.value);
(though it isn't at all clear to me what you want to happen when multiple ones are checked)
or pass your function the element that was clicked, by changing the call to be:
onclick="fnCalculate(this)"
and the function to:
function fnCalculate(clicked_element) {
document.getPremium.FRUIT_CODE.value = clicked_element.value;
}
though either way you probably want to decide what should happen when a click unchecks a checkbox.
Note that using a library such as jquery makes everything much easier.

How to check if a field has been populated with data using a javascript function?

Please note that i am a beginner in javascript. I've googled all the possible terms for my question but no luck. I wanted to know if there exists a javascript function that can be used to check if a field has been populated with data using another javascript function. No libraries please since i want to know the basics of javascript programming.
Edit:
I just wanted to clarify that scenario that i am into.
I have 3 input fields. These fields have their value assigned automatically by another javascript function. What i wanted to do is when this fields have their respected values i wanted to create a new input field that will calculate the sum of the value of the 3 fields.

As You are new Please try this whole code of HTML with Javascript code too.
<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
var TextValue = document.getElementById("field1").value
if(TextValue !=''){
alert(TextValue);
}
alert();
}
</script>
</head>
<body>
<input type="text" id="field1" value="Hello World!"><br>
<button onclick="copyText()">Copy Text</button>
</body>
</html>
Hope this works.

Hope this helps you
//Html Code
<input type="text" value="sdsd" onChange="checkValue(this.value)">
//Java Script Code
function checkValue(value){
if((value).trim()!==""){
alert('return true');
}
else{
alert('return false');
}
}

//HTML line:
<input type="text" id="txtAddress" />
//JS code:
function setValue() {
//first we set value in text field:
document.getElementById('txtAddress').value = 'new value';
TestFunction();
}
function TestFunction() {
//second we will get value from this filed and check wether it contains data or not:
var address = document.getElementById('txtAddress').value;
if (address != "") {
alert("Yes, field contains address");
}
else {
alert("Empty field, there is no address");
}
}

I'm not sure what are you trying to achieve.
If you want to check if the input to the field was made with Javascript : there's no way to make that UNLESS your Javascript input function stores such information in some place (for example, add specific class to the modified object). Then you can proceed with following:
If you want to check if there's any value in the field then you can use onchange (triggers on change, you can pass the object to the function and get every property attached to it - value, class etc.).
example:
function changeValue( object )
{
object.value = "new value";
object.classList.add("modified");
}
function isChanged( object )
{
if( object.classList.contains("modified") )
alert("I'm modified by JS!");
}
<input type="text" id="first" onchange="isChanged(this)">
It has been some time since I was writing JS, but this should work.
Edit: now I remember onchange triggers only, if element is edited by user, thus rendering onchange detection worthless. Well, you could use set interval with the following function:
function getModified() {
// somehow process with
// document.getElementsByClassName("modified");
}
setInterval( getModified(), 3000 ); // get JS modified elements every 3s

lets say this is your html field (text input for instance):
<input type="text" id="txtName" />
in order to get it's value with javascript, use document.getElementById('txtName').value - for example:
function alert_value() {
var value = document.getElementById('txtName').value;
alert(value);
}
hope that helps.
EDIT:
if this text field is added dynamically, i'd suggest including jQuery and set the following script:
$(function(){
$(document).on('keyup', '#txtName', function(){ alert($(this).val()) });
});

How to return a variable from a javascript function into html body

I am still new to javascript, and I am trying to get a function to return a variable using html & javascript. Basically the function should just return whichever radio button that the user clicks on, although at the moment I don't see anything being returned at all.
The function is here:
<script type="text/javascript">
function GetSelectedItem() {
var chosen = ""
len = document.f1.r1.length
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
chosen = document.f1.r1[i].value
}
}
}
return chosen
</script>
And then in the html section I have these radio buttons, and my attempt to get the variable "chosen" output to the screen.
<form name = f1><Input type = radio Name = r1 Value = "ON" onClick=GetSelectedItem()>On
<Input type = radio Name = r1 Value = "OFF" onClick =GetSelectedItem()>Off</form>
<script type ="text/javascript">document.write(chosen)</script>
At the moment nothing seems to be getting returned from the function (although if I output the variable 'chosen' inside the function then it is working correctly.
Thanks in advance!

Here's a little simpler approach.
First, make a few corrections to your HTML, and create a container to display the output:
<form name = "f1"> <!-- the "this" in GetSelectedItem(this) is the input -->
<input type = "radio" Name = "r1" Value = "ON" onClick="GetSelectedItem(this)">On
<input type = "radio" Name = "r1" Value = "OFF" onClick ="GetSelectedItem(this)">Off
</form>
<div id="output"></div>
Then change your script to this:
<script type="text/javascript">
// Grab the output eleent
var output = document.getElementById('output');
// "el" is the parameter that references the "this" argument that was passed
function GetSelectedItem(el) {
output.innerHTML = el.value; // set its content to the value of the "el"
}
</script>
...and place it just inside the closing </body> tag.
Click here to test a working example. (jsFiddle)

document.write takes a string, and outputs it as part of the HTML. This is not a live value that updates when the variable pointing at the string is updated.
For that, you will need to perform DOM manipulation.

Change your JavaScript function to something like that:
<script type="text/javascript">
function GetSelectedItem() {
len = document.f1.r1.length;
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
document.getElementById('test').textContent = document.f1.r1[i].value;
}
}
}
</script>
And then in the body:
<div id="test"></div>

As I put in the post. Using JQuery would make your life easy for this kind of task (and many others for the matter). The really nice thing about JQuery is that it often makes your JavaScript syntax much easier then you can learn the nitty gritty details of javascript as you go.
First, add the following script tag into your html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
Now you have the JQuery API
Then you could rewrite the function like this.
function GetSelectedItem(btnRadio)
{
var jqElem = $(btnRadio);
$('#output').html(jqElem.attr('value')); //attr('<name of attributre'>) gets the value of the selected attribute
}
Your html would look like this
<form name = "f1">
<input type = "radio" name = "r1" value = "On" onclick="GetSelectedItem(this)">On
<input type = "radio" name = "r1" value = "Off" onclick ="GetSelectedItem(this)">Off
</form>
<div id="output">
</div>
More or less, the .html() can both get and set the html of the selected element. So we are just simply inserting the value into the div tag.