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

Question

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.

What do you mean with field? an input element on the page? – spassvogel Mar 20 '14 at 10:03 — spassvogel, Mar 20 '14 at 10:03

score 1 · Answer 1 · answered Mar 20 '14 at 10:16

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.

geevee · Answer 2 · 2014-03-20T11:33:52.860

0

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()) });
});

edited Mar 20 '14 at 11:33

answered Mar 20 '14 at 10:03

geevee

5,411
5
30
48

please note that this field is generated dynamically. What i wanted originally is if this input field has been dynamically created, i want to attach a trigger (like onchange) that will check if this field has been filled with a value using javascript. – Mar 20 '14 at 10:06
include jQuery and use: `$(document).on('keyup', '#txtName', function(){ alert($(this).val()) });` – geevee Mar 20 '14 at 11:32

Raja Danish · Answer 3 · 2014-03-20T10:32:01.867

0

//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");
            }
        }

edited Mar 20 '14 at 10:32

answered Mar 20 '14 at 10:07

Raja Danish

235
1
7

Please note that this field is dynamically created and the value assigned to it is dynamically assigned by a javascript function. – Mar 20 '14 at 10:09
First you need to assign some value to this field. e.g. $("#txtAddress").val("hi it's my address"); Then you will check whether the field contains data or not from my above function. Thanks. – Raja Danish Mar 20 '14 at 10:12
please see edit to post and do let me know if that clarifies things. – Mar 20 '14 at 10:16

Pratik Bhoir · Answer 4 · 2014-03-20T10:22:32.520

0

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');   
    }
}

edited Mar 20 '14 at 10:22

answered Mar 20 '14 at 10:12

Pratik Bhoir

2,074
7
19
36

Łukasz Daniluk · Answer 5 · 2014-03-20T10:46:34.097

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

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

5 Answers5