I have three inputs across two pages, all of which I want Chrome to validate (i.e. they won't allow the form to be submitted if it doesn't contain a valid email address).
The input on this page (input A) is validating fine, so I'd like to do the same with the inputs on this page: the one you see when you click Options -> Add/remove feeds or Options -> Edit account (input B) and the one you see when you click 'Get notified' (input C).
This is the code for input A, which is validating properly:
<form role="form" class="form-inline" method="POST">
<p>Get notified when Shopaholic launches</p>
<input type="email" name="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal">Notify me</button>
</form>
This is the code for inputs B and C, which aren't validating:
<!-- Modal containing input B -->
<div class="modal fade" id="getNotifiedModal1" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel1" aria-hidden="true">
<div class="modal-dialog">
<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="getNotifiedModal1Label">Sorry, this feature is unavailable in the demo version.</h4>
</div>
<div class="modal-body">
<p id="p">But why not get notified when the full version of Shopaholic launches?</p>
<form role="form" class="form-inline" method="POST">
<input type="email" name="email" class="form-control" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Notify me</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal containing input C -->
<div class="modal fade" id="getNotifiedModal2" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel2" aria-hidden="true">
<div class="modal-dialog">
<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="getNotifiedModal2">Get notified when Shopaholic launches!</h4>
</div>
<div class="modal-body">
<form role="form" class="form-inline" method="POST">
<input type="email" name="email" class="form-control" id="inputEmail" placeholder="Enter email">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Notify me</button>
</form>
</div>
</div>
</div>
</div>
UPDATE
I have just realised that it is Chrome doing this, not Bootstrap.
Related
I want to make a form preview from form1 into another modal via jquery. I built the form in modal1 and trying to pass its data into modal2. But it's not working in the next modal.
Cannot pass the data from modal1 - formData is not defined
I need the modal2 to get data from submitted
HTML
<!-- Modal -->
<div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="submit" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4>
</div>
<div class="modal-body">
<form id="form1">
<input type="text" class="form-control" id="fname" value="hello" />
<input type="text" class="form-control" id="lname" value="kitty" />
<button type="submit" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
preview
</button>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<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="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
JQUERY
$('#xModal').modal('show');
$('#xModal').on('shown.bs.modal', function() {
$('#form1').on('submit', function(e) {
e.preventDefault();
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
console.log('xModal loaded');
});
$('#prvwModal').on('shown.bs.modal', function() {
console.log('prvwModal loaded'+formData);
})
Jsfiddle : https://jsfiddle.net/yfpruygs/7/
Your inputs need a name field in order to get form data:
<input type="text" class="form-control" id="fname" name="fname" value="hello" />
<input type="text" class="form-control" id="lname" name="lname" value="kitty" />
You will also need to change the button type to "button" if you don't plan for the preview button to actually submit the form.
<button type="button" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">
Then you can use a click event...
$('#form1').on('click', function(e) {
console.log('xModal sumitted');
var formData = $(this).serialize();
$('#prvwModal').find('.modal-body').text(formData);
$('#prvwModal').find('.modal-title').text('#form1 Preview');
});
https://jsfiddle.net/yfpruygs/9/
following is the code for which modal-dialog is not popping up.I am using Bootstrap 3.2.0 and jquery is also above 1.9.0.Help me out if i am missing something.And please let me know for any further information and Thanks in advance.
<div class="modal fade" id = "login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl
sgdhfjgkhkjlrtyguuhjkoxcvbn
dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p>
<p>wefrgdthyjgukiosdfghjkgh
ssdfghjklertyuwertyuicvbnm,
sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p>
<p>My Account</p>
</div>
</div>
Everything is correct as far as markup (link below to view). Make sure you are including the jquery.js script before the bootstrap.js script.
Working demo of your code
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..
</p>
<p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg
</p>
<p>My Account</p>
</div>
</div>
I have the following lines of code in my website - CodePen.
What I am trying to do, is make it so that the user must fill in the form first, before downloading an item:
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I make it so that when the user selects the first or second button on the page, it will send this information to the submit button?
You could store the link in a variable. Then, when the button is clicked, check if the fields are empty (and apply any validation rules). If not empty, apply the submit to the form.
$link = 'example.com/download.pdf';
$('.button').click(function(){
// CHECK THE FIELDS ARE NOT EMPTY
// APPLY YOUR OWN VALIDATION
if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
// DO WHAT YOU NEED TO DO WITH THE LINK
$('form').submit();
}
})
On a side note, it's possible that you were down-voted (not by myself) for not providing us with your attempts to solve your own problem. You provided us with your html but not any of your tested logic.
You add a click handler to your button in JavaScript :
var fieldsAreReadyToBeSent = function() {
// Validation code goes here
// return true if valid & false if invalid
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) {
event.preventDefault();
}
});
The method event.preventDefault() prevents your your form from being submitted if it is considered invalid!
A demo :
var fieldsAreReadyToBeSent = function() {
return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
event.preventDefault();
}
});
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I have simple html page to show bootstrap modal, however when I launch the model -
it gets covered by modal backdrop,
I checked the z- index of myModal - 1040 and that of modal backdrop is 1030
checked all posts in stackoverflow but none of them solve my issue
please help
<html>
<head>
<link href="" rel="stylesheet">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
Launch demo modal
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</body>
</html>
You forgot a few things, which are:
the <div class="modal-dialog">
the <div class="modal-content">
You also added some unecessary things which are:
the hide class on the <div id="myModal" class="modal fade in" aria-hidden="true">
the in class on the <div id="myModal" class="modal fade in" aria-hidden="true">
Your working code will look like this:
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>
Here's a JsFiddle to show it in a working environment.
To read everything about the modal, please check this
Hope this helps!
Remove the hide class from your modal.
JSFdiddle
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
I send a link for forgotten password to the client. I want to show a bootstrap JS modal for changing password when the client clicks the link.
The code showing my approach is provided below:
account.html
<template name="ResetPassword">
<div class="modal fade" id="myModal-9" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<span class="f-s-20 text-blue">ŞİFRE DEĞİŞTİRME EKRANI </span>
</div>
<div class="modal-body">
{{#if resetPassword}}
<form action="/reset-password" id="resetPasswordForm" method="post">
<input id="resetPasswordPassword" name="password" placeholder="New Password" type="password" >
<input id="resetPasswordPasswordConfirm" name="password-confirm" placeholder="Confirm" type="password" >
<input class="btn-submit" id="resetpasswordbtn" type="submit" value="Reset">
</form>
{{/if}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
</template>
account.js
Accounts.onResetPasswordLink(function (token, done) {
Session.set('resetPasswordToken', token);
$($(this).data("#myModal-9")).show();
done();
});
Use the following code.
$("#myModal-9").modal('show');