Hide/Unhide DIV with JQuery - javascript

I'm pulling the variables from a database and the values could either be Manual or Automatic. Users can also use a dropdown to change the values.
If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.
What I have currently only unhides if it was Automatic and user selects Manual.
Here is a JSFiddle: http://jsfiddle.net/DTcHh/5031/
Any help would be appreciated.
Thanks!
HTML:
<form class="form-horizontal" method="post">
<div class="form-group">
<label class="col-md-5 control-label" for="method">Method:</label>
<div class="col-md-6">
<select id="method" name="method" class="form-control">
<option value="Automatic">Automatic</option>
<option value="Manual">Manual</option>
</select>
</div>
</div>
<div id="manual" class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">
Manual
</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-5 control-label" for="activitycomplete">Activity Complete:</label>
<div class="col-md-6">
<select id="activitycomplete" name="activitycomplete" class="form-control">
<option value="False">False</option>
<option value="True">True</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" data-dismiss="modal" class="btn btn-default">Back</button>
</div>
</form>
JQuery:
$(document).ready(function () {
$('#method').change(function () {
$('#manual').toggle(500);
});
//$("#method").val('Manual');
});

There's no logic in the code which actually checks the value. Basically, this rule isn't implemented:
If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.
The code is assuming that the initial value is always "Automatic" and that there will always ever be a one-way-or-the-other switch between the two values. This assumption is incorrect.
Instead of assuming the value and just toggling, explicitly show/hide based on the inspected value:
$('#method').change(function () {
if ($(this).val() == 'Manual') {
$('#manual').show(500);
} else {
$('#manual').hide(500);
}
});
Which you can extract into a function so it can be invoked manually as well:
var toggleDiv = function () {
if ($('#method').val() == 'Manual') {
$('#manual').show(500);
} else {
$('#manual').hide(500);
}
}
$('#method').change(toggleDiv);
Then you can invoke it when the page first loads as well:
$("#method").val('Manual');
toggleDiv();
Example here.

You'll want to check the value of the dropdox and on page load if it is manual run the toggle function:
$(document).ready(function () {
$('#method').change(function () {
$('#manual').toggle(500);
});
var valueOfDropDown = $('#method').val();
if(valueOfDropDown === "Manual"){
$('#manual').toggle(500);
}
});
This will obviously show the box on once the dom is ready.

Related

How can I pass the value from drop down list as a link for button?

I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:
Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can't see a way to do that. Currently this is a search bar code:
<h4 class="left">
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by State Name:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>
</h4>
So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!
You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form's action.
document.getElementById('search-by').addEventListener('change', function(e) {
let searchBy = this.value;
console.log(searchBy);
this.form.action = `/events/${searchBy}`;
});
<form ui-jp="parsley" th:action="#{/events/showByState}" th:object="${myState}" method="get">
<div class="row m-b">
<div class="child">Search by
<select id="search-by">
<option value="showByState">State Name</option>
<option value="showByPopulation">Population</option>
<option value="showByCapital">Capital</option>
</select>:</div>
<div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
<div class="child box-3">
<button class="btn">Search!</button>
</div>
</div>
</form>

how to separate and display select option data?

