CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapfirefox
JulianJ
JulianJ

Reputation: 1315

Why does this select form not work in Firefox?

I have a form on my site that uses Bootstrap 3. It works just fine in IE, Chrome and Safari but for some reason the drop down option element at the end of the form will not work in Firefox. I have tried on different operating systems. The selected option will not 'stay'in the drop down field. Can anyone give me a clue?

  <!--------The signup form------->
                <form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
<div class="form">
                  <div class="form-group">

                    <input id="username" type="text" class="form-control" onblur="checkusername()"
                    onkeyup="restrict('username')" maxlength="16" placeholder="Username">
                    <br>
                    <span id="unamestatus"></span>
<br>
                    <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                    onkeyup="restrict('email')" maxlength="88">
                   <br>
                    <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                    maxlength="100">
                    <br>
                    <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                    maxlength="100">

                  <br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                    <select id="accounttype" class="form-control"  onfocus="emptyElement('status')"></a>
                      <option value="" disabled selected>
                       Choose Account Type
                      </option>
 <option value="b">
                        I am an artist
                      </option>
                      <option value="a">
                       I am looking for artists
                      </option>
                 </select>

</br>

                  <br>
                  <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                    Create Account
                  </button>
                  <br>
                  <span id="status" style="color: white"></span>
                </form>
                <!--------End of form------->

Upvotes: 0

Views: 522

Answers (2)

andrew
andrew

Reputation: 9583

You the opening of a select element nested inside an anchor (a) which is invalid markup.

You also have two missing closing div tags before the end of the form.

Also, disabled is not a valid attribute for an option tag.

Correctly formatting your code makes these errors easier to find

<form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
    <div class="form">
        <div class="form-group">

            <input id="username" type="text" class="form-control" onblur="checkusername()"
                   onkeyup="restrict('username')" maxlength="16" placeholder="Username">
            <br>
            <span id="unamestatus"></span>
            <br>
            <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                   onkeyup="restrict('email')" maxlength="88">
            <br>
            <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                   maxlength="100">
            <br>
            <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                   maxlength="100">

            <br>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            </a> <!--  ^^ select element inside anchor ^^ -->
            <option value="" disabled selected> <!--  <-- disabled should be on select element, not option -->
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
            </select>

            </br>

            <br>
            <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                Create Account
            </button>
            <br>
            <span id="status" style="color: white"></span>
         </div>
    </div>
</form>

Upvotes: 1

Adrian
Adrian

Reputation: 2012

Im unsure what the <a> is for but it the cause of the specific problem, changing to below will make it work

 <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want"></a>
      <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            <option value="" disabled selected>
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
      </select>

Upvotes: 1

Related Questions