I have a simple modal login form. When the form closes I want to display the email in a separate div .
The problem is that the text in the div doesn't change. I debugged the code and it looks like when I step through the text changes, but when it gets out of the submit function it gets changed back. What am I doing wrong? tnx!
Here's the code:
<div class="container">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" id="testButton">Open modal</button>
<div id="emailTarget">Email ends up here</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Please type some text</h4>
</div>
<div class="modal-body">
<form class="form-signin" id="signIn">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$("#signIn").submit(function(event) {
$("#emailTarget").html($("#inputEmail").val());
});
</script>
If you do not want to POST, just return false:
$('#myModal').modal('hide');
return false;
Check example
Related
I have a button which pops up a modal, it does pop up & is functional. The form is in there how it should be, etc. Just one thing doesn't work which is that the modal just isn't focusing. I also tried doing it with JS which I found on another stackoverflow post but that didn't help me either.
The code
<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
Shows up an unfocussed modal when it's called.
The button that triggers the modal
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```
I guess you are looking for the shown.bs.modal event. More about this in the documentation.
So when that event fires for your modal, just target the first input and focus it.
There is no use in focussing a div. A focussed input generally is what a user wants.
$("#joinModal").on("shown.bs.modal", function(){
$(this).find("input").first().focus()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>
<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
https://github.com/PatrickO10/meetUp/blob/master/index.html#L73
I am new in this field and reading one code.
I can't understand logForm.$invalid.$setValidity here. I can't find anything about it from internet. The setvalidity in the internet has two perimeters but here has not.
And the invalid here https://docs.angularjs.org/api/ng/type/form.FormController has been a boolean why setvalidity? Why don't you use ng-disabled="logForm.$invalid"
Could you tell me? Thanks.
<div class="modal fade login" tabindex="-1" role="dialog" aria-labelledby="loginModelLabel" ng-controller="LoginCtrl as logCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header primary-color-dark-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="loginModelLabel">Login</h4>
</div>
<div class="modal-body primary-bg">
<form class="row form-horizontal" id="loginForm" ng-submit="logCtrl.login(user)" name="logForm">
<label for="logEmail" class="col-xs-12 col-md-6 margin-top">
<span class="pad-right">Enter your email</span>
<input type="email" id="logEmail" ng-model="user.email" class="form-control" placeholder="example#krustykrab.com" required autocomplete="email" autofocus>
</label>
<label for="logPass" class="col-xs-12 col-md-6 margin-top">
<span>Enter your password</span>
<input type="password" id="logPass" ng-model="user.password" class="form-control" placeholder="Enter your password" required>
</label>
<div class="col-xs-12 margin-top" ng-show="loginError">
<p class="invalidPass">Login Fail! {{loginErrMsg}}</p>
</div>
<label class="col-xs-12 margin-top">
<input id="submitLogin" type="submit" value="Login" ng-disabled="logForm.$invalid.$setValidity">
</label>
</form>
</div>
<div class="modal-footer primary-color-dark-bg">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<input id="submitLogin" type="submit" value="Login"
ng-disabled="logForm.$invalid.$setValidity">
You are basically saying the input to be ng-disabled when the form is $invalid. i.e, here you are setting the input to $invalid, which makes the input to be disabled.
I am trying to auto focus on bootstrap modal with php it is it do working fine with the code,
<div class="modal inmodal fade" id="upload_file" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content animated rotateIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add File</h4>
</div>
<form id="my-awesome-dropzone" class="dropzone" action="" enctype="multipart/form-data" method="post">
<div class="modal-body">
<input type="text" id="file_name" class="form-control" placeholder="Enter File Name" style="width:100%;" name="file_name" required="">
<br/>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio1" value="1" name="can_down" checked="">
<label for="inlineRadio1"> Open Access </label>
</div>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio2" value="2" name="can_down">
<label for="inlineRadio2"> Restricted</label>
</div>
<br/>
<br/>
<input type="file" class="form-control" placeholder="Enter File Name" style="width:100%;" id="f_n" name="f_n" required="" onchange="checkFile();">
<p style="font-size:11px; padding-top:10px; color:red; margin-bottom:-25px; text-align:justified;">
* Please note that if you restrict access you can able to upload only <strong>pdf, ods, odt</strong> documents and user's can't download the file.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="add_man" name="add_file">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#upload_file').on('shown.bs.modal', function() {
$(this).find('#file_name').focus();
});
});
</script>
in first part of the image it was working properly but not with the second one i don't where i have made the mistake, both works on the same page with dynamic URL what would be the possible reason for this problem guys
I have 2 sign up forms on a site. One is at the top that opens up in a modal and is a multi step form starting at the input for the email address.The code for that form is as follows:
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="#" role="form" method="post" action="sendform.php">
<!-- #first_step -->
<div id="step_one">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="email_address">Email Address</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
</div>
</div>
<!-- #second_step -->
<div id="step_two" data-toggle="tab">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 2 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Please tell us more about yourself, so we can send you the right information.</p>
<div class="form-group">
<label class="control-label" for="step_two_radio">I am a:</label>
<!-- <label class="control-label" for="step_two_radio">I am a:</label> -->
<div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" placeholder="p2radio1" value="PatientOrCaregiver">
Patient or Caregiver</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="ClinicianOrReferrer">
Clinician or Referrer</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="PotentialRecruit">
Job Applicant</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="PharmaceuticalPartner">
Pharmaceutical Partner </label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="PayerPartner">
Payer Partner </label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios6" value="Other">
Other </label>
<div class="voffset2"></div>
<input type="text" class="form-control" id="other_I_a" placeholder="About you"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_two_previous" >Previous Step</button>
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<!-- <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">>Continue</button> -->
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">Continue</button>
</div>
</div>
<!-- #THRID STEP -->
<!-- #THRID STEP -->
<div id="step_three">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 3 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>So that we can better assist you, please tell us if you are a current Option Care home infusion patient.</p>
<div class="form-group">
<label class="control-label" for="inputEmail3">Are you a current customer of Option Care?</label>
<div>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio1" value="CustomerYes">
Yes </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio2" value="CustomerNo">
No </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio" id="inlineRadio3" value="NotApplicable">
Not applicable </label>
<!-- <input type="text" class="form-control" id="messagestep3" /> -->
<div id="messagestep3"></div>
</div>
<!-- <div id="messagestep3"></div> -->
</div>
<div class="form-group" id="step_three_b">
<label class="control-label" for="inputEmail4">You’ve indicated that you are not a current Option Care home infusion patient. Are you interested in using Option Care home infusion services in the next 6 months?</label>
<div>
<label class="radio-inline">
<input type="radio" name="step_three_radio2" id="inlineRadio4" value="InterestedYes">
Yes </label>
<label class="radio-inline">
<input type="radio" name="step_three_radio2" id="inlineRadio5" value="InterestedNo">
No </label>
<div id="messagestep3b"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_three_previous" >Previous Step</button>
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_three_submit">Continue</button>
</div>
</div>
<!-- #fourth_step -->
<div id="step_four">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 4 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Select the therapeutic service(s) you are interested in learning more about. Please check all that apply.</p>
<div class="form-group">
<label class="control-label" for="inputEmail3">If you are interested in a specific therapeutic area, please select it from the list below:</label>
<div>
<div class="checkbox">
<label>
<input type="checkbox" value="AntiInfectives">
Anti-infectives (AI)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Bleeding disorders" name="step_four_checkbox">
Bleeding disorders (BD)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="HeartFailure" name="step_four_checkbox">
Heart failure (HF)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Immunoglobulin" name="step_four_checkbox">
Immunoglobulin (IG)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="NutritionSupport" name="step_four_checkbox">
Nutrition support (NS)</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="OtherTherapeutic" name="step_four_checkbox">
Other </label>
<div class="voffset2"></div>
<input type="text" class="form-control" id="other_therapeutic_area" name="" value="" placeholder="So that we may better assist you, please tell us what services you are interested in."/>
</div>
<div id="step-four-input"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_four_previous" >Previous Step</button>
<!-- <button type="button" class="btn btn-default pull-left" id="step_four_previous">Previous Step</button> -->
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-arrow btn-nextstep" id="step_four_submit" value="insert">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /Modal HTML -->
Next I have a second sign up form at the bottom of the site in a call to action that has only the email input and when the button is clicked opens the modal to the second form. The code for that form is a follows:
<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
<div class="form-group">
<input type="email" name="signupemail" id="bottomemail" required="required" class="form-control" value="Enter your email address..."
onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
<button required="required" class="btn btn-arrow">Subscribe</button>
</div>
</form>
Now my question is is there any JQuery or javascript I can use to take the value from the bottom sign up form's email input field and place it into the signup form in the modal at the top's email input field?
Have you tried this?
jQuery('#email_address').val(jQuery('#bottomemail').val());
Fetch the value from first field
var value = $("#idFirstElement").val();
and set the value to second field.
$("#IdSecondField").val(value);
$('#email_address,#bottomemail').keyup(function() {
$('#email_address,#bottomemail').val($(this).val());
});
This will keep the two inputs in sync by copying the value of the one being changed to both of them.
Try:
$('#bottomemail').on('input', function() {
$('#email_address').val( this.value );
});
As in the demo below:
$(function() {
$('#bottomemail').on('input', function() {
$('#email_address').val( this.value );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="#" role="form" method="post" action="sendform.php">
<!-- #first_step -->
<div id="step_one">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"></p></span></button>
<h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
</div>
<div class="modal-body">
<p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label" for="email_address">Email Address</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
</div>
</div>
<!-- ........ -->
<!-- ........ -->
</div>
</div>
<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
<div class="form-group">
<input type="email" name="signupemail" id="bottomemail" required="required" class="form-control" value="Enter your email address..."
onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
<button required="required" class="btn btn-arrow">Subscribe</button>
</div>
</form>
I like Skymt's idea of using keyup, but to give my 2 cents worth, here's what I was talking about in my comments on the question. I've used the click of a button to show functionality you could do as Peterson say's and use blur:
HTML:
<form action="">
<label for="">Input 1</label><input id="input1" type="text">
<button id="trigger">Trigger</button>
</form>
<form action="">
<label for="">Input 2</label><input id="input2" type="text">
</form>
jQuery:
$(document).ready(function(){
$('#trigger').on('click', function(){
var value = $('#input1').val();
$('#input2').val(value);
return false;
});
});
Fiddle - https://jsfiddle.net/dg8u3ng1/
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