Javascript空输入错误

Question

我有这个输入框

  html +='<p style="font-size: 18px; ">Total Bids: <input type="text" class="total_bids" name="total_bids" placeholder="No. of Bids" required></p>';

还有按钮

html += '<a style="cursor:pointer;" onclick="'+onclick_url_bid_o_matic+'" class="btn-bidoo" id="btn-bidoo">Activate</a>';

我通过

获取输入字段的值

var totalbids = document.getElementsByName('total_bids')[0].value;

如果用户输入一个数字，它可以正常工作，但如果用户没有输入任何内容并按下激活按钮，则会出现此错误，

TypeError: 无法读取 null 的属性“样式”

我想限制用户输入某些内容，我已经在输入字段中应用了 required 但这不起作用，（我不知道为什么）任何其他可以限制用户输入内容的检查？

编辑：

我在 php 中得到了这个值，我也在那里进行了检查，

 $total_bids = PSF::requestGetPOST('totalbids');

if(!$total_bids)
        {
            return json_encode(array('error' => 'enter a number'));
        }

但它没有到达这里，因为它停止了空值错误

按钮通向此功能

bid_o_matic:function(id, uid, e, evt){

            var totalbids = document.getElementsByName('total_bids')[0].value;
            var bidval = document.getElementsByName('bidvalue')[0].value;


            parent_element = $(e).parent().parent();


            if(typeof(evt) != 'undefined'){
                evt.preventDefault();
                evt.stopPropagation();
            }
            if(e.attr('disabled') == 'disabled'){
                return;
            }
            e.button('loading');
            $.post('index.php', {
                page:'__request',
                module:'PSF_auctions',
                action:'make_bid_o_matic',
                id:id,
                uid:uid,
                totalbids: totalbids,
                bidval: bidval
            }, function(d){
                e.button('reset');
                document.getElementById("btn-bidoo").style.visibility = 'hidden';
                document.getElementById("btn-deactivate").style.visibility = 'visible';
                document.getElementById("totalbids").style.visibility = 'hidden';
                document.getElementById("bidvalue").style.visibility = 'hidden';

                if(d.error){
                //        document.getElementById("totalbids").style.visibility = 'visible';
                // document.getElementById("bidvalue").style.visibility = 'visible';
                     $.auctions.alert(d.error);
                    document.getElementById("btn-bidoo").style.visibility = 'visible';
                    document.getElementById("btn-deactivate").style.visibility = 'hidden';

                }
                else
                {
              $(current_price_element).html('<p style="color:#f47321; font-size:16px; font-weight:bold;">Current Price</p><a href="#">'+d.bid_value+'</a>')

                }

            }, 'json');
        },

并且错误发生在这一行

 document.getElementById("totalbids").style.visibility = 'hidden';

Answer 1

这是因为total_bids 是您输入的class 而不是id。您没有任何名为 totalbids 的 id。当您尝试使用id 查找对象时，例如totalbids，您一无所获。要解决它，请像这样更改您的输入。

<input type="text" id="totalbids" class="total_bids" name="total_bids" placeholder="No. of Bids" required></p>

或使用

document.getElementsByName('total_bids')[0].style.visibility = 'hidden'

Answer 2

因为你做错了。您实际上是使用 HYPERLINK 将表单发布到服务器端

html += '<a style="cursor:pointer;" onclick="'+onclick_url_bid_o_matic+'" class="btn-bidoo" id="btn-bidoo">Activate</a>';

这是提交表单的错误方式。用您的实际输入提交按钮替换它。然后它将验证您的文本字段

    html += '<input type="submit" class="btn-bidoo" id="btn-bidoo" value="Activate" />';

并在表单标签上设置 onclick_url_bid_o_matic URL

html += '<form action="' + onclick_url_bid_o_matic + '" method="post">'

或者如果您仍然想使用超链接标签，请在 Javascript/Jquery 的帮助下提交您的表单

这就是你在请求的 URL 中得到 NULL 的原因