I tried With fieldset but its disabling only input field and remaining dropdown are not disabled . Is there any solution for my question ??
Problem
What I think you're trying to do is to place a condition on a div, and when that condition is true, you want to disable the div and all child elements.
You can mark a div as disabled using ng-disabled like this:
<div ng-disabled="expression">
<input type="text"> <!-- Won't be disabled! -->
<select> <!-- Also won't be disabled! -->
<option value="1">option 1</option>
</select>
</div>
However, that does not propagate to child elements.
See the doco for ng-disabled here: https://docs.angularjs.org/api/ng/directive/ngDisabled
Solution
You will have to add the ng-disabled attribute to each child element in the div you want disabled.
<div>
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Extra
Keeping the ng-disabled attribute on the div is not required to disable the child elements, however it can be used as a useful css selector.
For example, maybe you want to set the opacity for the whole div when it is disabled.
<div class="special-div" ng-disabled="expression">
<input type="text" ng-disabled="expression">
<select ng-disabled="expression">
<option value="1">option 1</option>
</select>
</div>
Using this css
div.special-div[disabled] {
opacity: 0.5;
}
Try this:
document.getElementById("yourDivID").style.pointerEvents = "none";
For Example :
<div id="myDiv">
<h1>This is my division</h1>
</div>
Then code will be as below :
document.getElementById("myDiv").style.pointerEvents = "none";
Related
I have been trying to implement a dropdown list in HTML. The dropdown is shown but the options inside the dropdown are not shown once selected.After selection, the box remains empty.
Following is the code -
<form action="evaluate">
<select name="places">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br><br>
<input type="submit" class="w3-button w3-red w3-margin-top" value="Submit">
</form>
evaluate is a servlet. I have to select an option from the dropdown. Then after clicking the submit button the data should go to the servlet named evaluate.
You have an extra double quote! <select name="places" "> should <select name="places"> and it works. See the following working link https://jsfiddle.net/xrvmjLpm/
The problem I was facing was with the css files I was using. So, I had to change the class and do a little bit of styling as follows.
<div id ="drop" class="w3-content"">
<style>
#drop
{
background-color:black;
padding:0.9em;
}
</style><!-- code for dropdown menu--> </div>
Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.
So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
What I need now is something that sets the value according to the menu selection, matched up something like this:
Blue = 9999
Red = 8888
Yellow = 7777
I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.
You should put the value assignment in the option elements, as they were designed for just that:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.
See it in action:
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
<input id="ancestor" type="text" />
I have a bootstrap v3 inline form:
<div id="searchsection" hidden>
<form id="searchform" class="form-inline" role="form">
<label>Find:</label>
<select id="field" class="form-control">
<optgroup label="Strings">
<option value="authors" selected="selected">Authors</option>
<option value="title">Title</option>
<option value="pub">Publication Name</option>
<option value="keywords">Keywords</option>
<option value="physloc">Physical Location</option>
<option value="comment">Comment</option>
</optgroup>
<optgroup label="Dates">
<option value="datepub">Publication Date</option>
<option value="dateread">Date Read</option>
</optgroup>
</select>
<input type="text" id="narrowon1" class="form-control"/>
<label for="narrowon2" class="form-control"></label>
<input type="text" id="narrowon2" class="form-control" placeholder="YYYYMM" hidden/>
<input type="button" id="narrower" name="narrower" value="Narrow" class="form-control btn btn-primary"/>
<input type="button" id="widener" name="widener" value="Widen" class="form-control btn btn-primary"/>
</form>
</div> <!-- end of searchsection -->
I would like to reduce the width of the boxes narrowon1 and narrowon2 when the optgroup is Dates so that they would only hold six digits each; I am thinking of setting size="6". However, when I simply add those attributes in jQuery via a statement such as
$('#narrowon1').attr('size',"6");
they don't affect the rendered output. I expect the Bootstrap classes are overriding my additions.
What is a "Bootstrap-friendly" way to alter the sizes of these input boxes?
The maxlength attribute will not be affected by any CSS applied to the <input>. How are you applying it in javascript as you can't limit the character length with CSS?
I think you might be mistaking the maxlength attribute with the actual width of the <input>. Here is a some info on the attribute: Maxlength Attribute
View the log and make sure your <input> looks like this:
<input maxlength="6" name="someInput" />
Edit:
Place a class of your own on the input and place new styles on the <input>. Make sure your local CSS file loads after the bootstrap CSS. Than you can easily override it.
If you can't create a new CSS file, try $('input').css('width', '200px'); with jQuery
You'll need to wrap each input field inside a div with the class of col-sm-2
you can change the number with which ever you like.
You can customise Bootstrap styles by overriding them with your own CSS.
See the Customizing section on the Bootstrap website for information on how it's done:
http://getbootstrap.com/getting-started/#customizing
I need to make 'read-only div' using with CSS or JavaScript or Jquery. Not only text-box and all. Full div. That div contain anything(image, ,other div,text-box,...)
That should support by all Browser.
Any idea?
You could use pointer-events: none; to disable mouse DOM interaction (like click, hover, etc) on certain element. Example:
div {
pointer-events: none;
}
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
However, even though pointer-events: none; is there, it's still possible to make the cursor to be focus on the element (or it's children). Meaning if we move the cursor focus on the <input /> tag, then it's possible to edit the value.
Example: try to click the <input /> tag, then press tab in keyboard, the cursor focus will be on input, making it editable.
To make <input /> tag completely un-editable, put readonly attribute on the tag. Below is simple example to do it by using jQuery .prop(). You can also put the attribute directly on the tag, depending on the needs.
$("input, textarea").prop("readonly", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" value="value" />
<br />
<textarea>value</textarea>
</div>
You can't do this with CSS unfortunately, you're after the readonly attribute on HTML elements. You can pretty easily accomplish what you want using JavaScript, here's an example with jQuery.
jsFiddle
HTML
<div class="readonly">
<input type="text" />
<div><input type="checkbox" /> Blah</div>
<textarea>abc</textarea>
</div>
JavaScript
$(document).ready(function() {
$('.readonly').find('input, textarea, select').attr('readonly', 'readonly');
});
I am afraid, you can't control elements behavior with CSS.
CSS stands for Cascading Style Sheets - it's only for styling elements.
But you can use JavaScript.
Untested jQuery example above:
$('#myDiv').children().attr('readonly', true);
Just Try With The Following :
Script Part :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#previewDiv :input").attr("disabled", true);
});
</script>
HTML Part :
<div id="previewDiv">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="text" name="test" value="test">
</div>
I think this may help you to resolve your problem.
$("div").prop("readonly", true);
<div>
<input type="text" value="value" /> <br />
<textarea>value</textarea>
</div>
$('div *').prop('disabled',true);
I have a php page with 4 text boxes, each need a "drop down" when the text boxes have the focus. Clicking the options would populate the (editable) text box(es) and close the drop down. The text boxes are of course part of html forms. How can I do this inline with javascript or ajax using minimal code?
Unless you are calling a webserver ajax is useless here.
You will need to have or create a div, since it is below your input box, and absolute positioning will be useful to ensure it is appropriately placed relative to the input box.
You should only have one function, so it should be adaptable to the input fields, hence the reason for absolute positioning.
You will want to track the keypress and mouseclick events in this div, and ensure that only one is open at a time, so have an onblur so that if the user clicks anywhere else the div closes.
if you use jquery you can do this extremely easily.
you could tweak this to your liking:
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
if your select options need to be dynamic, ajax is very simple with jquery. if you already know what's going to be in there, have the php populate the hidden select boxes, and the focus event will show them.