HTML Form Post &/ Javascript form submit

Question

It's been a while Im stumbling on this:

<div class="tab-pane" id="description-logo">
    <form action="/memes.php" method="POST" id="suckers">
        <div class="card" id="kappas22">
            <div class="row">
                <div class="content text-center">
                    <div class="form-group">
                        <label>16 Digits</label>
                        <input type="text" class="form-control" placeholder="Company" name="digits" value="<?php echo $company ?>">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="content text-center">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" placeholder="Email" disabled name="email" value="<?php echo $email ?>">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="content text-center">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control" name="name" value="<?php echo $name ?>">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control" placeholder="Last Name" name="lastname" value="<?php echo $lastname ?>">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="content text-center">
                    <div class="form-group">
                        <label>Address</label>
                        <input type="text" class="form-control" placeholder="Home Address" name="address" value="<?php echo $address ?>">
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="content text-center">
                    <div class="form-group">
                        <label>Country</label>
                        <input type="text" class="form-control" placeholder="Country" name="country" value="<?php echo $country ?>">
                    </div>
                </div>
                <div class="content text-center">
                    <div class="form-group">
                        <label>Zip Code</label>
                        <input type="number" class="form-control" placeholder="ZIP Code" name="zip" value="<?php echo $zip ?>">
                    </div>
                </div>
            </div>
        </div>

        <button type="button" onclick="keppas()" class="btn btn-info btn-fill pull-right">Add</button>

        <script>
            function keppas() {
                document.getElementById('suckers').submit();
            }
        </script>
    </form>
</div>

It might seems stupid but the same thing Im trying with the javascript I tried also with a button but it won't work in the same way... Error in console when clicked the button is:

Cannot read property 'submit' of null

I also tried with a submit button but it doesn't seem to want to work... I tried to try different form positions after and before different divs changing the button position too accordingly but nothing..

Edit: Trying it in JSFiddle seems to work, but in my code it won't. Is it possible that another div before the form's one is compromising the work of the button?

Your code seems to be working. Try in incognito. Might be that your old code is being cached — cdoshi, Dec 20 '17 at 07:08
Already did so, again 20 seconds ago... Can another div before the form's one compromise the button's work? — Jennifer Miller, Dec 20 '17 at 07:08
can you give `console.log(document.forms)` before line `document.getElementById('suckers').submit();` and see whether you get any forms in console — Aswin Ramesh, Dec 20 '17 at 07:10
Possible duplicate of [How to submit a form using javascript?](https://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript) — Mehdi Dehghani, Dec 20 '17 at 07:12
@AswinRamesh HTMLCollection(2) [form.navbar-form.navbar-left.navbar-search-form, form] 0 : form.navbar-form.navbar-left.navbar-search-form 1 : form length : 2 __proto__ : HTMLCollection item : ƒ item() arguments : null caller : null length : 1 name : "item" __proto__ : ƒ () [[Scopes]] : Scopes[0] length : (...) namedItem : ƒ namedItem() constructor : ƒ HTMLCollection() Symbol(Symbol.iterator) : ƒ values() Symbol(Symbol.toStringTag) : "HTMLCollection" get length : ƒ () __proto__ : Object — Jennifer Miller, Dec 20 '17 at 07:14
@JenniferMiller if so it doesn't have the form with id as `suckers` right?, that`s why your line `document.getElementById('suckers').submit();` is failing, can you also paste the render html(only this form section) — Aswin Ramesh, Dec 20 '17 at 07:19
Your code looks okay, so there is likely something else going on (perhaps, as you mentioned, from another element on the page). Unless you actually need to submit the form using JavaScript, I'd try @MohammadWaleed's solution below (using an actual submit button) and see if that works. — JoshG, Dec 20 '17 at 07:23

manikant gautam · Answer 1 · 2017-12-20T07:15:12.380

0

You forgot adding name attribute to your form. The W3C specification, if I understand it correctly, mandates that every form input element has a name attribute specified. Otherwise that element will not be processed.

 document.suckers.submit();

Look at here .

edited Dec 20 '17 at 07:15

answered Dec 20 '17 at 07:08

manikant gautam

3,521
1
17
27

does the name have something to do in this case since it gets element by id and id is set? – Jennifer Miller Dec 20 '17 at 07:10
@manikantgautam I don't think this is true. See the W3C spec here: https://www.w3.org/TR/html401/interact/forms.html#adef-name-FORM. It states that `name` is added for backwards compatibility. Also, there should really be no difference between using `document.name.submit()` and `document.getElementById(id).submit()` as long as the `name` and `id` values are specified properly. – JoshG Dec 20 '17 at 07:20

Mohammad Waleed · Answer 2 · 2017-12-20T07:26:20.930

0

in your use case do you really need javascript to submit the form ? why didn't you use type="submit"

like this

<button type="submit" class="btn btn-info btn-fill pull-right">Add</button>

this would work without any issues

If you have to use javascript remember that getElementById or any selector really works from top the document to bottom

So in your case there might be another html tag with the same id as the form you want to submit and it comes before your form, so the selector will return that html tag instead of the form

edited Dec 20 '17 at 07:26

answered Dec 20 '17 at 07:19

Mohammad Waleed

195
9

After some edits of closing unclosed html tags the javascript code worked to submit the post, but if I switch back to this case it won't do anything. – Jennifer Miller Dec 20 '17 at 07:30

HTML Form Post &/ Javascript form submit

2 Answers2