We Keep Coding

Specific Javascript function not recognized? (ASP.NET MVC) JS/CSS/HTML

I am trying to use a form wizard within my program using a template i had found off the internet at freefrontend. However the one JS function being used is not being picked up in the program. As shown by the console on chrome, i receive the following exception:
My program code is as follows (HTML / JS)
#{
ViewBag.Title = "LoginSignUp";
Layout = "~/Views/Shared/LoginSignUp.cshtml";
#Scripts.Render("~/bundles/jquery")
}
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152092/smartwizard/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152091/smartwizard/smart_wizard_theme_arrows.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152197/smartwizard/jquery.smartWizard.min.js"></script>
<div class="container">
<div class="row d-flex justify-content-center mt-200"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch multistep Wizard </button> </div> <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Smart Wizard modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Account Info</small></li>
<li>Step 2<br /><small>Personal Info</small></li>
<li>Step 3<br /><small>Payment Info</small></li>
<li>Step 4<br /><small>Confirm details</small></li>
</ul>
<div class="mt-4">
<div id="step-1">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Name" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Email" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Password" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Repeat password" required> </div>
</div>
</div>
<div id="step-2">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Address" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="City" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="State" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Country" required> </div>
</div>
</div>
<div id="step-3" class="">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Number" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Holder Name" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="CVV" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Mobile Number" required> </div>
</div>
</div>
<div id="step-4" class="">
<div class="row">
<div class="col-md-12"> <span>Thanks For submitting your details with BBBootstrap.com. we will send you a confirmation email. We will review your details and revert back.</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#smartwizard').smartWizard({
selected: 0,
theme: 'arrows',
autoAdjustHeight: true,
transitionEffect: 'fade',
showStepURLhash: false,
});
});
</script>
CSS has been placed in a separate file and appears to be working correctly.
Any suggestions as to why this may be?

You just need to include the jQuery library before the other libraries.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Code below the textarea getting inside the textarea as its value?

I am implementing this Bootstrap Modal on click of a button. But on clicking the button, the modal appears on screen, every field is correctly displayed except the textarea field, the button code and file upload code below it, is getting inside of the textarea, why is it so ? Please check the following code for the Modal:
<div class="modal fade" id="myModalContactt" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content tuningModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body tuningModalTwo">
<form action="/tuningModal/" style="padding: 0% 7%;">
<h3>GET IN TOUCH WITH US</h3>
<div class="row form-group">
<label>Your Name(required)</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="row form-group">
<label>Email(required)</label>
<input type="email" class="form-control" id="email" name="email"/>
</div>
<div class="row form-group">
<label>Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone"/>
</div>
<div class="row form-group">
<label>Car Brand</label>
<input type="text" class="form-control" id="carBrand" name="carBrand"/>
</div>
<div class="row form-group">
<label>Model</label>
<input type="text" class="form-control" id="model" name="model"/>
</div>
<div class="row form-group">
<label>Your Message</label>
<textarea rows="10" class="form-control" id="message" name="message"/>
</div>
<div class="row form-group">
<label>Upload your software(Note:please upload in zip filetype)</label>
<input type="file" class="form-control-file" name="softUploadFile"/>
</div>
<div class="row form-group" style="margin-top:20px;margin-bottom:20px">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And below is the code for the Button on which I've set the data-target and data-toggle to this Modal:
<div id="red_div2" class="row ">
<h2 id="redtext2" class="wow bounceInRight">QUESTIONS OR INTEREST IN ANY OF OUR PRODUCTS? </h2>
<button type="button" class="btn btn-info" id="AskYourQuestion" data-toggle="modal" data-target="#myModalContactt">
ASK YOUR QUESTION
<i class="fa fa-angle-double-right"></i>
</button>
</div>
And it is appearing like this in the browser:

Close textarea tag
<textarea rows="10" class="form-control" id="message" name="message"></texarea>

