What could be causing the error to occur in the form when I try to submit it?

After creating a page in bootstrap 4, I encountered an issue with the modal. Whenever I click on any input field or button inside the modal, it shows the same error message. I'm quite confused and don't know what's causing this problem. Upon clicking on an input field in the form, I receive the following error message in the console:

tab.js:146 Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at i.t._activate (tab.js:146)
    at i.t.show (tab.js:112)
    at HTMLDivElement.<anonymous> (tab.js:230)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.i._jQueryInterface [as tab] (tab.js:217)
    at HTMLDivElement.<anonymous> (tab.js:245)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

The complete code is provided below. The issue occurs within the modal in the account tab. When you navigate to the account tab and click on log in, you will see the error code in the console, while nothing happens on the actual page.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="autor" content="time">
    <meta name="description" content="shows you tech tutorial and life tips.">
    <title> Life</title>
    <link rel="stylesheet" href="/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
    .....
    .....
  

        </div>
  
      <!-- Modal -->
              <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-
                <...... more modal content .....>
         

       

  </body>
</html>
Below is the tab.js file for reference: 

import $ from 'jquery'
    ......

export default Tab

javascriptconsolebootstrap-4

Answer №1

Your form was enclosed within an additional div tag

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="autor" content="time">
    <meta name="description" content="provides tech tutorials and life tips.">
    <title> Life</title>
    <link rel="stylesheet" href="/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- Jumbotron -->
    <div class="jumbotron" style="background-color: rgba(0,0,0,0.78);border-radius:0px;">
      <!-- logo -->
      <div class="logo">
            <div class="block">

            </div>
            <div class="tagline">

            </div>
      </div>
      <!-- end of logo section -->
    </div>
    <!-- End of Jumbotron section -->

    <!-- Navigation -->
    <ul class="nav nav-tabs justify-content-end">
            <li class="nav-item">
              <a class="nav-link" href="">Home</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">About</a>
            </li>

            <li class="nav-item">
                <a class="nav-link dropdown"  id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>

                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Profile</a>
                            <a class="dropdown-item" href="#">Setting</a>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#MyModal">Log In</a>
                        </div>

            </li>
    </ul>
  <!-- End of Navigation -->

<!-- <button class="btn btn-primary" data-toggle="modal" data-target="#MyModal" type="button" name="button">Modal</button> -->
    <!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">

        <section>
          <div class="container">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active justify-content" id="nav-signIn-tab" data-toggle="tab" href="#nav-signIn" role="tab" aria-controls="nav-signIn" aria-selected="true">Sign In</a>
              <a class="nav-item nav-link justify-content" id="nav-signUp-tab" data-toggle="tab" href="#nav-signUp" role="tab" aria-controls="nav-signUp" aria-selected="false">Sign Up</a>
            </div>
          </div>
        </section>

      </div>

          <div class="modal-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-signIn" role="tabpanel" aria-labelledby="nav-signIn-tab">
                <!-- Sign In tab -->
                <form class="frm-group" action="../test.php" method="post" onsubmit="">
                  <label for="email">E Mail:</label>
                  <input class="form-control" type="text" id="email" name="email" value="" placeholder="E-Mail">
                  <label for="Password">Password:</label>
                  <input class="form-control" type="password" id="pass" name="Password" value="" placeholder="Password">
                  <span><a href="">Forgot Password?</a></span><br>
                  <button class="btn btn-primary" type="submit" name="button">Log In</button>
                  <span id='erroin'></span>
                </form>
                <!-- <button class="btn btn-secondary" type="submit" name="button" href="#nav-signUp" aria-controls="nav-signUp">Sign Up</button><br> -->
              </div>
              <div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab">
                  <form class="frm-group" action="">
                    <label for="First Name">First Name:</label>
                    <input class="form-control" type="text" id="fname" name="fname" value="" placeholder="First Name">
                    <label for="Last Name">Last Name:</label>
                    <input class="form-control" type="text" id="lname" name="lname" value="" placeholder="Last Name">
                    <label for="email">E Mail:</label>
                    <input class="form-control" type="text" id="upemail" name="upemail" value="" placeholder="E-Mail">
                    <label for="Password">Password:</label>
                    <input class="form-control" type="password" id="uppass" name="uppassword" value="" placeholder="Password"><br>
                    <button class="btn btn-secondary" type="button" name="button">Register</button><br>
                    <span id='erroup'></span>
                  </form>
                </div>
              </div>
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

      </div>
    </div>
  </div>

        <!-- End of modal section -->


  </body>
</html>

Answer №2

The issue may lie within line 146 of your tab.js file. Make sure to check for any variables that do not have the NodeName property. Feel free to share the code from your tab.js file here for further analysis.

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

The plugin "react" encountered a conflict while trying to sync with both the "package.json" and the "BaseConfig" files

Whenever I open Terminal in my react folder and try to start the react app using npm start, I always end up encountering an error on the browser. The error message states that the "react" plugin is conflicting between two paths: "package.json » eslint ...

javascriptreactjs

An error occurred in react-dates where the property 'clone' of null could not be read, resulting in a new DayPicker

