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();
});
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'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.
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.
Using bootstrap, I have a modal window open for login purposes from the Navbar. If the login credentials fail, the modal disappears the same as it does if the credentials were successful. How, after running through the PHP validation process, can I make the modal reappear for the users to attempt login again? The non-working relevant code is:
PHP Validation code:
<head>
<?php
if(PassHash::check_password($row["password"], $_POST['pwd1']))
$_SESSION["login"] = 1;
$_SESSION['btnhs'] = 3;
} else {
$_SESSION["login"] = 0;
$loginErr ="Username or password incorrect.";
?>
<script type="text/javascript">
$(function() {
$('#myModal').modal('show');
});
</script>
<?php
}
</head>
HTML:
<!-- Modal -->
<div class="modal fade" tabindex="-1" id="myModal" role="dialog" data-backdrop="static">
<div class="modal-dialog" data-backdrop="static">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form method="post" autocomplete="on" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" required="" name="uname" id="uname" autofocus="" placeholder="Enter username">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="password" class="form-control" required="" name="pwd1" id="pwd1" placeholder="Enter password">
<span class="error" style="color: red"><?php echo $loginErr;?></span><br>
</div>
<div class="form-actions">
<button type="submit" name="login" class="btn btn-success btn-block"><span class="glyphicon glyphicon-log-in"></span> Login</button>
</div>
</form>
</div>
I'm trying to call the javascript snippet from an unsuccessful password at login, but this isn't working. Can anyone see what is wrong with this and offer a solution? Thanks.
You are making your request synchronously.
If you want to keep modal open, you need to make AJAX request to server and not fully submit the form.
For example, with jQuery you can use this: http://api.jquery.com/jquery.post/
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.