Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.
jquery inside Bootstrap modal
I'm using jquery code to check for duplicates in a database as the user types an email address in a field. The code works fine until I place the field inside a Bootstrap modal.
Here's the jquery function
Here's the form code
The page is here..
http://testregister.cenational.org/cc/dashboard.php
You'll see at the top a field where the jqery call works--when you finish typing, the database is dup-checked for the email address. But when you click 'Add Family' you'll see a field called 'Enter f_email' that doesn't work.
Thanks for any help give,
Steve
Here's the jquery function
<script type="text/javascript"> //Check if family email address has already been used.
$(document).ready(function() {
var x_timer;
$("#f_email").keyup(function (e){
clearTimeout(x_timer);
var f_email_var = $(this).val();
x_timer = setTimeout(function(){
check_f_email_ajax(f_email_var);
}, 1000);
});
function check_f_email_ajax(f_email){
$("#user-result").html('<img src="ajax-loader.gif" />');
$.post('/support/check_f_email.php', {'f_email':f_email}, function(data) {
$("#user-result").html(data);
});
}
});
</script>
Here's the form code
<div id="registration-form">
<label for="f_email">Enter f_email :
<input name="f_email" type="text" id="f_email" maxlength="45"> <span id="user-result"></span>
</label>
</div>
The page is here..
http://testregister.cenational.org/cc/dashboard.php
You'll see at the top a field where the jqery call works--when you finish typing, the database is dup-checked for the email address. But when you click 'Add Family' you'll see a field called 'Enter f_email' that doesn't work.
Thanks for any help give,
Steve
Asked:
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trial
Thanks for the suggestion, I do appreciate the help. I inserted your code, but still don't get the function to work inside the modal.
Steve
Steve
Put a console log inside the jQuery function to verify it's triggering. If it's not triggering, then please post the HTML for the modal, including the div or whatever that contains the modal.
It didn't trigger. Here's the HTML for the modal. But if it's not triggering, would this code even have a chance to run?
<div class="container">
<!-- Trigger the modal with a button -->
<td colspan="1"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add Family</button></td>
<!-- 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">Add Family</h4>
Email, first and last name are required. Other information will need to be filled out by the family contact.
</div>
<div class="modal-body">
<p>
<div id="registration-form">
<label for="f_email">Enter f_email :
<input name="f_email" type="text" id="f_email" maxlength="45"> <span id="user-result"></span>
</label>
</div>
<form name="form1" method="post" action="family_add_code.php">
<strong>Email address:</strong>
<br />
<input type="text" name="f_email" id="f_email" size="40" maxlength="50" value='' /> <span id="user-result"></span>
<br />
<strong>First Name:</strong><br />
<input type="text" name="f_fname" id="f_fname" size="25" maxlength="25" value='' required>
<br />
<strong>Last Name:</strong><br />
<input type="text" name="f_lname" id="f_lname" size="40" maxlength="40" value='' required>
<br />
<strong>Phone</strong><br />
<input type="text" name="f_phone" id="f_phone" size="12" maxlength="12" value=''>
<br />
<strong>Address 1</strong><br />
<input type="text" name="f_address1" id="f_address1" size="40" maxlength="50" value=''>
<br />
<strong>Address 2</strong><br />
<input type="text" name="f_address2" id="f_address2" size="40" maxlength="50" value=''>
<br />
<strong>City</strong><br />
<input type="text" name="f_city" id="f_city" size="40" maxlength="40" value=''>
<br />
<strong>State</strong><br />
<input type="text" name="f_state" id="f_state" size="20" maxlength="20" value=''>
<br />
<strong>Zip</strong><br />
<input type="text" name="f_zip" id="f_zip" size="20" maxlength="20" value=''>
<br />
<strong>Country</strong><br />
<input type="text" name="f_country" id="f_country" size="20" maxlength="20" value='United States'>
<br />
<br />
<input type="text" name="id_church" id="id_church" value='<?php echo $id_church;?>'>
<input type="submit" name="button" id="button" value="Add Family">
</form>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You must have something else going on then. Because the code you posted works fine and triggers the jQuery event when I type. Here is a Fiddle Demo
For the demo, I just copied your code directly, and added the jQuery:
For the demo, I just copied your code directly, and added the jQuery:
$('#f_email').on('keyup', function() {
console.log('hello world');
});
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Bootstrap
From novice to tech pro — start learning today.
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get every solution instantly with Premium.
Start your 7-day free trial.
Open in new window
Try using "on", which will bind elements that are dynamically added to a page.
Open in new window