I am trying to make a submit using ajax but I'm facing issues, I'm having two popup one is #popup-subscribe and the other is #popup-subscribe-success, I wanted to hide the first popup on subscribe and show the second popup.
This is how I open the first popup:
<button class="btn btn-round btn-primary mt-1 w-100" data-toggle="popup" data-target="#popup-subscribe">Subscribe Now</button>
The first popup is:
<!-- Subscribe PopUp -->
<div id="popup-subscribe" class="popup col-10 col-md-4 p-6" data-animation="slide-up">
<button type="button" class="close" data-dismiss="popup" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<form action="#" method="post" name="form-subscribe" id="form-subscribe">
<h5>Stay Updated</h5>
<p>Latest news direct to your inbox — <mark>no spams</mark>.</p>
<div class="form-group">
<input class="form-control" type="text" name="full_name" placeholder="Your Full Name">
</div>
<div class="form-group">
<input class="form-control" type="email" name="email_id" placeholder="Your Email Address">
</div>
<div class="form-group">
<input class="form-control" type="text" name="cell_no" placeholder="Your Cell Number">
</div>
<button class="btn btn-lg btn-block btn-primary" type="submit">Subscribe</button>
</form>
</div>
and the second popup is:
<!-- Subscribe Success -->
<div id="popup-subscribe-success" class="popup col-10 col-md-4 p-6" data-animation="slide-up">
<button type="button" class="close" data-dismiss="popup" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5>Stay Updated</h5>
<p id="subscriber_ip"></p>
<p>Latest news direct to your inbox — <mark>no spams</mark>.</p>
</div>
and the script I'm using is:
//form-subscription-submit-action
$("#form-subscribe").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "assets/php/ajax_functions.php",
data: $(this).serialize()+"&action=form-subscribe",
dataType: "json",
success: function(data){
if(data.status==1) {
$("#popup-subscribe").hide();
//$("#popup-subscribe-success").find("#subscriber_ip").html(data.subscriber_ip)
$("#popup-subscribe-success").show();
}
}
});
});
the first popup is getting hidden but the second popup is not getting visible.
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'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<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">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?
You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!
i am newbie.
I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal.
Here is my Main Code where the Button is placed in my homepage.
<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button>
In signin.html
<div class="modal"id="mymodal" >
<h3 class="modal-header">
<h1>
We Are Glad you are Here!
</h1>
</div>
<div class="modal-body">
<div class="container">
<form class="form-signin">
<h6 class="form-signin-heading">
Please sign In</p>
<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-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>
</div> </div>
Issue
Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.
Working Example
I think the target element with the id mymodal should be in the same page with button, try to place <div class="modal"id="mymodal" ></div> after the button :
<button id="btn1">
<a href="signin.html" class="btn btn-success" data-toggle="modal"
data-target="#mymodal"type="button">
<span class="glyphicon glyphicon-edit"></span> Sign In
</a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button
Hope this helps.
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/
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.