I am a newbie learning web development. I am trying to create a simple form with two dropdowns. Based on first drop down second dropn down should be visible.
But it is not working :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="container">
<div class="box">
<form>
<div class="ccms_form_element cfdiv_custom">
<div class="col-md-4">
<label for="inputType">Input Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="inputType" required name="inputType" style="width:500px" onChange="ChangeDropdowns();">
<option value="">Select Type : Type Of You Want to Process</option>
<option value="text">Text </option>
<option value="genome">Numbers</option>
<option value="chacha">Special Characters</option>
</select>
</div>
</div>
</div>
<div class="style-sub-1" id="dataType" style="display: none;" >
<div class="col-md-4">
<label for="inputType">Data Type</label></div>
<div class="col-md-8" style="font-size:16pt;">
<select id="data" required name="data" style="width:500px">
<option value="">Select Data Source : Where is your Data?</option>
<option value="text">Data is already in Server</option>
<option value="genome">Need to Upload the File</option>
</select>
</div>
</div>
<div class="row">
<script>
function ChangeDropdowns() {
$(".style-sub-1").show();
}
</script>
</body>
</html>
Can someone tell me what I am doing wrong here ?
It looks like you are trying to use jquery (the $ in your javascript code).
However, you haven't specified the jquery script in your html.
Try adding this
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
In between the head blocks
Use the following, using JQuery to detect the change in first select - and include JQuery as Scott said
$( document ).ready(function() {
$("#inputType").on('change', function (){
$(".style-sub-1").show();
});
});
Related
I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
In my Laravel app, I have a form to select multiple options. However, I don't want to select multiple options by pressing CTRL and then selecting them. I just want to be able simply click on the options and they should be selected. And, if I click on a selected option again, then it should be de-selected.
How can I achieve this task?
Here is an example of my select options list.
<div class="form-group row">
<label class="col-form-label" for="selectednames[]">Select Name</label>
</div>
<div class="form-group row">
<select multiple name="selectednames[]">
<option value="1">John</option>
<option value="2">Sam</option>
<option value="3">Max</option>
<option value="4">Shawn</option>
</select>
P.S: I am using bootstrap and jquery in my application.
simply use checkbox type as input instead of option, like that:
<div class="form-check">
<input type="checkbox" name="selectednames[]" value = "1" />
<input type="checkbox" name="selectednames[]" value = "2" />
<input type="checkbox" name="selectednames[]" value = "3" />
<input type="checkbox" name="selectednames[]" value = "4" />
</div>
I think you want somethings like this :
$('select[multiple]').multiselect()
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
</head>
<body>
<select multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>
I want to set scroll function on select box so that whenever i scroll , an alert will be there . i am not able to set that .scroll function of jquery on select. Please tell me how to set it. May be i am doing some mistake in my code.
Code:
<div class="dropdown col-xs-4">
<input list="d1" id="search" name="d1" class="form-control input-xs" placeholder="Search by">
<!-- <datalist id="d1"> -->
<select id="d1">
{{#each data1}}
<option class="form-control" > {{TradeName}} </option>
{{/each}}
</select>
<!-- </datalist> -->
</div>
Js file:
$( "#d1" ).scroll(function() {
console.log("Scrolling");
});
document.getElementById("d1").addEventListener("scroll", scroll);
function scroll() {
document.getElementById("demo").innerHTML = "Scrolled";
}
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<select id="d1" onmousedown="if(this.options.length>5){this.size=5;}" >
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
<option>f</option>
<option>g</option>
<option>h</option>
</select>
</div>
<p id="demo"></p>
</body>
</html>
I just edited the code. As work around you can try this. The text will get display when you do scroll down. This is not such a good approach but for the time being you can use this.
on page init I have following render of combobox element
<div class="combobox-container">
<input type="hidden" name="MySelection" value="">
<div class="input-group">
<input class="combobox form-control" type="text" autocomplete="off" placeholder="Select">
<ul class="typeahead typeahead-long dropdown-menu">
<li class="" data-value="val1">
<li class="active" data-value="val2">
<li data-value="val3">
<li data-value="val4">
<li data-value="val5">
</ul>
<span class="input-group-addon dropdown-toggle" data-dropdown="dropdown">
<span class="caret"></span>
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
which renders combo like
after I select option from this combo I'm geting rendered like
now after certain users action I'm resetting combo box on it's default state so I use following code
$('#MySelection').val(undefined);
this actually change value as I expected but ui elemenent stays intact, it appears
and I want to appear as
I tried with $('#MySelection').data('combobox').refresh();
but that doesn't helped.
Update:
As someone suggested I tried with moving $('#MySelection').data('combobox').refresh();
at the end of the file since I'm getting error inside firebug
TypeError: $(...).data(...) is undefined').data('combobox').refresh();
but it doesnt help. I try even to put at the of the _Layout.cshtml file after all jquery init files but also without any progress.
UPDATED: try this:
bootstrap-combobox:
$('#MySelection').val('');
$('#MySelection').data('combobox','refresh');
$(document).ready(function(){
$('.combobox').combobox()
$("#reset").on("click",function(){
$('.combobox').val('');
$('.combobox').data('combobox','refresh');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://formvalidation.io/vendor/bootstrap-combobox/js/bootstrap-combobox.js" type="text/javascript"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://formvalidation.io/vendor/bootstrap-combobox/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Vertical Form</h1>
<div class="form-group">
<label>Turns this</label>
<select class="combobox input-large form-control">
<option value="">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
</select>
</div>
<button id="reset">Reset</button>
This works for me:
$('#MySelection').val('');
$('#MySelection').data("combobox").clearElement();
$('#MySelection').data('combobox').refresh();
Use Below Code to set selected index 0
$('#MySelection').prop('selectedindex',0);
Your element <input type="hidden" name="MySelection" value="">has the name MySelection.
With your $('#MySelection').val(undefined); you're trying to call it by it's ID (not name).
Try $('input[name=MySelection]') instead.
After much searching, I found #mikeblum's solution to work for me.
$('#element').data('combobox').clearTarget();
$('#element').data('combobox').clearElement();
How can we remove some styles of Jquery Chosen using Jquery or javascript. I want to remove 'top : 100%' attribute from 'chosen-drop' class. I tried $('.ddlDpndtRsrc').find('.chosen-container .chosen-drop').css('top',''); but it is not working.
<div class="controlsDiv ddlDpndtRsrc">
<select data-placeholder="Select" id="ddlDependentResource" name="dependent_resource" data-col="DependentResource" class="infoInput chsnddl" style="display: none;">
<option value="-1"></option>
<option value="3">Business visa</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 90%;" title="" id="ddlDependentResource_chosen"><a class="chosen-single chosen-default" tabindex="-1"><span>Select</span><div><b></b></div></a>
<div class="chosen-drop" style="top: 0px;">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" style="" data-option-array-index="1">Business visa</li>
</ul>
</div>
</div>
</div>
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ddlDpndtRsrc">
<div class="chosen-container chosen-drop">
Dummy text
</div>
</div>
</body>
</html>
JAVASCRIPT
var element = $('.ddlDpndtRsrc').find('.chosen-container.chosen-drop');
element.css({
'top' : '0%'
});
http://jsbin.com/niyadi/3/watch
After making your HTML post above readable, what you have provided should work, ensure .chosen-container .chosen-drop doesn't already have !important overriding the top value.
It may be a good idea to get used to replacing <b> with <strong> also :)