CODEWITHSUNDEEP
javascripthtmlforms
matchifang
matchifang

Reputation: 5450

HTML has 2 forms, but document.forms only finds 1

UPDATE: my own mistake. I should have used document.getElementById("auxInputImageForm")Thank you for every comment.

I have 2 forms in my HTML (auxInputImageForm and myFormID):

<div class="row">
    <div class="col-md-5" style="padding:0px;"></div>
    <div class="col-md-2" style="background-color:red; padding:0px;">
       <div id="methodDiv">
        <form id="auxInputImageForm">
            <input class="btn btn-default" type=file name=file style="width:190px; margin-top:5px;padding-left:0px; padding-right:0px;">
            <input id="uploadBtn" class="btn btn-primary btn-sm" type=submit value=Upload style="margin-top:5px; margin-left:60px">
        </form> 
      </div>
  </div


  <div class="col-md-5" style="padding:0px;">
    <form id="myFormId">
        <input class="btn btn-default" type=file name=file style="width:190px; margin-top:5px;padding-left:0px; padding-right:0px;">
        <input id="uploadBtn" class="btn btn-primary btn-sm" type=submit value=Upload style="margin-top:5px; margin-left:60px">
    </form> 
  </div>
</div

However, document.forms only returns myFormID. Below is the console.log(document.forms): enter image description here

Also, I tried document.getElementById("auxInputImage"), but it returns null.

Is there a different javascript function I can use or is there something wrong with the code? Any help is much appreciated. Thank you

Upvotes: 0

Views: 76

Answers (2)

user2575725
user2575725

Reputation:

The issue lies in your html, have a closer look at this part:

         </form> 
      </div>
  </div   <!-- not closed, missing (>) -->

This is repeated twice in your current post. Correct this and document.forms works as expected.

console.log(document.forms.length)
<div class="col-md-2" style="background-color:red; padding:0px;">
  <div id="methodDiv">
    <form id="auxInputImageForm">
      <input class="btn btn-default" type=file name=file style="width:190px; margin-top:5px;padding-left:0px; padding-right:0px;">
      <input id="uploadBtn" class="btn btn-primary btn-sm" type=submit value=Upload style="margin-top:5px; margin-left:60px">
    </form>
  </div>
</div>
<!-- added (>) -->
<div class="col-md-5" style="padding:0px;">
  <form id="myFormId">
    <input class="btn btn-default" type=file name=file style="width:190px; margin-top:5px;padding-left:0px; padding-right:0px;">
    <input id="uploadBtn" class="btn btn-primary btn-sm" type=submit value=Upload style="margin-top:5px; margin-left:60px">
  </form>
</div>

Upvotes: 1

苏理煌
苏理煌

Reputation: 11

I use jquery to run you code, I hasn't this problem

doc

console

can you copy you js code to problem

Upvotes: 0

Related Questions