I have two forms. form1's content is a choice option filled by name, matricule, and salary, and a button validate, which hides form1 and displays form2. I want when I click on the button, the contents of select to separate and show like this:
name:
registration number :
salary :
$(document).ready(function() {
$("#hide").click(function() {
let name1 = $('#name').text();
let matricule1 = $('#matricule').text();
let salary1 = $('#salary').text();
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option>
<div id="name">imad</div>
<div id="matricule">22</div>
<div id="salary">6000</div>
</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>
As Rory said, you cannot have HTML within an option element, this is invalid. Use a custom drop-down select library (some examples of such are here: https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/)
Now, if you know the format of the data you are using to populate the select option values with (you are getting data from server side, etc.), you could then format the data on the client side with some sort of separator to create a chained together option value for the 3 different fields, like I've done in the example below using a dash (-). You could then split the string value of the option selected, and parse it out to individual text fields. Again, this is all dependent on how you get and format the data within the select element.
$(document).ready(function() {
$("#hide").click(function() {
let selectOption = $('.form-control').val();
let optionSplits = selectOption.split('-');
let name1 = optionSplits[0];
let matricule1 = optionSplits[1];
let salary1 = optionSplits[2];
$('#nam').text(name1);
$('#mat').text(matricule1);
$('#sal').text(salary1);
$("#form1").hide();
$("#form2").show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form1">
<div class="form-group col-md-3">
<select class="form-control">
<option value="imad-22-6000">imad 22 6000</option>
<option value="gupta-24-8000">gupta 24 8000</option>
<option value="ganesh-27-5000">ganesh 27 5000</option>
</select>
</div>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success " id="hide">valider</button>
</div>
</div>
<!--form 2-->
<div id="form2">
<h4>name : <span id="nam"></span></h4>
<h4>matricule : <span id="mat"></span></h4>
<h4>salary : <span id="sal"></span></h4>
</div>

want to disable a dropdown list on page load and enable it on button click event in HTML

I want to disable a dropdown list on page load and enable it on button click event using JQuery. I have tried the below code but its not working. What is happening is it is disabling the list on page load, then enabling the list on button click event for one second and then again disabling the list.
$(document).ready(function () {
debugger;
if (jQuery('#btnViewHistoricData').data('clicked')) {
$("#ddlBranch").prop("disabled", false);
} else {
$("#ddlBranch").prop("disabled", true);
}
});
<div class="text-center">
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button>
</div>
<div class="col-md-3">
<div class="form-group m-r-sm">
<label for='rf_name'>Branch</label>
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>
When you click the button you will do a form post, causing the document to reload and the dropdownlist to be set to disabled.
So make the button of type=button
<button id="btnViewHistoricData" class="btn bg-dark" type="button">View Historic Data</button>
Now when the button is clicked there will be no form post so the DropDownList can be enabled.
<script type="text/javascript">
$(document).ready(function () {
$("#ddlBranch").prop("disabled", "disabled");
$("#btnViewHistoricData").click(function () {
$("#ddlBranch").removeAttr("disabled");
});
});
</script>
Try this code.
$(document).ready(function () {
$("#btnViewHistoricData").click(function(){
$("#ddlBranch").removeAttr("disabled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center">
<button id="btnViewHistoricData" class="btn bg-dark">View Historic Data</button>
</div>
<div class="col-md-3">
<div class="form-group m-r-sm">
<label for='rf_name'>Branch</label>
<select id="ddlBranch" class="m-b-sm w-lg form-control" onchange="ViewHistoricData()" disabled="disabled">
<option value="ALL" selected="selected">ALL</option>
</select>
</div>
$(document).ready(function () {
debugger;
if (jQuery('#btnViewHistoricData').on('clicked')) { // Use `on` instead
$("#ddlBranch").prop("disabled", false);
} else {
$("#ddlBranch").removeAttr("disabled");
}
});

close modal only if all input fields are entered

I have this plunker to show my issue.
Once user clicks on "Open Modal" a modal opens up showing input fields. If user enters on all the 3 input fields, it should close the modal. This works fine.
Now, if user forgets to mention any one of the field, it gives a alert message showing us to enter values to the fields... After this message, the modal should remain open. in my case, it closes after showing the alert.
I tried to remove the hide function from here
ng-click="$hide();adduser()"
So instead of the above, i tried this
ng-click="adduser()"
This solves the problem. i.e. it gives an alert when one of the fields are missing. But the other issue comes up which was working in the first scenario.
after user enters all the 3 values and clicks 'add' the modal doesnt close. since i have removed hide() functionality from ng-click.
Can someone tell me how to get both the cases possible and working.
You can simply add validations to your form and then you can disable the button to prevent user click on button without fill all fields, like this:
ng-disabled="form.$invalid"
So you can have something like this in your modal:
<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind-html="title"></h4></div>
<div class="modal-body">
<form novalidate name="form">
<div class="form-group">
Select Sedol:
<input name="select1" type="text" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead required>
</div>
<div class="form-group">
RestrName:
<select name="select2" id="restrName" ng-model="selectedOption" ng-change="set_value(selectedOption)" required>
<option value="sedol">sedol</option>
<option value="cusip">cusip</option>
</select>
</div>
<div class="form-group">
RestrType:
<select name="select3" id="restrType" ng-model="selectedOption1" ng-change="set_value1(selectedOption1)" required>
<option value="NoBuy">NoBuy</option>
<option value="NoSell">NoSell</option>
<option value="NoHold">NoHold</option>
<option value="NoTrade">NoTrade</option>
<option value="NoincExp">NoincExp</option>
<option value="NoDecExp">NoDecExp</option>
<option value="NoHoldLong">NoHoldLong</option>
<option value="NoHoldShort">NoHoldShort</option>
<option value="NoCoverBuy">NoCoverBuy</option>
<option value="NoSellShort">NoSellShort</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-disabled="form.$invalid" ng-click="$hide();adduser()">Add</button>
</div>
</div>
</div>
</div>
DEMO
Well, if you want to hide your modal, something has to trigger it. I'm not sure how to do it properly from your controller right now, you could use jquery to hide it from inside addUser() method.
A cleaner solution imo is to use https://angular-ui.github.io/bootstrap/#/modal
then you can programmatically close it (and more) in a nicer way.
You should be using your controller to manage the lifecycle of the modal. I have created a new plunker that shows you how to do this:
http://plnkr.co/edit/k0yDjAcUbRhUtm1vQ2Ck?p=preview
$scope.detailsModal = $modal({
scope: $scope,
title: 'Enter details',
html: true,
show: false,
templateUrl: 'modal/docs/modal.demo.tpl.html'
});
$scope.showModal = function() {
$scope.detailsModal.show();
}
$scope.adduser = function() {
if ($scope.selectedState && $scope.selectedOption && $scope.selectedOption1) {
$scope.detailsModal.hide();
}
else {
window.alert('please select all required fields');
}
}

Model window form doesn't reset the values of "$pristine" while destroy

I am designing a angularjs form in Model window, I have set validations of this like $pristine for detecting the changes of form. My problem is: If I make any change in the form field and destroy the model window form. When I open it again, then the previous changes are shown, like "$pristine" values are not set default. I search more about it on Google but no any solution.
Some part of my code is:
<div id="new-contact" class="modal" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog" style="width: 80%;">
<form data-editable-form="editable-form" name="contactForm" autocomplete="off" id='contactForm' role='data-editable-form' method="post" novalidate>
<fieldset>
<div class=" col-xs-12" ng-class="{'has-error' : contactForm.contacts_type.$invalid && !contactForm.contacts_type.$pristine }">
<label for="form-field-select-1" style="width: 250px;">
<msg key="contacttype" />
</label>
<label>
<select class="form-control" name="contacts_type" style="border-color: #d5d5d5 !important;" id="form-field-select-tag-type" required data-ng-model="contactContent.type">
<option value="" style="display: none;">{{'selectcontacttype'|localize}}</option>
<option value="BC">{{'businesscontact'|localize}}</option>
<option value="PC">{{'personalcontact'|localize}}</option>
</select>
</label>
</div>
</fieldset>
</form>
</div>
I use Show/Hide this window:
$("#new-contact").modal('show');
$("#new-contact").modal('hide');
I am also trying to use of $route. reload (); with the hide on their controller, but no any success.
Anyone please Help me how can do this..
Remember to also reset the FORM (contactform).
$('#contactForm').trigger('reset');
It's where the data is actually coming from.
Did you try with hidden.bs.modal event
<script>
$(document).ready(function() {
$('#new-contact').on('hidden.bs.modal', function () {
$(':input','#contactForm').val("");
});
});
</script>

Categories

Resources