I'm just learning about bootstrap..I need help from anyone who know how to send variable value to a modal..
to make it even clearer, I have a table with action column. the action column consist of edit and delete button. if the edit button clicked, then a modal with edit form appear ( I put the modal in the same file with the modal trigger button). my question is, how do I send the ID of the following data to the edit form in the modal???
here is the code of edit(update) data:
<a data-target="#modal-edit-user" data-toggle="modal"> <i class=" glyphicon glyphicon-edit">
and here is the modal code:
<div id="modal-edit-user" class="modal hide fade" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Form Edit Data User</b></h4>
</div>
<div class="modal-body">
<form name="tambah_user" method="POST" action="../controller/edit_user.php">
<?php echo $id_user;?>
<div class="controls control-group">
<input class="form-control" type="text" name="nama_user" placeholder=" nama user">
<br><input class="form-control" type="text" name="alamat" placeholder=" alamat user">
<br><input class="form-control" type="text" name="kota" placeholder=" kota">
<br><input class="form-control" type="text" name="no_telp" placeholder=" nomor telepon user">
<br><input class="form-control" type="text" name="username" placeholder=" username login user">
<br><input class="form-control" type="text" name="password" placeholder="password login user">
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Batal</a>
<input type="submit" name="sumbit" value="Simpan" class="btn btn-primary">
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I hope there is someone who can explain me the answer.. thanks a lot :-)
You can do that with Javascript. Just add a click event listener and update the form, when edit button is clicked. Something like this:
$(document).ready(function () {
$('.user-edit').click(function () {
$('span.user-id').text($(this).data('id'));
});
});
Here is a quick fiddle of how you could go about it.
Related
I am using a Bootstrap modal window for a form. I need to prevent the modal from closing after pressing the submit button. I need to close the modal only after clicking the close button. Please help me.
<!--Login, Signup, Forgot Password Modal -->
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- login modal content -->
<div class="modal-content" id="login-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-lock"></span> Login Now!</h4>
</div>
<div class="modal-body">
<form method="post" id="Login-Form" role="form">
<div class="form-group">
<div class="input-group">
<input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>
</form>
</div>
<div class="modal-footer">
<p>
<a id="FPModal" href="javascript:void(0)">Forgot Password?</a> |
<a id="signupModal" href="javascript:void(0)">Register Here!</a>
</p>
</div>
</div>
Try this code to see if you can prevent the dialog from submit
$( "form" ).submit(function( event ) {
event.preventDefault();
});
And then close it using close button.
I have a form like below,
<form id="compose" method="post" name="new_message">
<div id="new_message">
<div>
<label class="required" for="new_message_subject">Subject</label>
<input type="text" class="form-control" required="required" name="new_message[subject]" id="new_message_subject">
</div>
<div>
<label class="required" for="new_message_receiver">To</label>
<select class="form-control" name="new_message[receiver]" id="new_message_receiver">
<option value="2">fnamexxxxx lname</option>
<option value="5">tester testerlast</option>
<option value="7">bummer bumlast</option>
</select>
</div>
<div>
<label class="required" for="new_message_content">Content</label>
<textarea class="form-control" required="required" name="new_message[content]" id="new_message_content"></textarea>
</div>
<div>
<button class="btn btn-primary" name="new_message[Compose]" id="new_message_Compose" type="submit">Compose</button>
</div>
<input type="hidden" name="new_message[_token]" id="new_message__token">
</div>
and using the preventDefault() I have stopped the form submission and then used a bootstrap modal to for a confirmation message and you can see my Jquery function and the bootstrap modal below.
<script>
document.getElementById("compose").addEventListener("submit", function(event){
event.preventDefault();
var title = $("#new_message_subject").val();
var to = $("#new_message_receiver :selected").text();
var message = $("#new_message_content").val();
$('#title').text(title);
$('#to').text(to);
$('#message').text(message);
$('#myModal').modal('show');
$('#send').click(function(){
// avoid preventDefault() and submit form code here
});
});
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<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">Message send confirmation</h4>
</div>
<div class="modal-body">
<h4 id="title"></h4>
<p><b>To</b></p>
<p id="to"></p>
<p><b>Message</b></p>
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="send" class="btn btn-primary">Send</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The scenario is when a user click the form submit button, then the bootstrap modal pops up and ask to confirm the form submission and if a user clicks the Send button, id="send" then form needs to do its action / submission.
Now what I am trying to do is when the user is click the Send button in the modal the form needs to be submitted. I have tried few ways of doing this but could not avoid the preventDefault() and submit the form.
Your script code should be as below.
<script>
$("#compose").submit(function (objEvent) {
objEvent.preventDefault();
var title = $("#new_message_subject").val();
var to = $("#new_message_receiver :selected").text();
var message = $("#new_message_content").val();
$('#title').text(title);
$('#to').text(to);
$('#message').text(message);
$('#myModal').modal('show');
$(this)[0].submit();
})
</script>
I have an html form which gets submitted via a bootstrap modal which pops up when i click the submit button in the form itself . The submit buttons opens the bootstrap modal that throws a notification. In that modal I have a "Continue" button which submits the form but the required attribute on the form fields does not work if I submit it using the submit on modal.
here's my modal n form:
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body"> <p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
</div>
<div class="modal-footer">
<button id="finalsubmit" class="btn btn-success" >Continue</button>
</div>
</div>
<form class="searchform" name="search" role="search" method="POST" id="searchform" action="/search"><input class="abc" required type="text" id="keyword" value="" name="keyword"/><input class="xyz" required type="text" id="word" value="" name="location"/><input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" /></form>
And the Javascript code:
/* when the submit button in the modal is clicked, submit the form */
$('#finalsubmit').click(function(){
$('#searchform').submit();
});
Put The modal Inside The form
<form class="searchform" name="search" role="search" method="POST" id="searchform" action="/search">
<input class="abc" required type="text" id="keyword" value="" name="keyword"/>
<input class="xyz" required type="text" id="word" value="" name="location"/>
<input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" />
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
</div>
<div class="modal-footer">
<button id="finalsubmit" class="btn btn-success" >Continue</button>
</div>
</div>
</div>
</div>
</form>
change your searchsubmit input type"button" to type"submit" and trigger this button on finalsubmit button click event
$('#finalsubmit').click(function(){
$('#searchsubmit').trigger("click");
});
I tried this one and its working for me.
I am trying to point my scripts to two different buttons in my html. The scripts both send an email of what the customer entered however both belong to two separate modal forms.
The first form is:
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
The script that I have associated with this modal form is:
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "#controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
This is referencing the scripts by giving the my form an id of "emailForm". However, if I wanted to add a second modal form such as:
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
This references the same script since I gave this form the id of emailForm as well. However, for some reason the alerts that are suppose to appear for the second form are not showing up. Any idea what this could be? Will I need to create a unique script for each form?
Duplicate ID's violate the specifications and are problematic, but here's a way around that to temporarily repair this code.
$(event.target).find("#messageError").css("display", "block");
The FORM tag is also malformed. I moved it up to match the bottom form tag (to after the fourth DIV).
(There are many duplicate ID problems yet unresolved, but the above specifies to the program within the event listener which element to reveal.)
The solution is to use class and name attributes where appropriate.
JSFiddle: http://jsfiddle.net/BloodyKnuckles/s7D98/
Displaying modal dialog only once, then not displaying again until user has cleared cache or cookies.
I have a modal dialog that I'd like to display when a user visits my website, but only once. If the user closes out of it or uses it, I'd like to not display it again for a very long time.
My jsFiddle is at:
http://jsfiddle.net/B84tq/
My html is:
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" 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">X</button>
<h3 id="myModalLabel">Email Deals</h3>
</div>
<div class="modal-body">
<p>Sign up for email-only specials and news updates. We will not sell or rent your email address.</p>
<p>Sign up now!</p>
<form class="form-horizontal" method="post" action="http://www.gliq.com/cgi-bin/subunsub">
<div class="input-prepend">
<input type="hidden" name="acctname" value="amleo"/>
<input type="hidden" name="action" value="subscribe"/>
<input type="hidden" name="url" value="http://www.amleo.com/subscribe-successful/a/47/"/>
<input type="text" placeholder="Your email address" id="inputIcon" class="input-xlarge" name="email">
<input value="SUBSCRIBE" class="btn btn-orange" type="submit">
</div>
</form>
<p>Privacy Policy.</p>
</div>
</div>
Use cookies.
You can google how to handle cookies in js.
eg. in pseudocode
if (document.cookies['testvalX']!=1)
{
//display modal
document.cookies[] = 'testvalX=1';
}