I have a standard html drop down box.
I want to run js code after the user selected an item without a separate submit button.
Onchange event does not fire when the user selects the 1st item (actually the previously selected item) in the select box.
How can I make the combo box react to the click even if the previously selected item is clicked?
Notes:
1. I don't want to add 'select from here' or something similar to the select box.
2. the onclick event does not help since it fires also on the 1st click the user does to open the options before actually selecting one.
I don't think this can't be done. onchange, as you correctly point out, doesn't work. onmouseup fires too early.
I think onblur would do the trick but it will also fire when the user tabs through the available elements.
If you really need this to work reliably, consider using a JavaScript based replacement widget like this one. They enable you to work around the notorious lack of flexibility that standard form elements unfortunately have.
Oh and by the way, the <select> element is not a combo box, it's a drop-down.
:)
You can use the onclick event but at the same time count the number of clicks.
<script type="text/javascript">
var count = 0;
function selectClicked(sel){
count++;
if (count == 2){
//the user has selected something
//so go ahead and handle it
count = 0;
}
}
</script>
What if you added the "onclick" event to the individual "option" elements rather than the "select" element?
Related
I have two buttons - Company Email and Non Company Email.
If i select the first , ng-click="flag='Y'" and the second one renders the flag value as 'N'
So now I am trying to disable them when they are selected so user is not allowed to click on the second time, the second click is creating some UI issues which I want to avoid here.
But the ng-disabled is not working at all as expected, it disables from the outlook but we can still click the button and it behaves strangely.
Pleas help-
Code block is added in comments
This seems like a simple enough issue where you would disabled the buttons using a scope variable set once a button is clicked.
<button ng-disabled="flag=='Y'" ng-click="doCompany()">Company Email</button>
Here is an example
I want to receive separate click events from separate lines in a text field, and every time a certain line is clicked by the user, I would like to highlight it and have an event happen.
I would ideally like this to happen with dynamic text, and not have to break the text apart by hand. Using the htmlText property is an option, but I am unsure as to how to bind clickEvents to separate elements.
Where do I begin?
There is no ready to use solution for this. But you can make it yourself using a few things:
set CLICK listener for the whole text field
listen for click and check the caretIndex property
use getLineIndexOfChar to check what's the line of the current caret position
use getLineOffset and getLineLength to get the position of the first and last character of that line
use setSelection to highlight this line
There might be some faster and easier way, but this is what works for sure :)
EDIT: decided to post the solution code, as I was wondering how exactly it works.. and it would be a shame to just leave it unpublished and make you do it instead :)
field.addEventListener(MouseEvent.CLICK, onTfClicked);
function onTfClicked(e:MouseEvent):void {
trace (field.caretIndex);
var line:uint = field.getLineIndexOfChar(field.caretIndex);
var start:uint = field.getLineOffset(line);
var end:uint = start + field.getLineLength(line);
field.setSelection(start, end);
}
I have a table that lists items. I have a form tag that surrounds this table. In this table I have ADD buttons that adds new rows to the database. I have EDIT buttons that edits a row as well. The form posts to the same action on the controller.
Now I need to add a filter row on the first which means I need to add a Filter button to submit the form with the filter parameters. Since this is still inside the main form, I now have the following problem: When I click the Filter button, the inputs that are used for the ADD button are being validated before anything gets posted. How can I prevent the validation from occurring when the user clicks the Filter button?
Make sure the Filter button is of type "button" not "submit" and do filter using ajax
As i see it, the easy way would be to fire the submit via js with:
.submit();
The other way would be to disable validation on that form with this:
$('#form').validate({
onsubmit : false
});
or
$('#form').unbind('submit')
I have one suggestion. Name Add button inputs differently and add row using javascript/ajax. When posting, Add button inputs will not be validated because they have different names
I have a simple HTML page with an Unordered list. Is it possible to have an input field where you could add more to the list and it would be saved after you submitted it. What I would like to add would be the content inside of an <li> tag as well as the <li> tags themselves.
Thanks,
Here is a jsfiddle with a demo of what I think you want to achieve: http://jsfiddle.net/mvJNq/25/
Note that I can not answer as to how you should do this on the server, as that depends on how your serverside code, database etc is set up. However, if all you want is to display it as HTML and not have it saved as the user navigates away, you won't need the Submit button at all - then you just need the "Add" functionality.
Yes, it is possible - no, it will not be pretty. Here is what you would do:
create your base form with any default list items/inputs
use jQuery/JavaScript to bind an event handler to a button that you click when you want to add another item (alternatively, you could skip this step and just have another item appear by default)
on your event (be it checking that all input boxes have user-entered text, or the click event in step two) add another list item using jQuery.append(...)
ensure that you have a hidden input field to be used as a "counter" to keep track of the total number of list items and increment the value of this counter each time you add a new list item (note: you may need to use the ParseInt() method, depending on how you design the code for this field)
the page that is receiving the form's inputs should first read the hidden field so that it knows how many items to add, and then you should loop through the items (for or while loop) to add them correctly
Note: I don't know what Server-Side language you are using to handle receiving the form so step 5 is a fairly generic and universally viable option
Sure, it's possible.
The complexity of this comes in when you want to "save" the items. If the user leaves the page and comes back later will that data be available? If so, you will need a database like mySQL or similar. The li tags can be stored as well, but why?
If you just need that information available in that session you can store in a JavaScript variable and have it loop through the variable and spit them out as <li>'s
If you did want to use an add button instead of submit:
$('#addButton').click(function(){
var savedContent = $('#input').val();
}
To create + insert the <li>you can use javascript to create the element and append it to the ul. If you have more than one ul change the index:
var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
I want to create a drop-down box with grouped items. It is for a database lookup HTML form that I am working with. Is there a way that I can select the group title, resulting in selection of all items in that particular group? For example, if the group title is 'German Cars' and has the items 'Mercedes' and 'Audi', on clicking 'German Cars', both German car companies should get selected.
If you give your opt-groups a class you can select the class then access its children.
$('.german-cars').children();
If that's unavailable the alternative is a little slow. When you loop through all the optgroups and compare their text individually then grab that ones children.
edit: Fix selector.
And elaborating:
Then to select them on click you'd use:
$('.german-cars').click(function(e) {
e.preventDefault();
$(this).children().attr('selected', 'selected');
});
Assuming the element is set to multiple selection. Otherwise only the last car in the list would get selected.
EDIT 2
Fiddle: http://jsfiddle.net/mbChZ/25/
These changes should work the way you're looking for.
$(function() {
$('select optgroup').mousedown(function(e) {
e.preventDefault();
if ($(this).children(':selected').length == $(this).children().length) {
$(this).children().attr('selected', null);
} else {
$(this).children().attr('selected', 'selected');
}
});
$('select option').mousedown(function(e) {
e.stopPropagation();
e.preventDefault();
$(this).attr('selected', ($(this).is(':selected'))? null : 'selected');
});
});
I've changed the events to mousedown so we can see the state of the elements before the browser has already handled the mousedown event. This allows us to check if they're all selected and if so deselect rather than select. And the same had to be done for the click event of the option so that it can prevent propagation on that event.
I'm not 100% sure of the browser compatability on this one though you may want to make sure it works in older IE's if you support them.
Not in any reliable way. The optgroup is just for grouping options, not for affecting functionality. But you could use a set of checkboxes instead of a select elements, and then you could have a checkbox for “German cars” and, e.g. indented below it, checkboxes for different German car models.
You could then deal with this in various ways. You could just handle the situation server-side, so that if “German cars” has been checked, the form handler acts as if each and every checkbox for a German car had been selected. Or you could additionally have a client-side handler for the “German cars” checkbox, so that checking it checks the individual checkboxes (but should it then uncheck them when unchecked)?