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
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 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/
I am relatively new the web programmer so this may or may not be a solution solvable through JavaScript. If not, please point me in the correct direction.
{% for thought in user.thoughts %}
<div class="panel panel-default">
<!-- Icon to Display Modal -->
<div class="panel-heading" align="right">
Icon Here!
</div>
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action={{ "/editthought/" ~ thought.id }} method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Thought Body -->
<div class="panel-body">
{{ thought.body }}
</div>
{% endfor %}
Here I am iterating through every thought associated with a user. Each thought displays a panel showing the thought with an icon to edit the thought.
When you click the icon, a modal pops up with the body of the thought. The issue I'm having is all of the modals contain the same pre-populated thought (the first one in the list).
The link (href={{ "/edit/" ~ thought.id }}) on the edit icon is correct as well as the body of the panel, however when you load the modal, it is not loading the correct thought. Any ideas?
EDIT: I can't figure out how to comment code. Following advice, I took the modal out of the for loop. I'm currently using this function to pass data from my button in the for loop to my modal.
<script>function testFun(variable){document.getElementById('thought_id').innerHTML=variable;}</script>
It's working however I can only pass information if it's formatted like this:
<h1 id="thought_id"></h1>
Is there any way to change this function so I can pass it as a string ike this:
<h1>thought_id</h1>
Again this is not the most efficient solution but would prevent you from having to pull the modal outside your loop and use JS to update your modal.
Quick fix for your links datatarget
<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit">
Quick Fix to your modal id
<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
!!!!! OR GO THE MORE EFFICIENT ROUTE !!!!!
If you do go the route of moving the dialog out of for loop you can do something like below by adding a class to your links and attache a click event to them. Also add data-thought_id and data-thought_body to the link in your for loop.
jQuery:
$(function() {
$('.thought-link').click(function(event) {
event.preventDefault();
var action_path = '/editthought/' + $(this).attr('data-thought_id');
var thought_body = $(this).attr('data-thought_body');
$('#EditModal form').attr('action', action_path);
$('#EditModal textarea').text(thought_body);
$('#EditModal').modal('show');
});
});
Your new link:
Icon Here!
Your modal(outside the for loop):
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action="" method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
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'm using Bootstrap framework v3.3.0 for my website.
I'm dealing with multiple modal dialog boxes. In one dialog there is one form having one textfield, one date control and one file control. After submitting the form successfully I hide this modal and show another modal with success message. On this modal there is one button having text "Submit another form". When user clicks on this button the dialog containing success message get close and the modal dialog containing form opens but it contains the previous values that I filled in. I don't want these values again. I want to clear these fields. How should I do this?
Following is the code:
HTML code:
<div class="modal fade" id="newModal" 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">Submit Form</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<br/>
<!-- The form is placed inside the body of modal -->
<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="reg_id" id="reg_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" 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">Your Request Uploaded Successfully</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<h4 style="font-weight:bold;text-align: center;">Thank you!</h4>
<p style="text-align: justify;">Your request has been successfully submitted.</p>
<div class="modal-footer" style="text-align:center;">
<button type="button" class="btn btn-danger" id="btn_exit">Exit</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btn_scan_another">Scan Another Receipt</button>
</div>
</div>
</div>
</div>
</div>
The jQuery code :
$(document).ready(function() {
$("#btn_scan_another").on("click", function(event){
event.preventDefault();
$('#successModal').modal('hide');
$('#newModal').modal('show');
});
});
Thanks.
You could add something like:
$('#newModal').find('form')[0].reset();
before showing it
You actually don't have any JS code that does what you want.
Have you tried anything?
How about this:
$('#newModal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});