<textarea rows="10" class="form-control" id="message" name="message"/>
textarea is not a self-closing tag (also called a void element).
Self-closing tags allow the the close part on the tag itself, eg <input/> while non-self-closing tags must have an explicitly matching close tag, eg:
<textarea></textarea>
these are typically where there may be content inside the tag, eg
<textarea>appears inside the textarea</textarea>
More info from the spec: https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements
and https://stackoverflow.com/a/3558200/2181514

How to Upload both file and data using ajax , jquery and spring mvc

I want to upload the data along with the file using ajax , query and Spring MVC Below is the my modal pop up . please can anyone help me with this out.
<!-- Modal -->
<div id="fileUpload" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="changeTitle">
<spring:message code="ulearn.summary.mastercourse.addreference" />
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="masterCourseItemForm" onsubmit="return false;">
<div class="form-group">
<label class="control-label col-sm-2" for="name"><spring:message code="ulearn.summary.name.label"/></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="" value="" autofocus="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd"><spring:message code="ulearn.summary.description.label"/></label>
<div class="col-sm-10">
<textarea type="text" class="form-control" id="description" placeholder="" value=""></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">File Type</label>
<div class="col-sm-10">
<select name="Select" class="selectpicker form-control" id="stateLst">
<option value="">Select</option>
<c:forEach items="${fileList}" var="option">
<option value="${option}">
<c:out value="${option}"></c:out>
</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Upload</label>
<div class="col-sm-10">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-default btn-file" style="width: 468px;"><span>Choose file</span><input type="file" multiple/></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="submit" data- backdrop="static">
<spring:messagecode="ulearn.btn.upload.label"/>
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"> <spring:messagecode="ulearn.btn.cancel.label"/>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

You probably want to take a look at multipart/form-data posts.
Here is some additional info on the topic:
http://hmkcode.com/spring-mvc-upload-file-ajax-jquery-formdata/
Upload file + Form Data + Spring MVC + JQuery

I tried to use bootstrap modal class to make a popup signup form but popup doesn't work

I tried to use bootstrap modal class to make a popup signup form and when i press the signup button window just fade and reload that's it. popup doesn't work. I'm using bootstrap 3.3.6. please help.
this is the sign up button code:
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
I am using the signup button inside a nav (navbar-inverse).
this is the popup form code:
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I coded this popup form code below the signup button code and that means it's inside the navbar

Please check this:
I have created a JS Fiddle and it is working fine here.
---- https://jsfiddle.net/DTcHh/19115/
You must include Bootstrap js and css file to your project in order to make it work.

Here your working code
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

I fixed the problem. I find out the cause is that button type should be button not submit. I changed the button type to button then it worked.

Data-target modal is not working in html

When i am clicking on login option ,my login popup model is not displaying ,where is the problem in this code.
<li> <span class="glyphicon glyphicon-log-in"></span>LogIn</li>
data target code is here,after clicking on login tnis model is called for pop up but pop model is not coming.
<!-- Modal content-->
<div class="modal-dialog">
<div class="modal-content col-md-8">
<div class="modal-header">
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> User Login</h4>
</div>
<form method="post" id="login_form" action="<?= site_url('api/login') ?>" >
<!--?php echo form_open('welcome/checkLogin'); ?-->
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Username *</label>
<!--input type="text" name="email"/-->
<input type="text" id="username" name="email" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-10">
<label>Password *</label>
<!--input type="password" name="pass"/-->
<input type="password" id="password" name="pass" class="form-control required" value="">
</div>
</div>
</div>
</div>
<div class="error" id="logerror"></div>
<!-- end Add popup -->
<div class="modal-footer">
<input type="hidden" name="id" value="" id="id">
<!--input type="submit" value="Login" name="submit"/-->
<button type="submit" id="btn-login" value="Login" name="submit" class="btn btn-primary pull-right btn-xs">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

You must assign an ID "myModal" to the modal content.
<div id="myModal" class="modal-dialog">
This allows your JavaScript to target the div.

I had the same issue from an ul with many li, i found a good answer by someone in js:
if ($(e.target).is('[data-toggle=modal]')) {
$($(e.target).data('target')).modal()
}
from link: bootstrap modal not working in dropdown menu