I'm making modal using Bootstrap. I need to prevent modal closing while required inputs are not filled or requirements for inputs are not met.
And how can i realise the requirements for the inputs? Something like RegExp?
<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">Adding a user</h4>
</div>
<form name="userAdding">
<div class="modal-body">
<input type="text" required placeholder="Name" id="inputName">
<br>
<input type="text" required placeholder="Username" id="inputUsername">
<br>
<input type="email" required placeholder="Email" id="inputEmail">
<br>
<input type="text" placeholder="Street" id="inputStreet">
<br>
<input type="text" placeholder="Suite" id="inputSuite">
<br>
<input type="text" placeholder="City" id="inputCity">
<br>
<input type="number" placeholder="Zipcode" id="inputZipcode">
<br>
<input type="number" placeholder="Lat" id="inputLat">
<br>
<input type="number" placeholder="Lng" id="inputLng">
<br>
<input type="number" placeholder="Phone" id="inputPhone">
<br>
<input type="text" placeholder="Website" id="inputWebsite">
<br>
<input type="text" required placeholder="Companyname" id="inputCompname">
<br>
<input type="text" placeholder="Catchphrase" id="inputCatchphrase">
<br>
<input type="text" placeholder="bs" id="inputBs">
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addUser()">Submit</button>
</div>
</div>
</div>
</div>
Remove data-dismiss from submit button and then I have only provided here for email. Rest of all you can do like this:
function addUser(){
var email = document.getElementById('inputEmail').value;
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email)){
$('#myModal').modal('hide');
console.log(email + " Success");
}else{
console.log(email + " Failed")
}
}
function addUser()
{
$("form").validate({
showErrors: function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors) {
return false;
}
});
}
add code to addUser function its restricting model to hide when there is any validation occurs.
For your first requirement (don't close the modal), you can:
1. remove the close button in the header,
2. disable the close button in the footer until all the inputs are filled.
For the latter, multiple possibilities:
disable the button by default, then bind a function to the change events of the inputs. Inside it, check all the inputs and set the button state accordingly.
in addUser(), check the validity of the inputs. If they are incorrect, use one of the solutions described in this stackoverflow to cancel the close event.
Related
We have one column named CandidateID in database which has some data like shown below :-
We have one addbutton where it will open a modal to fill up the details like shown below :-
Here when we click on add button the candidate ID input field should autofill the value with next sequence ie KP05 (if the last candid is KP04 ). Or else any random number is fine too which is unique everytime when we click on add button
is it possible to do in javascript? if yes , how can i do it? or
Is there any way to set a field to display a sequential number string? need to prefill a unique random number each time in the input field when the add modal ie Dialog is opened
Add button : -
<button class="btn btn-default pull pull-right" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Member
</button>
Html code for Candidate Input field
<div class="modal fade" tabindex="-1" role="dialog" id="addMember">
<div class="modal-dialog modal-lg" 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"><span class="glyphicon glyphicon-plus-sign"></span> Add Member</h4>
</div>
<div class="modal-body">
<button type="reset" id="searchclear" class="btn btn-danger">Reset</button>
<div class="form-group">
<!--/here teh addclass has-error will appear -->
<div class="col-sm-5">
<label for="candid" >Candidate ID</label>
<br>
<input type="text" class="form-control" id="candid" name="candid" placeholder="candid" >
<!-- here the text will apper -->
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label for="mobile">Mobile</label><span id="mobile_status"></span>
<br>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="mobile" value="+91" onkeyup="checkmobile();" >
</div>
<div class="col-sm-6">
<label for="email" >Email</label><span id="email_status"></span>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" onkeyup="checkemail();">
</div>
</div>
If your last candidate id is available, you can increment the Id as following way
var num = "KPO4"; //Assuming this will be last candidate id
alert("KPO" + (parseInt(num.replace(/\D/g, '')) + 1));
$("#buttonId").click(function(){
$.ajax({url: "Controller/Method", success: function(result){
$("#txtCandidateId").val(result).attr("disabled","disabled");
}});
});
DATABASE Query
SELECT MAX(CandidateId)+1 FROM TableName
I have an HTML form and on Clicking the button would generate a Modal window.The Button is as follows.
<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>
The modal type that launched would be the "basic" type. Modal is actually another form, which would then be submitted to another PHP page via a POST method. The Modal is as below.
<div class="modal fade" id="BASIC" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<form class="contact-work-form2 mar" id="contact-form" action="" method="post">
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Name" id="name2" name="name" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Email" id="mail2" name="mail" required>
</div>
</div>
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Phone" id="phone" name="phone" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Company" id="company" name="company" required>
</div>
</div>
<div class="text-input">
<div class="float-input1">
<input type="text" required name="country" id="country" placeholder="Country">
</div>
</div>
<input type="submit" value="Submit" class="submit_contact main-form" name="mailing-submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I can POST to the PHP page. However, while posting, I also need to pass a variable which has the value or the ID of button that launched the modal.
you can access the button id by
$(document).ready(function(){
$('.btn').click(function(){
var a=$(this).attr('id');
alert(a);
});
});
Try following code,
When you click on the button it will fetch corresponding id of the modal.
That id will be added as hidden field into the form.
When you submit the form, you can access the data in server-side.
<script type="text/javascript">
function appendHiddenDiv(){
var modalNameWithHash = $(this).attr('data-target');
var modalName = modalNameWithHash.substring(1)
$('<input>').attr({
type: 'hidden',
name: 'plan',
value: modalName
}).appendTo(modalNameWithHash+' '+'form');
}
$(document).on("click",'button[data-toggle="modal"]', appendHiddenDiv);
</script>
I hope this helps.
I'm a beginner with parse and jquery. But for some reason I'm having issues with the most basic thing, which is outputting messages into the console. I've checked my Chrome settings and they're are filtering to all.
I've written the code to simply store email and password FE inputs into parse. If the inputs match the basic validation that I've created, it should display a console message. If the input is invalid, it should display another console message. But for some reason everything I've tried doesn't seem to be working. Here is what my code looks like.
http://imgur.com/a/XHQeg
Thanks for the help. Please let me know if I've left out any information.
index.html
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="signUpLabel">
<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="signUp-title" id="signUpLabel">Sign Up</h4>
</div>
<div class="modal-body">
<form id = "register-form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
jquery.js
Parse.initialize("xxx",
"yyy");
$("#register-form").submit(function(event){ event.preventDefault();
//lets page prevent refresh
var email = $("#exampleInputEmail1"). val(); var password =
$("#password"). val(); var password2 = $("#password2"). val();
if ( password == password2) {
var user = new Parse.User();
user.set("email", email)
user.set("password", password)
user.signUp(null, {success:function(user){
console.log("Register Succeeded!")
}, error:function(user, error){
console.log("Registration error:" +error.message);
} });
}
});
When i was making your code more readable in my code editor i noticed you have a space between the dot and val() in your variable declarations. You are also missing a semicolon at the end of the first line in the password if statement.
your button also is not inside your form tags and is not of type submit!
Fix those problems and it will work.
How can I append a URL with an email address that a user inputs, and then submits this email address via button? I am using a modal that will pop up, ask for the email, and then call the url when the user hits the submit button. (jQuery is supported) Any help is much appreciated! Thanks
<div id="emailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel"> We Can Help</h3>
</div>
<div class="modal-body">
<h6> Enter your information in the fields below to reset a forgotten password, or to restore access to an account that has been locked for security </h6>
<br>
<form >
<input type="text" class="input-block-level" placeholder="Email address">
<!-- <input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<a href="#"><input type="checkbox" value="remember-me"> Remember me
</label></a> -->
</form>
</div>
<div class="modal-footer">
<button class="m-btn blue" data-dismiss="modal">Submit</button>
</div>
</div>
You can do something like
$("#emailModal .m-btn").click(function(){
$.post("/my/url?email=" + $("#emailModal input.input-block-level").val(), function(){
// this function is called on POST finish.
});
return false;
});
I think this is what you are after.
Change the form to this...
<form action="some-url.php" method="get">
<input type="text" name="email" class="input-block-level" placeholder="Email address">
</form>
and add this script...
$("#emailModal button").on("click", function() {
$("#emailModal form").submit();
});
I'm using a pretty straightforward modal window for a webapp. For some reason whenever I click on any of the inputs in the modal, the focus is set to the input before it. However, if I click on the label, the focus is set to the proper input. Scratching my head on this one...
Here's the markup:
<!--Admin Approve Modal -->
<div id="admin_approve_modal" class="modal hide fade" role="dialog" aria-labelledby="adminApproveModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="adminApproveModalLabel">Approval For Order #<span class="js-orderID"></span></h3>
</div>
<form id="admin_approve_form" name="admin_approve_form" method="post" action="admin-form-submit.php?query=adminApprove">
<div class="modal-body">
<label for="poNumber" />Factory PO #:
<input type="text" id="poNumber" name="poNumber" />
<script>
$(function() {
$( "#etaDate" ).datepicker();
});
</script>
<label for="etaDate" />ETA Date:
<input type="text" id="etaDate" name="etaDate" value="" />
<label for="comments" />Comments:
<input type="text" id="comments" name="comments" value="" />
<div id="admin_validation_error" name="admin_validation_error"></div>
<!--Hidden inputs-->
<input type="hidden" id="adminOrderID" name="orderID" value="" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-primary">Approve</button>
</div>
</form>
</div>
<!-- end modal -->
There is no conflicting javascript (to my knowledge) on the page. Any ideas?
i cannot reproduce your bug, can you setup a jsfiddle? It worked for me with clean bootstrap files.
Well I'm dumb. For some reason I thought labels were self-closing... they aren't!