Counting number of inputs filled

Question

I have 4 inputs on a form and I want to do a calculation based on the number of inputs filled. I have come up with this and it works in IE but not in FF. FF doesnt seem to like the multiple document.getElementById. Any help would be appreciated.

<script type="text/javascript" language="javascript">
function countlines(what) {
var headline = 1 ;
var oneline = 1 ;
var twoline = 1 ;
var webline = 1 ;

var valhead = document.getElementById('adverttexthead').value;
if (/^\s*$/g.test(valhead) || valhead.indexOf('\n') != -1)
{var headline = 0};

var valone = document.getElementById('adverttextone').value;
if (/^\s*$/g.test(valone) || valone.indexOf('\n') != -1)
{var oneline = 0};

var valtwo = document.getElementById('adverttexttwo').value;
if (/^\s*$/g.test(valtwo) || valtwo.indexOf('\n') != -1)
{var twoline = 0};

var valweb = document.getElementById('adverttextweb').value;
if (/^\s*$/g.test(valweb) || valweb.indexOf('\n') != -1)
{var webline = 0};

(document.getElementById('webcost').value = "$" + ((headline + oneline + twoline + webline) * 16.50).toFixed(2));
(document.getElementById('totallines').value = headline + oneline + twoline + webline);
}
</script>

HTML

<input name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)"> 
<br>
<input name="adverttextone" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)"> 
<br>
<input name="adverttexttwo" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input name="adverttextweb" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">


<input name="totallines" id="totallines" size="4" readonly="readonly" type="text">
<input name="webcost" id="webcost" size="6" readonly="readonly" type="text">

StackSlave · Answer 1 · 2013-09-07T00:21:03.190

2

You could put the inputs in a form and do like so:

function countFormElements(formNumber){
  var fn = !formNumber ? 0 : formNumber;
  var frm = document.getElementsByTagName('form')[fn], n = 0;
  for(var i=0,l=frm.length; i<l; i++){
    if(frm.elements[i].value !== '')n++;
  }
  return n;
}
console.log(countFormElements());

edited Sep 07 '13 at 00:21

answered Sep 06 '13 at 23:53

StackSlave

10,613
2
18
35

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

You'll need to set the id attribute for the inputs as well as the name, otherwise getElementById works inconsistently cross browser.

For instance:

<input id="adverttexthead" name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">

(Technically name is optional for purposes of document.getElementById, since id is accepted pretty universally, but you'll probably want to keep it so your forms submit correctly.)

For more details, see: Document.getElementById() returns element with name equal to id specified

edited May 23 '17 at 10:25

Community

1
1

answered Sep 06 '13 at 23:53

Flight Odyssey

2,267
18
25

It now works in both IE and FF. Just why I didn't add the id I dont know.Thanks. – user2755923 Sep 07 '13 at 00:13

score 0 · Accepted Answer · answered Sep 06 '13 at 23:56

You did not set the 'id' attribute on some elements
You reinitialized your variables in the 'if' clauses.

Working code:

<input id="adverttexthead" name="adverttexthead" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttextone" name="adverttextone" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttexttwo" name="adverttexttwo" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<br>
<input id="adverttextweb" name="adverttextweb" size="46" TYPE="text" onblur="countlines(this)" onkeypress="countlines(this)">
<input id="totallines" name="totallines" size="4" readonly="readonly" type="text">
<input id="webcost" name="webcost" size="6" readonly="readonly" type="text">

function countlines(what) {
    var headline = 1;
    var oneline = 1;
    var twoline = 1;
    var webline = 1;

    var valhead = document.getElementById('adverttexthead').value;
    if (/^\s*$/g.test(valhead) || valhead.indexOf('\n') != -1) {
        headline = 0
    };

    var valone = document.getElementById('adverttextone').value;
    if (/^\s*$/g.test(valone) || valone.indexOf('\n') != -1) {
        oneline = 0
    };

    var valtwo = document.getElementById('adverttexttwo').value;
    if (/^\s*$/g.test(valtwo) || valtwo.indexOf('\n') != -1) {
        twoline = 0
    };

    var valweb = document.getElementById('adverttextweb').value;
    if (/^\s*$/g.test(valweb) || valweb.indexOf('\n') != -1) {
        webline = 0
    };

    (document.getElementById('webcost').value = "$" + ((headline + oneline + twoline + webline) * 16.50).toFixed(2));
    (document.getElementById('totallines').value = headline + oneline + twoline + webline);
}

Here is a working jsFiddle: http://jsfiddle.net/YC6J7/1/

Made changes as suggested and it now works in both IE and FF. Thanks! — user2755923, Sep 07 '13 at 00:39

Counting number of inputs filled

3 Answers3