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

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>

Related

Trigger the modal on page load for Bootstrap v3.4

I have tried various solutions for the same and but I am unable to figure out the correct way. I am not able to know why the output is not coming in desired way.
I am not able to trigger the modal on page load for Bootstrap v3.4.
I have added both HTML and JavaScript code.
The Javascript code is added above the closing body tag.
The preloader comes first after the opening body tag and followed by the modal.
<body>
<div class="preloader">
<div class="loader">
<div class="wrapper">
<div class="circle circle-1"></div>
<div class="circle circle-1a"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" style="font-size:18px;">Franchise Enquiry Form</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body scrollable">
<div class="row">
<div class="col-md-6">
<div class="quote-pic">
<img src="assets/img/modal/Pop-Up-Form-1.jpg" alt="">
</div>
</div>
<div class="col-md-6">
<div class="quote-item">
<form action="process.php" method="POST">
<div class="form-group">
<select class="form-control" name="brochure_type" required>
<option value="">Select Franchise Model</option>
<option value="Pre_Schools">Pre-schools</option>
<option value="Model_Schools">Model Schools </option>
<option value="International_Schools">International Schools</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" name="name" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email Address" name="email" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile Number" name="number" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Location" name="location" required />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Requirements" name="requirement" required />
</div>
<button type="submit" class="default-btn">
Submit Now
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
// Triggering modal on page load
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</body>

Did you include the Bootstrap's JavaScript file? I believe jQuery is required too, did you include that as well?
What method do you use to include the Bootstrap / jQuery Javascript files? CDN or npm?
I got it to work using the 3.4.1 Bootstrap CSS and JavaScript CDN, as well as the jQuery 3.6.0 CDN.

Modal tab does not load properly on first trigger

I would expect this to work just fine. Runnable code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text editor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" href="#signin" data-toggle="modal" data-target="#myModal">Sign In/Register</button>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<ul id="myTab" class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#signin" data-toggle="tab">Sign In</a></li>
<li class="nav-item"><a class="nav-link" href="#signup" data-toggle="tab">Register</a></li>
<li class="nav-item"><a class="nav-link" href="#why" data-toggle="tab">Why?</a></li>
</ul>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p>
<br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com">JoeSixPack#Sixpacksrus.com for any other inquiries.</a></p>
</div>
<div class="tab-pane fade in active" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<!-- Sign Up Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="JoeSixpack#sixpacksrus.com" class="input-large" required="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="JoeSixpack" class="input-large" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>
You can see that it is loading the tab pane because if you hover the mouse over the modal area you can see the cursor changes when over the invisible input boxes that it is not showing. Also, you can click on the other tabs, and return to the first one just fine. What's happening here?
Help?

fade effect causes your problem, just remove fade from the tabpane and it should work fine.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text editor</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" href="#signin" data-toggle="modal" data-target="#myModal">Sign In/Register</button>
<!-- Modal -->
<div class="modal fade bs-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<br>
<ul id="myTab" class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#signin" data-toggle="tab">Sign In</a></li>
<li class="nav-item"><a class="nav-link" href="#signup" data-toggle="tab">Register</a></li>
<li class="nav-item"><a class="nav-link" href="#why" data-toggle="tab">Why?</a></li>
</ul>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane " id="why">
<p>We need this information so that you can receive access to the site and its content. Rest assured your information will not be sold, traded, or given to anyone.</p>
<p>
<br> Please contact <a mailto:href="JoeSixPack#Sixpacksrus.com">JoeSixPack#Sixpacksrus.com for any other inquiries.</a></p>
</div>
<div class="tab-pane active" id="signin">
<form class="form-horizontal">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me">
Remember me
</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="signup">
<form class="form-horizontal">
<fieldset>
<!-- Sign Up Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="JoeSixpack#sixpacksrus.com" class="input-large" required="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
<input id="userid" name="userid" class="form-control" type="text" placeholder="JoeSixpack" class="input-large" required="">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********" class="input-large" required="">
<em>1-8 Characters</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
</div>
</div>
<!-- Multiple Radios (inline) -->
<br>
<div class="control-group">
<label class="control-label" for="humancheck">Humanity Check:</label>
<div class="controls">
<label class="radio inline" for="humancheck-0">
<input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
<label class="radio inline" for="humancheck-1">
<input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
</div>
</body>
</html>

Showing Form Entry on Modal Window Bootstrap / jQuery

I'm creating a form confirmation window with Bootstrap Modal before user submission.
Here is the html part:
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
</div>
</div>
<input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
And here is the jQuery part:
$('#submitBtn').click(function() {
$('#mCompany').text($('#Company').val());
$('#mDepartment').text($('#Department').val());
$('#mUsername').text($('#Username').val());
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
$('#mEmail').text($('#Email').val());
});
You can see and try with this
link to JSFiddle.
Not all fields are required, and what I want to do is to show only the entry with data.
For example in the below image, I don't want the red bordered part to show up.
Example Screen Shot
The sample on JSFiddle has only 6 fields but my form has over 30 fields. I'm wondering if there's a way to show only the fields with data.

Remove below part from HTML
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
remove below part from jquery
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());

I make some improvents:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
//console.log(id);
//console.log("#m"+id);
$("#m"+id).text($(this).val());
all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTEL"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->
You can add some classes to know what field did you want to show in the modal and what not to show.... I think could be add dynamical to the modal too...
Add inputs dynamical:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$("#modalBody").html('');
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
if($(this).hasClass('add')){
all = all + $(this).val();
var input = '<div class="row">'
+ '<div class="entryname col-xs-3">' + id + ':</div>'
+ '<div class="entrydata col-xs-9" id="m' + id +'">' + $(this).val(); + '</div>'
+ ' </div>';
//console.log(input);
$("#modalBody").append(input);
}
//console.log(id);
//console.log("#m"+id);
//$("#m"+id).text($(this).val());
// all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control add" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control add" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control add" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control add" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div id="modalBody"></div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->

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.

Bootstrap modal open on clicking image

when i click menu-5_1.png the below model should pop up
<li class="men_5l" ><a id = "pop" href="#"><span><img src="images/menu_5_1.PNG" alt=""></span> <p>Mp3</p></a></li>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="myModalLabel">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button1" class="btn btn-primary btn-sm" runat="server"
Text="log in" />
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtPagingGoto" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<asp:TextBox ID="txtEmail" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button2" class="btn btn-primary btn-sm" runat="server" Text="Register"/>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<div style="height:20px;width:100%;"> Facebook</div><div style="margin-top: 35px; width: 100%;"> <a href="#" class="btn btn-danger">
Google +</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
</script>

Try:
$(document).ready(function () {
$("ul").on('click','#pop',function () {
$('#myModal').modal('show');
});
});

I think you have missed below reference libraries in your application.
https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
Demo:
https://jsfiddle.net/zz9wqroc/

Categories