Why I am getting error in form when clicking on form
Question
Created one page in bootstrap 4. There is a modal. Inside the modal if you click on any input field or any button, the same error is shown. I really do not know whats going on here? When I do click in the input field in that form I get error message in console as:-
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)
Yes below is the total code. There is a modal in the account tab. When you click on account tab then click on log in and you will be getting the error code in console and in the page itself nothing happens.
<!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"></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> <!-- logo ends here --> </div> <!-- Jumbotron ends here --> <!-- Nav --> <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> <!-- Nav ends --> <!-- <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 --> <div class="signintab" data-toggle="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> <div class="tab-pane fade" id="nav-signUp" role="tabpanel" aria-labelledby="nav-signUp-tab"><div class="signuptab" data-toggle="tab"> <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> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- modal ends here --> </body> </html>
\n\n import $ from 'jquery' import Util from './util' /** * -------------------------------------------------------------------------- * Bootstrap (v4.1.3): tab.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ const Tab = (($) => { /** * ------------------------------------------------------------------------ * Constants * ------------------------------------------------------------------------ */ const NAME = 'tab' const VERSION = '4.1.3' const DATA_KEY = 'bs.tab' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const JQUERY_NO_CONFLICT = $.fn[NAME] const Event = { HIDE : `hide${EVENT_KEY}`, HIDDEN : `hidden${EVENT_KEY}`, SHOW : `show${EVENT_KEY}`, SHOWN : `shown${EVENT_KEY}`, CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { DROPDOWN_MENU : 'dropdown-menu', ACTIVE : 'active', DISABLED : 'disabled', FADE : 'fade', SHOW : 'show' } const Selector = { DROPDOWN : '.dropdown', NAV_LIST_GROUP : '.nav, .list-group', ACTIVE : '.active', ACTIVE_UL : '> li > .active', DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]', DROPDOWN_TOGGLE : '.dropdown-toggle', DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' } /** * ------------------------------------------------------------------------ * Class Definition * ------------------------------------------------------------------------ */ class Tab { constructor(element) { this._element = element } // Getters static get VERSION() { return VERSION } // Public show() { if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE) || $(this._element).hasClass(ClassName.DISABLED)) { return } let target let previous const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0] const selector = Util.getSelectorFromElement(this._element) if (listElement) { const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE previous = $.makeArray($(listElement).find(itemSelector)) previous = previous[previous.length - 1] } const hideEvent = $.Event(Event.HIDE, { relatedTarget: this._element }) const showEvent = $.Event(Event.SHOW, { relatedTarget: previous }) if (previous) { $(previous).trigger(hideEvent) } $(this._element).trigger(showEvent) if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) { return } if (selector) { target = document.querySelector(selector) } this._activate( this._element, listElement ) const complete = () => { const hiddenEvent = $.Event(Event.HIDDEN, { relatedTarget: this._element }) const shownEvent = $.Event(Event.SHOWN, { relatedTarget: previous }) $(previous).trigger(hiddenEvent) $(this._element).trigger(shownEvent) } if (target) { this._activate(target, target.parentNode, complete) } else { complete() } } dispose() { $.removeData(this._element, DATA_KEY) this._element = null } // Private _activate(element, container, callback) { let activeElements if (container.nodeName === 'UL') { activeElements = $(container).find(Selector.ACTIVE_UL) } else { activeElements = $(container).children(Selector.ACTIVE) } const active = activeElements[0] const isTransitioning = callback && (active && $(active).hasClass(ClassName.FADE)) const complete = () => this._transitionComplete( element, active, callback ) if (active && isTransitioning) { const transitionDuration = Util.getTransitionDurationFromElement(active) $(active) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(transitionDuration) } else { complete() } } _transitionComplete(element, active, callback) { if (active) { $(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`) const dropdownChild = $(active.parentNode).find( Selector.DROPDOWN_ACTIVE_CHILD )[0] if (dropdownChild) { $(dropdownChild).removeClass(ClassName.ACTIVE) } if (active.getAttribute('role') === 'tab') { active.setAttribute('aria-selected', false) } } $(element).addClass(ClassName.ACTIVE) if (element.getAttribute('role') === 'tab') { element.setAttribute('aria-selected', true) } Util.reflow(element) $(element).addClass(ClassName.SHOW) if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] if (dropdownElement) { const dropdownToggleList = [].slice.call(dropdownElement.querySelectorAll(Selector.DROPDOWN_TOGGLE)) $(dropdownToggleList).addClass(ClassName.ACTIVE) } element.setAttribute('aria-expanded', true) } if (callback) { callback() } } // Static static _jQueryInterface(config) { return this.each(function () { const $this = $(this) let data = $this.data(DATA_KEY) if (!data) { data = new Tab(this) $this.data(DATA_KEY, data) } if (typeof config === 'string') { if (typeof data[config] === 'undefined') { throw new TypeError(`No method named "${config}"`) } data[config]() } }) } } /** * ------------------------------------------------------------------------ * Data Api implementation * ------------------------------------------------------------------------ */ $(document) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { event.preventDefault() Tab._jQueryInterface.call($(this), 'show') }) /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ $.fn[NAME] = Tab._jQueryInterface $.fn[NAME].Constructor = Tab $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Tab._jQueryInterface } return Tab })($) export default Tab
2 answers
solution1
1 ACCPTED 2018-10-14 15:55:25
Your form was wrapped inside an extra div tag
<!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"></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>
<!-- logo ends here -->
</div>
<!-- Jumbotron ends here -->
<!-- Nav -->
<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>
<!-- Nav ends -->
<!-- <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>
<!-- modal ends here -->
</body>
</html>
solution2
0 2018-10-14 15:07:55
this error is probably in your tab.js file on line 146. It should certainly be a variable that does not have the NodeName property. Put your code of your tab.js file here to analyze
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML Form getting disappear when i am clicking on tab?
Why am I getting a 500 error on form submit?
Why am I getting attach() error when closing a modal with a vee-validated form
Why am I getting a Cannot POST /api/ error when trying to post to a form?
why am I getting form is not defined?
Why am I getting 'object is not a function' on this form?
why i am getting this error while i run react app and click submit in form
Angularjs - Why I am getting this InvalidValue error while using Autocomplete address form of Google
null is not an object (evaluating 'document.getElementById('logout-form').submit') - Why am I getting this error?
Why am I getting error: TypeError: “_co.form.submit is not a function”?
Related Tags