In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

In my HTML form, users can input their first name, last name, and phone number to create an account ID. The textboxes for first name, last name, and account ID work smoothly on all browsers except Firefox. Surprisingly, the phone number textbox doesn't allow me to type anything - the cursor disappears as soon as I start typing. However, the Javascript function still recognizes the input and creates the account ID using the last four digits of the phone number entered.

        <article>
            <h2>New Account Information</h2>
            <form>
                <fieldset id="deliveryinfo">
                    <label for="fnameinputacct">First Name</label>
                    <input type="text" id="fnameinputacct" name="fname" />
                    <label for="lnameinputacct">Last Name</label>
                    <input type="text" id="lnameinputacct" name="lname" />
                    <label for="phoneinputacct">Phone Number</label>
                    <input type="text" id="phoneinputacct" name="phone" />
                    <label for="accountidbox">Account ID</label>
                    <input type="text" id="accountidbox" name="accountid" />
                </fieldset>
                <fieldset id="submitbutton">
                    <input type="submit" id="submitBtn" value="Create Account" />
                </fieldset>
            </form>
        </article>

Here is the CSS

fieldset {
    margin-bottom: 10px;
    position: relative;
    padding: 2.5em 1em 0.5em 1em;
    background: #e3d5ba;
}

#deliveryinfo label {
    display: block;
    float: left;
    clear: left;
    margin-top: 5px;
}

#deliveryinfo input {
    display: block;
    margin-left: 130px;
}

#fnameinputacct, #lnameinputacct, #phoneinputacct, #accountidbox {
    width: 12em;
}

#submitBtn {
    font-size: 1.25em;
}

Additionally, here is the related JavaScript code:

function createID() {
    var fname = document.getElementById("fnameinputacct");
    var lname = document.getElementById("lnameinputacct");
    var phone = document.getElementById("phoneinputacct");
    var account = document.getElementById("accountidbox");
    var fields = document.getElementsByTagName("input");
    var acctid;
    var fistInit;
    var lastInit;

    if (fname != "" && lname != "" && phone != "") {
        fistInit = fname.value.charAt(0).toUpperCase();
        lastInit = lname.value.charAt(0).toUpperCase();
        acctid = fistInit + lastInit + phone.value.substring(phone.value.length - 4);
        account.value = acctid;
        newAccountArray = [];
        for (var i = 0; i < fields.length - 1; i++) {
            newAccountArray.push(fields[i].value);
        }
    }
}

Answer №1

If you're looking to enhance the structure of your form field groups, consider using a <div> or <p> tag.

Check out this resource for more information: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form

Popular CSS frameworks like Semantic UI, Bootstrap, and Material also adopt similar grouping techniques by utilizing div containers for each label/input pair.

Here's an example from Semantic UI forms: semantic ui form:

<form class="ui form">
  <div class="field">
    <label>First Name</label>
    <input type="text" name="first-name" placeholder="First Name">
  </div>
  <div class="field">
    <label>Last Name</label>
    <input type="text" name="last-name" placeholder="Last Name">
  </div>
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden">
      <label>I agree to the Terms and Conditions</label>
    </div>
  </div>
  <button class="ui button" type="submit">Submit</button>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript click or text-to-speech

Currently, I am working on a web application that is designed to automatically read text. Below is the code snippet that I am using: function hablalo() { var palabra = new SpeechSynthesisUtterance('Casilla 6 turno E18'); palab ...

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

The gradual disappearance and reappearance of a table row

I am struggling with making a row fade out when a specific select value is chosen (such as "termination"), and fade in when any other option is selected. The code works perfectly fine when the div ID is placed outside the table, but once I encapsulate it w ...

The ng-repeat directive in my Angular app's div element is being displayed as a comment

After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...

Moving the Anchor of Material UI's MultiSelect Popup on Selection

After updating from Material UI 4.2.0 to 4.9.10, I observed a change in behavior that seems to have originated in version 4.8.3. When using a Select element with the multiple attribute, I noticed that the popup menu shifts after selecting the first item. ...

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

Searching and Substituting Elements with jQuery in a Text String

After making an Ajax call, I have retrieved HTML as a string. headings .... <div class="wrapper"> <input type="text" name="email" value="" /> </div> .... I have extracted the .wrapper and input elements from the HTML string. var el ...

What is the best way to run tests on this asynchronous function using Jasmine?

My role in the service is listo: function () { var promiseResolved = $q.defer(); setTimeout(function () { promiseResolved.resolve(true); }, 2000); return promiseResolved.promise; } During my testing ...

Upload button allowing multiple values to be uploaded as a single file

I'm currently facing an issue with my list of values and upload buttons. The file upload functionality is working correctly, but the problem arises when I try to upload a file for any item in the list - it always uploads for the first item only. Here ...

"Scotchy McScotchface's to-do list application powered

How is the index.html (frontend Angular) being triggered? The tutorial mentioned that by including one of the following routes in route.js, the frontend gets called app.get('*', function(req, res) { res.sendfile('./public/index.html&ap ...

What is the best way to choose all the options in a drop-down menu using Selenium Webdriver?

Currently, I am working with Selenium WebDriver and utilizing Java. In my application, there is a dropdown menu named Product containing multiple values (for example: 60). When running the code, I first deselect all options and then select the specific opt ...

add information to a JavaScript "JSON array"

When working in JS (specifically node/js but applicable to general JS), one common issue arises. Upon receiving JSON data from the server, there is often a need to modify it before presenting it on the view. How should this be approached? Creating additi ...

The functionality of the Javascript window.print() method is limited to a single use

I've been working on an Angular project and I have the following code snippet implemented in one of the components. Everything works fine when I try to print for the first time using the onClickPrint() method, but it doesn't seem to trigger when ...

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

The specified property 'slug' is not found within the designated type 'ParsedUrlQuery | undefined'

I am faced with an issue in my code where I am attempting to retrieve the path of my page within the getServerSideProps function. However, I have encountered a problem as the type of params is currently an object. How can I convert this object into a stri ...

Experiencing trouble with calculating the total value of an array of objects due to NaN errors

I've been working on developing this web application in VUE.js, but I'm facing an issue with a specific function where I am attempting to sum the values of each object within an array. This is resulting in a NaN (Not a Number) error. Let's t ...

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

What is the best way to retrieve the value of the "Observer" object?

I am a user of Vue.js and I have the following data in this.suspendedReserveMemo: this.suspendedReserveMemo [__ob__: Observer]650: "memo3"651: "memo4"652: ""653: ""654: ""655: ""656: ""657: ""658: ""659: ""660:""661: ""662: ""length: 663__ob__: Observer {v ...

View does not display initial value selected in ReactJS

I'm having trouble setting an initial value for a select element that isn't displaying in the view. Here's my JSX: var SelectOKNO = React.createClass({ render() { return ( <div> <select className="selectpicker" ...