javascript - TypeError: document.getElementById(...) 为空，在 RSForms

Question

TypeError: document.getElementById(...) is null ，当我点击表单继续时会产生这个错误，请任何人告诉我如何解决这个错误。

当我单击继续按钮时，按钮调用函数提交表单

<script type="text/javascript"> 

    function submitForm( )
    {  

        var form = document.paywayForm; 
        var errorString = "";
        var recurringURL = "https://www.payway.com.au/SignUp?ClientNumber=Q12882&&merchant_id=23660327&FirstPaymentDate=&CustomerNumber=&returnURL=&AddressRequired=true&PlanName=";
        // NOTE: THIS USES A TEST MERCHANT!!
        var netURL = "https://www.payway.com.au/MakePayment?BillerCode=128827&merchant_id=23660327&payment_amount=";
            if( document.getElementById("RecurringRadio").checked == true )
        {
            if( document.getElementById("frequency1").value == null || document.getElementById("frequency1").value == "" )
            {
                errorString = errorString + " payment frequency";
            }
            if( document.getElementById("SelectAmount1").value == null || document.getElementById("SelectAmount1").value == "" )
            {
                errorString = errorString + " payment amount";
            }
            if( errorString == "" )
            {
                document.location = recurringURL + document.getElementById("frequency1").value + document.getElementById("SelectAmount1").value +
                                    "&Firstname=" + document.getElementById("OneOffAmount1").value;
            }
        }

        else if( document.getElementById("OneOffRadio").checked == true )
        {
            if( document.getElementById("OneOffAmount1").value == null || document.getElementById("OneOffAmount1").value == "" )
            {
                errorString = errorString + "payment amount &nbsp; &nbsp;";
            }
            if( document.getElementById("Firstname").value == null || document.getElementById("Firstname").value == "" )
            {
                errorString = errorString + "name &nbsp; &nbsp;";
            }
            if( document.getElementById("Surname").value == null || document.getElementById("Surname").value == "" )
            {
                errorString = errorString + "surname &nbsp; &nbsp;";
            }
            if( document.getElementById("Address").value == null || document.getElementById("Address").value == "" )
            {
                errorString = errorString + "address &nbsp; &nbsp;";
            }

            if( document.getElementById("Suburb").value == null || document.getElementById("Suburb").value == "" )
            {
                errorString = errorString + "suburb &nbsp; &nbsp;";
            }
            if( document.getElementById("Postcode").value == null || document.getElementById("Postcode").value == "" )
            {
                errorString = errorString + "postcode &nbsp; &nbsp;";
            }
            if( errorString == "" )
            {    

                 var newredirect = netURL + document.getElementById("OneOffAmount1").value +
"&information_fields=Direct_Funds,Title,Firstname,Surname,Address,Suburb,Postcode,State,Country,Phone,Mobile,Email,Bmail,PAWS&payment_reference=00041234" + 
                                    "&Direct_Funds=" + document.getElementById("Direct_Funds").value + 
                                    "&Title=" + document.getElementById("Title").value + 
                                    "&Firstname=" + document.getElementById("Firstname").value + 
                                    "&Surname=" + document.getElementById("Surname").value + 
                                    "&Address=" + document.getElementById("Address").value +
                                    "&Suburb=" + document.getElementById("Suburb").value +
                                    "&Postcode=" + document.getElementById("Postcode").value +
                                    "&State=" + document.getElementById("State").value +
                                    "&Country=" + document.getElementById("Country").value +
                                    "&Phone=" + document.getElementById("Phone").value +
                                    "&Mobile=" + document.getElementById("Mobile").value +
                                    "&Email=" + document.getElementById("Email").value +
                                    "&Bmail=" + document.getElementById("Bmail").value + 
                                    "&PAWS=" + document.getElementById("PAWS").value;
                              //   alert(newredirect);
                                 document.paywayForm.submit();
                /* document.location.href = newredirect;*/
            }
        }
        else
        {   
            errorString = errorString + "You must select a donation type<br/>";
        }

        if( errorString != "" )
        {   
            //alert(errorString);
            var errorEl = document.getElementById("Error");
            errorEl.innerHTML = "<b>The following fields must be completed: </b><br/> " + errorString + "";
            //alert(errorEl.innerHTML);
        }
    }


</script>

score 2 · Accepted Answer

name假设您正在寻找带有as的下拉菜单frequency，您应该按名称获取元素 -

if( document.getElementsByName("frequency")[0] == null 
    || document.getElementsByName("frequency")[0].selectedIndex == 0  ) 
{
    /* error occuer here */
    errorString = errorString + " payment frequency";
}

由于您已经在页面上有下拉菜单，因此对 NULL 的检查将始终为 false，并且所选值将是第一个下拉值，因此如果用户不更改所选索引，则所选索引将始终为 0。因此，检查上面没有意义，因为元素不会为空，并且对于频率，所选索引将为 0 week。

您应该做的是向空白选择添加另一个选项，然后使用下面的代码查看用户是否选择了支付频率的值。

HTML 应该看起来像

<select name="frequency" class="drop" style="width: 80px;">
    <option value="" selected>Select frequency</option>
    <option value="Weekly">Week</option>
    <option value="Fortnightly">Fortnightly</option>
    <option value="Monthly">Month</option>
</select>

你的 JS 代码检查应该看起来像

if( document.getElementsByName("frequency")[0].selectedIndex == 0  ) 
{
    /* error occuer here - frequency not selected */
    errorString = errorString + " payment frequency";
}

希望这可以帮助。

score 0 · Accepted Answer

就 ID 而言，Internet Explorer 不区分大小写。但不是 Mozilla 和其他人。确保代码中的 ID 拼写正确。必须完全匹配以防万一。

score 0 · Accepted Answer

当您的元素为空（不存在）时会发生此错误。所以javascript无法获取它的值。你可以先获取元素，然后检查它是否为null，然后询问它的值，而不是直接询问值而不知道元素在HTML上是否可见。

element1 = document.getElementById("frequency1");

if(element1 != null)
{
    //code to set the value variable and test the value not to be empty.
}

score 0 · Accepted Answer

我也遇到过这个令人沮丧的问题，您可能希望也更改元素的顺序，以便元素位于 JS 之前。可能是 JS 找不到该元素，因为它没有及时加载，或者您可以加载它并使用 document.ready 功能或类似功能执行您的 JS。

通常我们的页面是这样工作的：

<head>
<scripts>
<body>
<elements>
<end>

也许如果你像这样尝试它会起作用：

<head>
<scripts>
<body>
<elements>
<script for elements>
<end>

score 0 · Accepted Answer

尝试这个，

<script>
    window.onload=function(){

    if( document.getElementById("frequency1").value == null || document.getElementById("frequency1").value == "" ) /* error occuer here */
    {
    errorString = errorString + " payment frequency";
    }

    };
</script>

javascript - TypeError: document.getElementById(...) 为空，在 RSForms

5 回答 5

Related

Reference