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....
Related
Below is example HTML straight from the docs except that I added an id to the form element. Why are they showing the buttons outside of the form? Shouldn't they be located within the form so that when clicked, the form is submitted? Please see my typical JavaScript at the bottom. If not, is it required to attach an event to the button.btn-primary which will then submit the form, or not even use this event and just do the work within the click primary button event?
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="my-form">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
My typical JS would be something like the following:
const form = document.getElementById( "my-form" );
form.addEventListener( "submit", function ( event ) {
event.preventDefault();
// Make a XMLHttpRequest as necessary
} );
The button element has an optional form attribute that is used to associate it with a form. This allows the button to be positioned anywhere, not necessarily inside of the form element. It also allows for multiple button elements to be associated with a single form in cases where different submit parameters might be needed.
I have created a bootstrap modal with a input text as shown in the following image. The input gets focus on click(sometimes), however when I try to enter text, nothing happens.
I am using angular 4, and in my project structure I have a component which has another modal dialog - and the inputs work fine, however the child of that component has this modal (which is appended to the document body on show) and the input is not editable.
Do you have any idea why this is happening?
Thanks
Code for modal:
<div class="modal fade" id="boardDetailsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit timeline</h4>
</div>
<div class="modal-body">
<input type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="saveTimeline()">Save</button>
<button type="button" class="btn btn-default" (click)="close()">Close</button>
</div>
</div>
</div>
</div>
Code for showing modal:
ngAfterViewInit() {
let self = this;
self.element.appendTo("body").modal('show');
}
I think you have a small typo.
Change your input to:
<input type="text" />
Notice the forward slash.
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 have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" 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">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle
A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example
try this:
after the onclick action:
$('#auth_code_input10').val() == null;
Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/
So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance
You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show