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.
Related
Let's say I have the following form:
<form id="evidence-formset" action="{% url 'interpret-criteria' %}" method="post">
<div class="form-group row">
<!-- Some content here -->
<div class="col-auto">
<input type="submit" class="btn btn-primary" value="Calculate" />
<input type="reset" class="btn btn-secondary" value="Reset" />
<input type="submit" class="btn btn-dark" value="Register" onclick="validateRegister()" formaction='https://www.wikipedia.org/'/>
<input type="submit" class="btn btn-link" value="Export results as Excel" formaction="{% url 'export-interpretation' %}" />
</div>
</div>
<form>
And the following JS function (WIP):
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#registerSubmit").submit()
}
And this basic modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Register changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So basically what I want is that when I click the Register button a modal shows, asking for confirmation. If I click again on 'Register' then the input will submit and the webpage should redirect to wikipedia (this is just an example). If I click Close, no form should be submitted and the modal will disappear.
I checked all the previous StackOverflow questions and I couldn't find an answer that worked for me. The closest solution I found is this but it doesn't work.
UPDATE WITH A SOLUTION:
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#myModal").on("click",".btn-primary", function(){
$('#evidence-formset').attr('action', 'https://www.wikipedia.org/').submit();
});
}
remove onclick and add this
$("#evidence-formset").on("submit",function(e) {
e.preventDefault();
$("#myModal").modal();
})
Add ok/cancel to the buttons of the modal
$("#myModal").on("click",".btn-primary", function(){
$("#evidence-formset").submit(); // you can add if (validate(....) in front if you have any validation
});
$("#myModal").on("click",".btn-secondary", function(){
$("#myModal").modal('toggle');
});
I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>
I'm creating a type of content management system that allows users to create pages based on templates.
I have a page that has 2 placeholder divs. Below is an example of one. When you click on the div, a modal pops up that allows the user to use TinyMCE to create content. The idea is to set the content, hit the "Get Data" button and have the modal disappear with the content from the editor now displaying inside the original div.
This is working as far as p utting the content in the div when I hit submit. The body of the modal disappears at this point, but the gray opacity screen that usually sits under the bootstrap modal is still present and I can't any longer do anything on the page. I'm wondering what I'm doing wrong here and how I can fix it to fully close the modal when I hit the submit button.
<div class="leftContent">
<div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="leftFiftyModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data" method="post">
<textarea id="mytextarea"></textarea>
<input type="submit" value="Get Data">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
return false;
});
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
});
</script>
Try:
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
return false;
});
});
</script>
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?
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"/>