I am using below click event to reset Form.
'click .resetBulkAssignForm' : function(events, template){
console.log('Reset', $(".bulkAssignForm")[0]);
$(".bulkAssignForm")[0].reset();
$(".bulkAssignForm").find("select").val("");
$('#firmName').select2('data', null);
},
I also tried most of the answers available on SO to solve this issue.
Question: How to reset form inside Bootstrap Modal?
Below is the image of the modal with console output.
NOTE: I am using AdminLTE 2.3.11, Select2. Also kindly take a note that I have already tried solutions in SO links like how-to-clear-all-input-fields-in-bootstrap-modal-when-clicking-data-dismiss-butt, how-to-reset-form-body-in-bootstrap-modal-box
Adding HTML Code in case you need to see.
<div id="myBulkModal" class="modal fade modal-primary" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Bulk Assignment</h2>
</div>
<div class="modal-body">
<section class="content">
<form class="bulkAssignForm">
<fieldset>
<div class="row">
<input type="hidden" id="taskIdInput" value="{{getTaskId}}" />
</div>
<div class="row">
<div class="input-group col-sm-12">
<label for="firmName">Firms</label><br />
<select id="firmName" multiple class="form-control input-lg" required>
{{#each firmNamesFromAssignment}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="assignee">Assignee</label><br />
<select id="assignee" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="reviewedBy">Reviewer</label><br />
<select id="reviewedBy" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<!-- buttons -->
<button type="submit" class="btn btn-outline">
<span class="glyphicon glyphicon-ok"></span> Assign
</button>
<button type="button" class="btn btn-outline resetBulkAssignForm">
<span class="glyphicon glyphicon-off"></span> Reset
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal">
<span class="glyphicon glyphicon-refresh"></span> Close
</button>
</div>
</fieldset>
</form>
</section>
</div>
</div>
</div>
</div>
After changing value of Select2's underlying <select> or <input> you have to trigger change event so this change will be handled by Select2 code and rendered appropriately:
$(".bulkAssignForm").find("select").val("").trigger("change");
Successfully tested on AutoForm Demo test page.
Related
My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?
I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
{% csrf_token %}
<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">
Apply Leave
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3" for="e_id">Employee-Id</label>
<div class="col-sm-9">
<select class="form-control" id="e_id" name="e_id" class="required">
{% for entry in emp_data %}
<option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
{% endfor %}
</select>
</div>
</div>
<style>
.datepicker {
z-index: 1600 !important;
border-color: black;
}
</style>
<div class="form-group">
<label class=" control-label col-sm-3" for="s_dt">Start Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="e_dt">End Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
</div>
</div>
<p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>
<div class="form-group">
<label class="col-sm-3 control-label" for="l_type">Leave Type</label>
<div class="col-sm-9">
<select class="form-control" id="l_type" name="l_type">
<option value="S">Sick Leave</option>
<option value="V">Vacation Leave</option>
<option value="M">Maternity Leave</option>
<option value="P">Paternity Leave</option>
<option value="C">Casual Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="desc">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my javascript:
$(function() {
$("#myForm").validate({
rules: {
s_dt: "required",
e_dt: "required"
},
messages: {
s_dt: "Please provide a date",
e_dt: "Please provide a date"
}
});
});
Thanks in advance..
my contact us page, a pop up is meant to show and disappear when i send a message,but nothing happens. please help
the contact us page and pop up modal
<!-- The Contact Us Page -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 header"></div>
</div>
</div>
</div>
<div class="container card">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="cardStyle">
<form name="contact" id="form" data-toggle="validator">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">
Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="none" selected="" disabled>Choose One:</option>
<option value="general">General Customer Service</option>
<option value="collaborate">Collaborate with Us</option>
<option value="bug">Found a Bug/Issue</option>
<option value="other">Any other Queries</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
this is the pop up modal that is supposed to appear
<!-- Form submitted Thank You Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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 text-center" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the JavaScript file
$(document).ready(function() {
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
$('#myModal').modal('hide');
} else {
// everything looks good!
$('#myModal').modal('show');
}
})
});
Since you try to show the modal only when preventDefault() has NOT been called, the form's default action will take place, which is to submit the form. This causes a page load and since you haven't specified an action attribute on the form, it will submit to the same page. In other words, the page just reloads.
If you don't want to cause a page reload, you have to always call preventDefault() and then submit the data with AJAX.
I have a form submission on a modal, and it works fine for one form but there needs to be 15 modal forms on one page. How can I bind the specific modal opener fields to each form?
I'm sure I'm not explaining myself very well, so here's an example. This is part of a pricing table, so each div set would submit their own period selection and hidden fields - initiated by each individual modal window opener.
<form action="<?php echo JRoute::_('index.php?option=com_component&view=cart'); ?>" enctype="multipart/form-data" method="post">
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h3>Single Domain</h3>
<h3>$4.99/Mo</h3>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Single Domain</li>
<li class="row1 yes">Unlimited Web Space</li>
<li class="row0 yes">Unlimited Bandwidth</li>
<li class="row1 yes">Unlimited Mail Accounts</li>
<li class="row0">
<select name="periods">
</option value="12">12 Months</option>
</option value="24">24 Months</option>
</option value="36">36 Months</option>
</select>
</li>
</ul>
<input type="hidden" name="plan_name" value="Single" />
<input type="hidden" name="plan_type" value="Windows_Hosting" />
<input type="hidden" name="plan_id" value="123456" />
</div>
<div class="col-footer text-center">
<!-- Button trigger modal -->
Buy Now
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog-md">
<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">Specify a domain name for your order</h4>
</div>
<div class="modal-body">
<label class="radio-inline">
<input type="radio" name="has_domain" id="inlineRadio1" value="option1"> I already have a Domain Name
</label>
<label class="radio-inline">
<input type="radio" name="register_domain" id="inlineRadio1" value="option1"> I want to buy a new Domain Name
</label>
<input type="text" placeholder="www." id="inputDomain" class="form-control">
<div class="row">
<strong>Building a website for your business? Don't risk it - safeguard your website with our must-have website tools</strong>
<div class="col-sm-6">
<div class="media">
<span class="pull-left sitelock-menu-icon"> </span>
<div class="media-body">
<h4 class="media-heading text-left">Sitelock</h4>
<p class="text-left">Over 5000 websites get attacked everyday. Get SiteLock and secure your website from hackers, viruses and malware.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<span class="pull-left codeguard-menu-icon"> </span>
<div class="media-body">
<h4 class="media-heading text-left">CodeGuard</h4>
<p class="text-left">Protect yourself from unexpected website crashes. Add CodeGuard and get automatic cloud backup for your website and database.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-small">Continue to checkout</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
EDIT:
I think I included too much code, and not even explanation, so here is a shorter/better example.
<form action="index.php?option=com_component&view=cart" enctype="multipart/form-data" method="post">
<!-- Set #1 -->
<select name="periods_single">
</option value="12">12 Months</option>
</option value="24">24 Months</option>
</option value="36">36 Months</option>
</select>
<input type="hidden" name="plan_name" value="Single" />
<input type="hidden" name="plan_type" value="Windows_Hosting" />
<input type="hidden" name="plan_id" value="123456" />
<!-- Button trigger modal -->
Buy Now
<!-- Set #2 -->
<select name="periods_double">
</option value="12">12 Months</option>
</option value="24">24 Months</option>
</option value="36">36 Months</option>
</select>
<input type="hidden" name="plan_name" value="Double" />
<input type="hidden" name="plan_type" value="Windows_Hosting" />
<input type="hidden" name="plan_id" value="234567" />
<!-- Button trigger modal -->
Buy Now
<!-- Set #3 -->
<select name="periods_triple">
</option value="12">12 Months</option>
</option value="24">24 Months</option>
</option value="36">36 Months</option>
</select>
<input type="hidden" name="plan_name" value="Triple" />
<input type="hidden" name="plan_type" value="Windows_Hosting" />
<input type="hidden" name="plan_id" value="345678" />
<!-- Button trigger modal -->
Buy Now
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog-md">
<div class="modal-content">
<input type="text" placeholder="www." id="inputDomain" class="form-control">
<div class="modal-footer">
<button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-small">Continue to checkout</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Ok, so now you can see that there are (in this example) three sets of period options, each with hidden fields and their modal opener that points to a single modal. What I'm trying to accomplish is to know which modal opener was used, and then get the values associated with it.
Alright, here we go. I think HTML5 data attributes will do it for you. Keep in mind the code I shared below extremely minimal. Have a look at my JSFiddle for a more complete example.
By doing this, you only need one set of hidden fields (the fields that you are going to submit with the modal form). This is what happens:
User clicks on a product. The button clicked has data attributes associated with it which get passed along to the modal form.
A modal opens with an form inside (you can make this hidden, they are visible to demonstrate) the form now holds the correct data.
User proceeds, the form will be submitted.
$(document).ready(function() {
// You'll probably wan't to make .btn-default more specific
$('.btn-default').on( 'click', function() {
var name = $(this).attr('data-name');
var type = $(this).attr('data-type');
var id = $(this).attr('data-id');
var option = $(this).parents('.product').find(':selected').attr('data-option');
$('.modal input#choosen_option').val(option);
$('.modal input#choosen_name').val(name);
$('.modal input#choosen_type').val(type);
$('.modal input#choosen_id').val(id);
});
});
The markup:
<!-- Set #1 -->
<div class="product">
<select name="periods_single">
<option data-option="12">12 Months</option>
<option data-option="24">24 Months</option>
<option data-option="36">36 Months</option>
</select>
<a class="btn-default" data-name="Single" data-type="Windows_Hosting" data-id="1">
Buy Now
</a>
</div>
<!-- Set #2 -->
<div class="product">
<select name="periods_double">
<option data-option="12">12 Months</option>
<option data-option="24">24 Months</option>
<option data-option="36">36 Months</option>
</select>
<a class="btn-default" data-name="Double" data-type="Windows_Hosting" data-id="2">Buy Now</a>
</div>
The modal with form:
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog-md">
<div class="modal-content">
<div class="modal-footer">
<form action="">
<input type="text" id="choosen_option" />
<input type="text" id="choosen_name" />
<input type="text" id="choosen_type" />
<input type="text" id="choosen_id" />
</form>
</div>
</div>
</div>
</div>
Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.
From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.