Upon clicking a link, I'm triggering a modal and dynamically setting the form action contained in the modal based on the link clicked.
It works nearly every time; however, the tester is reporting that maybe 1 in 50 times, the action is not updated. The intermittent failure has been reproduced in IE11 and latest Chrome.
Below is the gist of the code
<ul>
<li><a class="action_url" href="http://somedomain.com">Some Domain</a></li>
<li><a class="action_url" href="http://anotherdomain.com">Another Domain</a></li>
<li><a class="action_url" href="http://yetanotherdomain.com">Yet Another Domain</a></li>
</ul>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Post Your Message</h4>
</div>
<div class="modal-body">
<form role="form" class="message-form" method="post" action="">
<div class="form-group">
<input type="text" class="form-control" id="message" placeholder="message" name="message" value="">
</div>
<button type="submit" class="btn btn-success btn-block">Post</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).on("click", ".action_url", function(e) {
e.preventDefault();
$(".message-form").attr('action', e.target.href);
$("#myModal").modal();
});
</script>
And a link to
jsfiddle
I've created an alternate version that uses setTimeout (but that's a bit of a hack and more importantly didn't completely eliminate the issue)
Anyone seen this issue in the wild? Know the cause? And most important, the fix?
Related
i have bootstrap modal and always close when i click "Reject".
Why is the preventDefault() not stopping the button from submitting when notes field is empty?
modal :
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="form-group has-error">
<label class="col-sm-2 control-label"> Add Note <b style="color:red;">*</b></label>
<div style="margin-left: 5%;margin-right: 5%;">
<textarea id="NOTES_REJECT_SV" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" id="submit" form="form" style="width:150px;height:40px;text-align:center;" class="btn btn-ok pull-right" data-dismiss="modal">Reject</button>
<button type="button" class="btn btn-light pull-right" style="width:120px;height:40px;" data-dismiss="modal" >CANCEL</button>
</div>
</div>
</div>
</div>
</div>
and my Javascript :
$('#modal_reject').on('click','#submit',function(event){
event.preventDefault();
var NOTES = document.getElementById("NOTES_REJECT_SV").value;
if(NOTES == ''){
$('#modal_reject').modal('hide')
return false;
}
You can simply .val() jQuery to get the value of your notes. I would not rec-emend mixing up the jQuery and JS together to avoid confusion.
The reason your modal was still hiding that you have data-dismiss="modal" in your modal reject button.
I have simplified your code and is working. If you do not put anything in notes area it will hide the modal or else it will stay and you can do the rest of stuff there.
Also using inline CSS is not a good practice. Bootstrap allow a lot of native class to used do you can want label * red you can just used text-danger class to do that instead of inline CSS.
You can read more on bootstrap Modal and other details here
Run snippet below to see it working.
$('#modal_reject').on('click', '#submit', function(event) {
event.preventDefault();
//get notes
var notes = $('#notes_reject_scv').val();
//if notes are empty hide the modal
if (!notes) {
$('#modal_reject').modal('hide')
console.log('Notes were empty! Modal disappeared')
return false;
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group has-error">
<label class="control-label"> Add Note <span class="text-danger">*</span></label>
<textarea id="notes_reject_scv" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can listen to the click envent on tre #submit button as described below
$("#submit").click(function(event){
event.preventDefault();
var NOTES = document.getElementById("NOTES_REJECT_SV").value;
...
});
I have a very simple modal form that ultimately will be used to insert data into a SQL database. As I am new to this I am just trying to confirm that control is passing correctly, however the below code does not seem to be working.
Here is my HTML code:
<div class="modal" id="new-role-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New User Role</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div>
<form method="post" id="new-role">
<input type="text" class="form-control" id="role-title" placeholder="Role Title" name="role-title">
<div class="modal-actions">
<div>
<button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>
<button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My jquery code is:
$("#new-role").submit(function(e){
e.preventDefault(e);
alert('submit intercepted');
});
Once I can get the alert displaying I will ultimately replace this with validation and the relevant code to add the data, but right now I can't even get the alert to display. Where have I gone wrong?
Change
<button type="submit" class="btn-link modal-action" id="add-role" data-dismiss="modal" value="add-role"><strong>Continue</strong></button>
to
<button type="submit" class="btn-link modal-action" id="add-role" value="add-role"><strong>Continue</strong></button>
Your script will work.
Problem: Your submit button has attribute data-dismiss="modal" that make the modal close without run your script.
I am trying to load a bootstrap modal on a button click.
Already I am have one more Modal in the page which is working fine but on the button click but when I am trying to load another modal on a button click, its just loading faded screen.
<button class="btn btn-green btn-sm" data-toggle="modal" data-target="#addUserModal"><i class="fa fa-plus"></i> <span>Add User</span></button>
<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" role="dialog" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Add User</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
<div class="input-group mb-3">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
Could it be that there is a mistake in your -tags? That may cause an error in your modal-body.
<div class="modal-body">
<form action="" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">User ID</span>
</div>
<input type="text" class="form-control" id="user_id" value="{{user.UserID}}">
</div>
//removed orphan tag
</form>
</div>
When removed, the modal works fine.
The code you posted is working fine
Codepen Link
Make sure you have added the jquery, popper.js.
This question already has answers here:
How to prevent form from being submitted?
(11 answers)
Closed 6 years ago.
I have a problems with my button in my modal. On this button I have put a onclick, but the problems is when a click on this one mouse or enter, the page refresh.
That's I want it's to may click on ENTER and my page do my function connexion() does not refresh, because a make a AJAX code inside.
This is my modal code:
<div class="modal fade" id="myModalLogin" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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" id="myModalLabel">Se connecter</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id='wellconnexion' class="well">
<h1 id="TitleHistoriqueconnnexion" class="text-center">Se connecter</h1>
<br>
<h4 id="ContentHistorique1"></h4>
<div id='contentconnexion' class="contentconnexion">
<form >
<div class="form-group formmarginleft">
<input name="user_login" id="user_login" type="text" placeholder="Identifiant" class="form-control">
</div>
<div class="form-group formmarginleft">
<input name="user_password" id="user_password" type="password" placeholder="Mot de passe" class="form-control">
</div>
<div class="row">
<div class="col-12-xs text-center">
<button id="validerlogin" onclick="connexion()" value="Se connecter" class="btn btn-primary">Se connecter</button>
<div data-dismiss="modal" class="btn btn-warning">Fermer</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In your onclick function use the preventDefault function to prevent it from reloading the page. That should fix the issue.
https://api.jquery.com/event.preventdefault/
Set attribute type as button on your button element:
<button type="button" ... >Se connecter</button>
By default, button element sets type attribute equal to submit, so when you click on this button, your page gets submitted to server.
You can check the MDN documentation
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
use preventDefault http://www.w3schools.com/jsref/event_preventdefault.asp
on your "connexion()" function....
I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.
Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>