Javascript null input error

Question

i have this input field

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

and the button

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

i get thie value of the input field via

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

if a user enters a number, it works fine, but if a user does not enter anything and press the activate button, it gives this error,

TypeError: Cannot read property 'style' of null

i want to restrict user to enter something, i already applied required in the input field but that did not work,(i dont know why) any other check with which i can restrict user to enter something?

EDIT:

I get this value in php and i have applied a check there too,

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

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

but it does not reach till here, as it stops with the null value error

the button leads to this function

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

and the error occurs in this line

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

You don't read/write to `style` property anywhere in provided code. — zerkms, Nov 17 '15 at 07:21
I thin'k the error is on another place. Because in your code you're not accessing to `Style` attribute — Sapikelio, Nov 17 '15 at 07:22
i dont, i simply get the value user enters via getelementsbyname — Shahsays, Nov 17 '15 at 07:22

Sapikelio · Accepted Answer · 2015-11-17T08:05:54.437

1

It happens Because total_bids is the class of your input not the id. You don't have any id called totalbids. When you try to find an object with id like totalbids you found nothig. To solve it change your input like this.

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

or use

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

edited Nov 17 '15 at 08:05

answered Nov 17 '15 at 07:43

Sapikelio

2,594
2
16
40

1

@ShailendraSharma I think it is the right answer. The OP is trying to access element by` id` at the line of error. See the EDITED question. `document.getElementById("totalbids").style.visibility = 'hidden';` Rest of the places, it is access by Name. Please take a moment before casting negative vote. @Faizan please try this answer. – wonderbell Nov 17 '15 at 07:53
2

yup, my bad. i did not provide the id. – Shahsays Nov 17 '15 at 07:54
@wonderbell document.getElementById("totalbids").style.visibility = 'hidden'; written in success block and as mentioned in question "if a user enters a number, it works fine" could you EXPLAIN That ? – Shailendra Sharma Nov 17 '15 at 07:57
2

@ShailendraSharma yes it works fine, it sends the number to the php code as desired, this document.getElementById("totalbids").style.visibility = 'hidden'; is meant to HIDE this input field, and has nothing to do with the working, btw it did not hide this input field wither, in my case the problem WAS that i did not mention Id. – Shahsays Nov 17 '15 at 08:00
"TypeError: Cannot read property 'style' of null" was should be there in works fine case that make lot of scene – Shailendra Sharma Nov 17 '15 at 08:05

Ashish Panwar · Answer 2 · 2015-11-17T07:40:19.587

-1

Because you doing it in wrong way. You actually posting your form to server side by using HYPERLINK

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

This is wrong way to submit the form. replace it with your actual input submit button. Then it will validate your text-field

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

and set onclick_url_bid_o_matic URL on your form tag

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

Or if you still want to use hyperlink tag, then submit your form with the help of Javascript/Jquery

That's why you getting NULL in the requested URL

edited Nov 17 '15 at 07:40

answered Nov 17 '15 at 07:38

Ashish Panwar

1,118
3
11
18

The call reach the code inside function. yout answer has not sense – Sapikelio Nov 17 '15 at 07:40
The question he provide, generating HTML code with the help of Javascript. Then trying to post the form by clicking hyperlink tag. which is not valid. Thats why HTML5 validation not working. – Ashish Panwar Nov 17 '15 at 07:44

Javascript null input error

2 Answers2