Develop Reference

How to get the values of the select option for the show modal?

I have a select option like this:
<form action="#" class="modal-content">
<select class="form-select" id="value" name="value">
<option value="">Select an option</option>
<option value="1" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="1">Driver2</option>
<option value="2" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="2">Driver1</option>
<option value="3" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="3">Driver3</option>
<option value="4" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="4">Create date</option>
</select>
...
I want to get the values of the select option for the show modal.
For example, when I select the below option, I want to show the modal of bootstrap 5 like this.:
<option value="2" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="2">Driver1</option>
I also have a Bootstrap modal window:
<div class="modal fade" id="valueModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="valueModal" aria-hidden="true">
<div class="modal-dialog">
<form action="#" class="modal-content">
<input value="" name="option_id" type="hidden">
<div class="modal-header">
<h5 class="modal-title" id="valueModal">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<!-- Multi Forms -->
</div>
</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">Save changes</button>
</div>
</form>
</div>
</div>
I would like to show the Bootstrap modal if the value value is selected.
I have tried doing this:
<script>
$("#value").bind("change", function () {
$('#valueModal').modal('show')(this.value === 'option_id');
}).change();
</script>

You can get all the child option tags by using selectElement.options and can access them by index like an array.
sel.addEventListener("change",()=>{
let selectedOption = sel.options[sel.selectedIndex];
console.log(selectedOption); // get the element
console.log(selectedOption.value); //get the value attribute
console.log(selectedOption.innerText); // get the inner text
});
const sel = document.getElementById("select");
sel.addEventListener("change",()=>{
let selectedOption = sel.options[sel.selectedIndex];
console.log(selectedOption); // get the element
console.log(selectedOption.value); //get the value attribute
console.log(selectedOption.innerText); // get the inner text
});
<select id='select'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>

Display value in a modal

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 can't get my form to submit after using preventdefault

I have a form inside a modal structure where I recollect some info from the user, after that I want to submit that info into a post request so I can process it in python.
The problem is that I need to check first if the user actually put the info, so I won't get empty values.
I'm using .preventDefault() in order to stop the submission and check the values. The program posts fine as long as I don't use the preventDefault, and actually doesn't post when using it.
The problem is that after passing all the conditions, it should post, but is not doing it and I don't know why.
Here is the code of the form:
<form id="forminout" action="/in_out" method="post">
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="incomeModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add your new income</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="new_incomes">
<div style="padding:3%">
<input step=".01" type="number" class="form-control input-sm" name="incoming" min="0" placeholder="0">
<select class="incomselect" name="incomeselects" style="height:30px;">
<option selected disabled>This income is coming from?</option>
<option value="rent">Rents</option>
<option value="salary">Salary</option>
<option value="invest_reveneu">Investments reveneus</option>
<option value="others">Others</option>
</select>
<select class="incomdate" name="incomedate" style="height: 30px;">
<option selected disabled>Incoming date</option>
<option value=5>1 - 5</option>
<option value=10>6 - 10</option>
<option value=15>11 - 15</option>
<option value=20>16 - 20</option>
<option value=25>21 - 25</option>
<option value=31>26 - 31</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="addinbutt" type="submit">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Which is working fine because the post is actually happening.
And here is the "simplified" code of the post request:
$("document").ready(function(){
$("form").on("submit", function(e){
errors = 0;
e.preventDefault();
if (errors==0)
{
document.getElementById("#forminout").submit();
}
})
})
In this case the errors==0 condition is only used as a simplification, supposing that all the actual conditions I need to check are ok.
I just can't get it to post.

solution : write this.submit() or e.target.submit() instead of doc.getElById().submit()
$("document").ready(function(){
$("#forminout").on("submit", function(e){
e.preventDefault();
// ur conditions ...
this.submit();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="forminout" action="/in_out" method="post">
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="incomeModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add your new income</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="new_incomes">
<div style="padding:3%">
<input step=".01" type="number" class="form-control input-sm" name="incoming" min="0" placeholder="0">
<select class="incomselect" name="incomeselects" style="height:30px;">
<option selected disabled>This income is coming from?</option>
<option value="rent">Rents</option>
<option value="salary">Salary</option>
<option value="invest_reveneu">Investments reveneus</option>
<option value="others">Others</option>
</select>
<select class="incomdate" name="incomedate" style="height: 30px;">
<option selected disabled>Incoming date</option>
<option value=5>1 - 5</option>
<option value=10>6 - 10</option>
<option value=15>11 - 15</option>
<option value=20>16 - 20</option>
<option value=25>21 - 25</option>
<option value=31>26 - 31</option>
</select>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="addinbutt" type="submit">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
EDIT :
you can even write this based on e parameter :
$("document").ready(function(){
$("#forminout").on("submit", function(e){
e.preventDefault();
// ur conditions ...
e.target.submit();
})
})

Form inside Boostrap Modal does not reset

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.

bootstrap single modal window with multiple forms

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>