I'm encountering an issue with the following code snippet: const [focusedInput, setFocusedInput] = useState('startDate'); const onFocusChange = fInput => { setFocusedInput(!fInput ? 'startDate' : fInput); }; <DayPickerRang ...

javascriptreactjscalendarreact-dates

ASP.NET repeater causing jQuery scrollTop to malfunction after first use

I am facing a peculiar issue where I need to scroll through repeater items in a RadWindow using arrow keys in an ASP.NET application. Below is the code snippet: function isScrolledIntoView(elem) { var docViewTop; var docViewBottom ...

javascriptjqueryasp.netscrollrepeater

Using Html Language to convert text into a clickable LINK

I need some assistance with coding a html code. Can you help me create a link from normal text in the LINK-COLUMN? Currently, it is just plain text and I want it to be a clickable link. I have been trying on my own but haven't found a solution yet. I ...

javascriptjqueryhtmljsonajax

What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection? HTML <table s ...

javascripthtmlcss

Warnings about NgZone timeouts are displayed in Chrome DevTools even though the timeouts are actually executing outside of the

Is it common to receive a warning in Chrome DevTools like this? [Violation] 'setTimeout' handler took 103ms zone.js:1894 even when all timeouts are executed outside of ngzone? I personally follow this approach: this.zone.runOutsideAngular(() = ...

javascriptangulartimeoutgoogle-chrome-devtoolsangular2-changedetection

Using D3.js for Page Navigation

For my D3 bar charts, I am working with a substantial amount of JSON data obtained from an API. My goal is to display only 10-20 bars at a time. Would it be possible to implement pagination using D3 itself, or should I explore alternative methods (such a ...

javascriptjsonchartspaginationd3.js

Investigating the memory leak caused by jQuery/Sizzle when checking the

During the debugging process of my application with the 'Profiles' feature in DevTools, I noticed an accumulation of "Detached DOM tree's". These detached nodes contain a retaining tree primarily made up of checkContext functions (which orig ...

javascriptjquerydommemory-leaksgoogle-chrome-devtools

Retrieve the URI data from the response object using Axios

Currently, I'm in the process of transitioning a node project from utilizing request.js to incorporating axios.js While using the request package, extracting URI data from the response object can be achieved like so: request(req, (err, response) =&g ...

javascriptnode.jsrequestaxios

Make sure to clear the timeout in JavaScript before re-calling the function again

Scenario: Whenever a user clicks on a cell within the "#test" table, the "update_func" function will run and repeat every 10 seconds. If the user clicks on the same cell or another cell, multiple instances of "update_func" start running simultaneously ev ...

javascriptajax

Generating an array of objects using Jquery from XML data

I need assistance with extracting data from XML text nodes stored in a variable and then creating an array of objects using jQuery. The XML data I have is as follows: var header = ['name', 'data1', 'data2']; var data = &apos ...

javascriptjqueryxmlhtml-table

vue.js watch function failing to update

Hello, I'm just getting started with Vue and currently facing a challenge. I am attempting to update a couple of variables based on changes in another computed variable. The computed variable is connected to a Vuex store and functions correctly, displ ...

javascriptvue.jsvuexvuetify.js

React Alert: __WEBPACK_IMPORTED_MODULE_4_jquery___default(...) is throwing an error and modal function is not working

I've been working on a React project that utilizes Bootstrap 4, which I've imported through a CDN. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis ...

jqueryreactjsbootstrap-4

How can I transfer checkbox data to another page utilizing ajax or javascript?

These are the checkboxes I am using and I want to pass the selected items' values to another page using ajax with javascript. I am looking to send the selected checkbox values through ajax to a different page... Your help would be greatly appreciate ...

javascriptajaxjquerycheckbox

The mongoose.populate() method is failing to display the populated content

// defining user schema const mongoose = require('mongoose'); const {ChatRoom} = require('./chatRoom'); const userSchema = new mongoose.Schema({ _id: mongoose.Schema.Types.ObjectId, username:{ type: 'String', unique ...

javascriptmongoose-populate

The name field in the request body is currently undefined

Currently, I am working on developing a basic blog page using technologies such as ejs, JavaScript, Node.js, Express, and body-parser. While working on passing inputs to the command line, specifically for the title, I encountered an issue. When I used req ...

javascriptnode.jsexpressbody-parser

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

javascriptjqueryhtmlcss

Creating a custom Chrome extension with the ability to modify the pop-up window instead of the web page

Is there a way to modify the content inside my extension's pop-up without affecting the web page being viewed by the user? Also, how can I ensure that my dropdown list functions correctly? I have two dropdown lists where selecting an option from the ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

Tips for resolving the issue with TypeError: arr[Symbol.iterator] not being a function in my React application

I am facing an issue while trying to follow this tutorial. Although I have diligently followed the code provided, I seem to be encountering an error that the tutorial creator did not experience. This problem arose at the 2:09:30 mark in the tutorial. Afte ...

javascriptreactjsreact-hooks

The div element is unable to activate the modal due to tabindex issues

Seeking Assistance with a Specific Scenario I have a specific layout where a div is enclosing an image. The desired functionality is that when the div is clicked with a mouse, a small tooltip modal should appear displaying address information. This can be ...

javascriptjqueryhtmlcsstwitter-bootstrap