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>
Related
i have a table that i want the user to be able to edit, when the edit button is clicked i want the value of the field shown in the modal. i managed to do that however all values are being displayed i only want the values of the field related to the edit button clicked.
this is my code
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
{%for element in data%}
<form method="post">
<div class="modal-header">
<h4 class="modal-title">Edit User</h4>
<input name="_id" value="_id" id="the.id" hidden></input>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>First Name</label>
<input type="text" name="UPusername" value="{{ element['username'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="UPlast_name" value="{{ element['last_name']}}" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="UPemail" value="{{ element['email'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Registration number</label>
<input type="text" name="UPrej_num" value="{{ element['rej_num'] }}" class="form-control" >
</div>
<div class="form-group">
<label>Position</label>
<select class=" position-form" id="exampleFormControlSelect1" name="UPposition">
<option value="">Choose Option...</option>
<option value="President">President</option>
<option value="Manager">Manager </option>
<option value="Managing Director">Managing Director</option>
<option value="R department">HR department </option>
<option value="Accountant">Accountant</option>
<option value="Project Manager">Project Manager</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-info" value="Save">
</div>
</form>
{%endfor%}
</div>
</div>
</div>
And this is how it's currently shown:
I am making a website, and want the "Meet the animals" button to scroll to the referenced section, then close the popup. Right now, it is scrolling down to the section I want but is not closing after it scrolls.
function hide() {
document.getElementById('question').style.display = 'none';
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fade" id="question" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<h4>What do you truly need in a furry companion?</h4>
<br>
<div class="card">
<div class="card-body">
<div class="row">
<div class="form-group col-sm-4">
<label for="typeOfAnimal">Type of Animal</label>
<select class="form_select" id="typeOfAnimal" onchange="showDiv(this)">
<option value="0" data-target="myCarousel">Any</option>
<option value="1" data-target="dogCarousel">Dog</option>
<option value="2" data-target="catCarousel">Cat</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="size">Size</label>
<select class="form_select" id="size">
<option>Any</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<div class="form-group col-sm-3">
<label for="other">Other</label>
<select class="form-select" id="other">
<option>N/A</option>
<option>Hypoallergenic</option>
</select>
</div>
</div>
</div>
</div>
<div class="card-footer">
Meet the animals
<button type="button" class="main-button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
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.
I am attempting to clear the values in a modal when the modal is hidden. I am able to clear the value of a regular input field, but cannot get the select box to go back to the default value ('0' in this case).
This is my HTML / modal:
<div class="modal fade" id="entity_request_modal" tabindex="-1" role="dialog" aria-labelledby="entity_request_modal" 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">Request to Add Business Entity</h4>
</div>
<div class="modal-body">
<div class="form-group">
{% csrf_token %}
<label>Business Name</label>
<input id="entity_name" class="form-control" placeholder="Enter business name..." name="entity_name" value="">
</div>
<div class="form-group">
<label>Entity Type</label>
<select data-placeholder="Entity Type..." class="chosen-select" tabindex="-1" id="select_entity_type" name="select_entity_type">
<option value="0">Make a Selection</option>
<option value="3">Financial Institution</option>
<option value="14">College Institution</option>
<option value="13">Hospital or Clinic</option>
<option value="4">Internet Service Provider</option>
<option value="9">Cellular Provider</option>
<option value="10">Social Network</option>
<option value="7">Consumer Retailer</option>
<option value="8">Health Insurance Provider</option>
<option value="11">Auto Insurance Provider</option>
<option value="12">Home Insurance Provider</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="request_entity" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
This is my JS / JQ:
$('#entity_request_modal').on('hide.bs.modal', function (e) {
$('#entity_name').val('');
$('#select_entity_type').val('0');
});
Again, '#entity_name' is being correctly reset, but '#select_entity_type' is not. Thoughts?
You May Set select option selectedIndex prop to 0;
$('#select_entity_type').prop('selectedIndex',0);
Use like below.
$('#entity_request_modal').on('hide.bs.modal', function (e) {
$('#entity_name').val('');
$('#select_entity_type').prop('selectedIndex',0);
});
Also Check The Fiddle.
I,m working on an angular form and need to resolve a bug.
Here is the issue :
1)- Select type : value-1
2)- Select Data-1 : All Data-1
3)- Select Data-2 : All Data-2
4)- Now change type to : Value-2 (instead of value-1).
The fields of data-1 and data-2 should disappear.
5)- Now select the type again to value-1.
Now click on data-1 or data-2 again...you would see an empty space
again.
I don't want this empty space here...
instead it should be back to --choose one--
again...
I am attaching screenshot and code...please take a look.
<form class="addAlert settings_form" ng-submit="createAlert(newAlert)">
<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" id="myModalLabel">Create a New Model</h4>
</div>
<div class="modal-body">
<div class="form_fieldset">
<div class="form_item">
<label for="title">Name</label>
<input name="title" type="text" class="form-input title" required placeholder="Alert Name" ng-model="newAlert.title">
<div class="error"></div>
</div>
<div class="form_item">
<label for="alertformat">Type</label>
<select class="form-input alertformat"
name="alertformat" ng-model="newAlert.alertType"
ng-init="newAlert.alertType='Threshold'">
<option value="Threshold" selected>Value-1</option>
<option value="Pipeline Failure">Value-2</option>
</select>
</div>
<div class="form_item" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-1 </label>
<select class="form-input alertformat" name="alertformat"
ng-model="newAlert.site" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-1</option>
<option ng-repeat="item in assetsData" ng-value="{{item.sitename}}">
{{item.sitename}}
</option>
</select>
</div>
<div class="form_item" ng-show="newAlert.site" ng-if="newAlert.alertType !='Pipeline Failure'">
<label for="alertformat">Data-2</label>
<select class="form-input alertformat" name="alertformat" ng-model="newAlert.asset" required>
<option value="" disabled>-- Choose one --</option>
<option ng-value="-1">All Data-2</option>
<option ng-repeat="item in assetsData | filter:newAlert.site" ng-value="{{item.sitename}}">
{{item.name}}
</option>
</select>
</div>
<div class="form_item">
<label for="alertformat">Color</label>
<div class="severity">
<input type="radio" class="radioBtnClass" name="numbers" value="Red"checked required>
<span>Red</span>
</input>
<input type="radio" class="radioBtnClass" name="numbers" value="Ember">
<span>Blue</span>
</input>
</div>
</div>
<div class="form_item">
<label for="users">Users</label>
<div class="user_select">
<span ng-repeat="user in userList" style="display:block">
<input class="alert_user_class" value="{{user.pk}}" type="checkbox">
{{user.email}}
</input>
</span>
</div>
</div>
</div>
</div>
</form>
On change event of your 'type' dropdown, you need to assign $scope.newAlert.site = ''; and $scope.newAlert.asset = '' as 'Choose one' option has value Empty String("").