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
Related
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.
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>
I'm working on a project which includes some JQuery and AJAX. I have also implemented a feature of JQuery autofill. The code of form is shown below:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
The Autofill is implemented on the textbox with ID "endtpolnumber". When I click on textbox with ID "findpolinfo" it should alert "asdf". But, on contrary it is redirecting me to to this URL
"http://localhost/dis/home/login?endtpolnumber=31-125&endtefffrom=&endtno=&endtamt=&endtdesc="
My JQuery code is as below:
$('#findpolinfo').click(function () {
alert('asdf');
});
Does anyone have any idea, where am i going wrong?
All positive suggestions are welcomed...
Thanks in advance...
Because the default behavoiur of <button> if it is inside form is submit
what's the standard behavior when < button > tag click? will it submit the form?
add
type="button"
if you don't want this button to submit form
Button has a default behaviour to submit the form. You can use return false to stop that form submission. Below is code to help you out. Just enter the policy number and click on the 'Find Policy' button:
$('#findpolinfo').click(function () {
alert($("#endtpolnumber").val());
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
based on W3schools if you want to add button just for clicking,You can add type="button" to your button attributes.just like this:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button type="button" id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="button" class="btn btn-primary" id="addendt">Add Endorsement</button>
<button type="button" class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
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.
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