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();
})
})
Related
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>
I have a function where I add shops. In this function, I can select whether the shop is OPEN or CLOSE. My target is, on my other modal,
when I create a user and selected the shop I created, The status of
the shop whether OPEN or CLOSE will appear on my textbox.
I provided my codes below and my screenshot. Any help will be appreciated
HTML:
<div class="col-md-3 float-left mb-2" >
<button type="button" class=" btn-block btn bbutton text-bold btn-lg" data-toggle="modal" data-target="#accountModal"
data-id="<?php echo $_SESSION['uid']?>" data-user="<?php echo $_SESSION['username']?>"
Edit <?php echo $_SESSION['uid']?>>
Add User
</button>
<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-image: linear-gradient(90deg, #00e6ac, #1f9388);">
<h5 class="modal-title text-bold" id="exampleModalLabel">Add Users For shop</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
<form id="createAccount">
<div class="form-group" >
<label>Company</label>
<select class="form-control" name="nameofshop" required>
<option value="">No Selected</option>
<?php
foreach($category as $row):?>
<option value="<?php echo $row->shopName;?>"><?php echo $row->shopName;?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">status:</label>
<label class="container">Open
<input type="radio" name="status" value="open">
</label>
<label class="container">Close
<input type="radio" name="status" value="close">
</label>
</div>
</div>
<button type="submit" class="btn btn btn-dark btn-flat float-right" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
I would listen to any change in the shop input field using javascript. Whenever an option is selected, I would take that option's value (let's say "icecreamshop" for instance), and get the status of that shop from the model. When you finally get that "close" status, you can then insert it manually into the second input field.
An example using jQuery:
let shopField = $('#shop-field');
let statusField = $('#status-field');
shopField.change(() => {
let status = findShopStatus($(this).val());
statusField.val(status);
});
where findShopStatus is a function that gets the status of a shop by its name from the model.
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 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>