Here is the Fiddle link for my code
I user bootstrap 4.
When I click in the dropdown, Dropdown will close in my local environment. In fiddle, it's working fine.
Which point I missing in my local. Even my local and fiddle setup are the same.
JS Fiddle Link
<div class="dropdown d-inline-block">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Advance Filter
</button>
<div class="dropdown-menu pr-2 pl-2 advance-filter-dropdown" aria-labelledby="dropdownMenuButton">
<div class="advance-filter-wrap">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="" class="sr-only">By Agent</label>
<select name="" id="" class="form-control">
<option value="agent1">Agent 1</option>
<option value="agent2">Agent 2</option>
<option value="agent3">Agent 3</option>
<option value="agent4">Agent 4</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="" class="sr-only">Lead Potential</label>
<select name="" id="" class="form-control">
<option value="huge">Huge</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</select>
</div>
</div>
</div>
</div>
<div class="advance-filter-footer text-right">
<button class="btn btn-danger btn-sm">Reset All</button>
<button class="btn btn-success btn-sm">Apply</button>
</div>
</div>
</div>
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.
function changeColor() {
const color = document.getElementById("colors").value;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4" >Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
function changeColor() {
var e = document.getElementById("colors");
var color = e.options[e.selectedIndex].text;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4">Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
Quiet new to front end dev and need to have a function where if the form values change from either loaded defaults or placeholder values, that some buttons are disabled/enabled to stop user navigating away without changing the values.
So far i have been able to set the fields to disabled but when i change the value back, it doesn't re-enable to buttons. Not to sure if i need to save the loaded values somewhere first or not.
$('select[name="startTimeHr"]').change(function(){
console.log("In change func");
if ($(this).val())
{
console.log("Changed");
console.log($(this).val());
$("button[name='addButton']").attr('disabled', true);
$("button[name='modifyButton']").attr('disabled', true);
$("button[name='deleteButton']").attr('disabled', true);
} else {
console.log("Default");
$("button[name='addButton']").removeAttr('disabled');
$("button[name='modifyButton']").removeAttr('disabled');
$("button[name='deleteButton']").removeAttr('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="toDr" name="toDr">
<div class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="startTimeHr">
Start time
</label>
<div class="col-lg-1">
<div class="input-group" style="width: 100%">
<select id="startTimeHr" name="startTimeHr" class="form-control col-xs-12">
<option value="startTimeHrDefault">HH
</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button class="btn btn-success split_button col-xs-12" id="pack-TEST_split_addextra2" name="addButton">
Add Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button class="btn btn-warning split_button col-xs-12" id="pack-TEST_split_mod2" name="modifyButton">
Modify Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button class="btn btn-danger split_button col-xs-12" id="pack-TEST_split_del2" name="deleteButton">
Delete Rule
</button>
</div>
</form>
I am not sure about the term value back. onchange the condition is always true. If you mean to enable the button when the first option is selected then you can try if (Number($(this).val()))
$('select[name="startTimeHr"]').change(function(){
if (Number($(this).val()))
{
$("button[name='addButton']").attr('disabled', true);
$("button[name='modifyButton']").attr('disabled', true);
$("button[name='deleteButton']").attr('disabled', true);
} else {
$("button[name='addButton']").removeAttr('disabled');
$("button[name='modifyButton']").removeAttr('disabled');
$("button[name='deleteButton']").removeAttr('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="toDr" name="toDr">
<div class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="startTimeHr">
Start time
</label>
<div class="col-lg-1">
<div class="input-group" style="width: 100%">
<select id="startTimeHr" name="startTimeHr"
class="form-control col-xs-12">
<option value="startTimeHrDefault">HH
</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-success split_button col-xs-12"
id="pack-TEST_split_addextra2"
name="addButton">
Add Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-warning split_button col-xs-12"
id="pack-TEST_split_mod2"
name="modifyButton">
Modify Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-danger split_button col-xs-12"
id="pack-TEST_split_del2"
name="deleteButton">
Delete Rule
</button>
</div>
</form>
You need to change the select html as (first option value should be Empty)
<select id="startTimeHr" name="startTimeHr"
class="form-control col-xs-12">
<option value="">HH</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
just remove startTimeHrDefault from value="startTimeHrDefault" as your if condition checks if value of select option is empty.
$('select[name="startTimeHr"]').change(function(){
alert("In change func");
if ($(this).val())
{
alert("Changed");
alert($(this).val());
$("button[name='addButton']").attr('disabled', true);
$("button[name='modifyButton']").attr('disabled', true);
$("button[name='deleteButton']").attr('disabled', true);
} else {
alert("Default");
$("button[name='addButton']").removeAttr('disabled');
$("button[name='modifyButton']").removeAttr('disabled');
$("button[name='deleteButton']").removeAttr('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="toDr" name="toDr">
<div class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="startTimeHr">
Start time
</label>
<div class="col-lg-1">
<div class="input-group" style="width: 100%">
<select id="startTimeHr" name="startTimeHr"
class="form-control col-xs-12">
<option value="">HH
</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-success split_button col-xs-12"
id="pack-TEST_split_addextra2"
name="addButton">
Add Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-warning split_button col-xs-12"
id="pack-TEST_split_mod2"
name="modifyButton">
Modify Rule
</button>
</div>
<div class="col-xs-4 col-md-3 col-lg-2">
<button
class="btn btn-danger split_button col-xs-12"
id="pack-TEST_split_del2"
name="deleteButton">
Delete Rule
</button>
</div>
</form>
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.
Here is a sample of my code:
<div class="panel panel-default"> <!--Day Plan-->
<div class="panel-heading">
<h4 class="panel-title"> <a class=" accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> ITINERARY </a> </h4>
</div>
<div id="collapseFour" class="panel-collapse collapse ">
<div class="panel-body dayplan"> <!--Day Plan-->
<div class="control-group" id="fields">
<label class="control-label" for="field1">Please add Day Plan </label>
<div class="controls_day_plan">
<div class="entry_day_plan input-group col-sm-12 col-xs-12 ">
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Select Day </label>
<select class="form_line_only form-control" name="dp_day[]" id="select_time">
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
<option > 4 </option>
<option > 5 </option>
<option > 6 </option>
<option > 7 </option>
</select>
</div>
<div class="form-group col-sm-2 col-xs-12">
<label for="exampleInputnumber"> Select Time </label>
<select class="form_line_only form-control" name="dp_time[]" id="select_time">
<option selected> Full Day </option>
<option > Morning </option>
<option > After Noon </option>
<option > Evening </option>
<option > Night </option>
</select>
</div>
<div class="form-group col-sm-7 col-xs-12">
<label for="exampleInputnumber"> Please Select Place </label>
<!--<input type="text" name="dp_place[]" class="form-control form_line_only" id="select_place" placeholder="Please Select Place">-->
<input type="text" class="className form-control form_line_only" name="ex_name[]" id="ex_name" placeholder="Enter Add Excursion">
</div>
<span class="input-group-btn day_plan pull-left">
<button class="btn btn-success btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button>
</span> </div>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another Day Plan)</small> </div>
</div>
</div>
<!--/.Day Plan-->
</div>
</div>
JavaScript:
$(function()
{
$("body").on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls_day_plan:first'),
currentEntry = $(this).parents('.entry_day_plan:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry_day_plan:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry_day_plan:first').remove();
e.preventDefault();
return false;
});
});
Whenever I submit this form it only give me first input value.
PHP Code
$my = $_REQUEST['dp_day'];
print_r($my);
But the output is only first input value. What am I doing wrong?
Because on load input field value get but clone field value cant get.
The reason why you are only getting one value from your form is because you are only requesting one value from your form.
$my = $_REQUEST['dp_day'];
Here you are requesting a single object from the form. Basically all you are asking the form for is the value ofdp_day but that is it. If you want to get more variables from the form you would have to request make another request.
For example if you wanted dp_time you would have to make another request for it like so:
$time = $_REQUEST['dp_time'];