Подсчет количества заполненных входов

Question

У меня есть 4 входа в форме, и я хочу сделать расчет на основе количества заполненных входов. Я придумал это, и он работает в IE, но не в FF. Кажется, что FF не нравится несколько document.getElementById. Любая помощь будет оценена по достоинству.

<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"> 

Answer 1

• Вы не установили атрибут «ID» на некоторых элементах
• Вы реинициализирована переменные в «если» пунктов.

Рабочий код:

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

Вот рабочий jsFiddle: http://jsfiddle.net/YC6J7/1/

Answer 2

Вам нужно установить атрибут ID для входа, а также имя, в противном случае getElementById работы непоследовательно кросс-браузер.

Например:

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

(. Технически name не является обязательным для целей document.getElementById, поскольку id принято довольно универсально, но вы, вероятно, хотите, чтобы сохранить его, так что ваши формы представить правильно)

Для получения более подробной информации см: Document.getElementById() returns element with name equal to id specified

Answer 3

Вы можете поставить inputs в form и сделать так:

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