Please see this: http://jsfiddle.net/uNbYu/1/
If you click submit, the button doesn't do anything, but simply hides the text box and only works the second time.
How can I find a way to fix this problem without removing the .hide() in the JS?? As I really need that.
Thanks
EDIT: The text box should be made hidden when the text input is clicked out of
The reason the button doesn't seem to do anything the first time you click it is because you aren't actually clicking it. The blur event on the input field fires first, causing the field to disappear. The result is that your click does not actually land on the button!
See this updated fiddle: http://jsfiddle.net/uNbYu/10/
In this example, I'm binding the hiding of the input field to the click of the submit button.
I'm not sure if this fully solves your problem. I'm not 100% sure of what you're trying to achieve, but hopefully this helps.
Your blur() function is actually being called when you click the button, which moves the button and missing the click event.
You can see this if you don't click the button, but instead click outside the form input, then click the button. It works.
Related
So, I've got this input of type checkbox for a dropdown menu on the top.
When I click on it and select something, for some reason clicking the spacebar toggles it on/off...clicking once elsewhere doesn't fix it either, I have to click outside twice.
I don't quite understand why I have to click twice outside, but regardless, I want to know how I can stop this from happening. I suppose I have to do something with focus...but I can't seem to understand it properly - nor do I know if that is indeed the problem.
If you don't need the spacebar for your any button on the form, you can do an event.preventDefault() on keypress for the spacebar.
I'm using ngx-chips to create a tag input for Angular 8. I got it all to work but I would like for my input to show the dropdown whenever I focus on the tag. Currently it only shows the dropdown when I focus on the input part, which is pretty small:
I want the dropdown to show when I click anywhere on the form, like this:
Is this behavior possible? I also noticed that pressing Enter can show the dropdown, but trying to trigger that behavior on click isn't really working out.
I tried altering the CSS itself by increasing the input width, but it looks and feels weird to use. So instead, I created a workaround with jQuery.
I just created a function for the component that uses ngx-chips, and used some jQuery inside that function
showDropdown() {
$('.ng2-tag-input__text-input').click();
}
Since the dropdown appears when focusing on the tag input field, what this snippet does is exactly that, but I used this function on an outer div, so that it would seem like when you click on the whole form, the dropdown would still appear.
Hope this would help someone else as well.
I have one question.
I tried to find the solution on Google, but couldn't find the best solution.
For example, one page(first) has one button, another page(second) has button and text.
at the initial status, in the second page, when i click the button, the text will be shown and hidden.
at the first, text was hidden.
and when i click the button at the first page, it goes to the second page.
in this case, i'd like to open the text when i click the button at the first page.
For this, i need to change the css property of second text element (show) using jquery.
How can i implement this?
please give me any suggestions.
Thanks.
I'm trying to scrape my university's student website page for my grades and schedule.
I can login fine and I get to this point here but this dropdown is giving me so many issues. The way it works normally is the user selects an item in the dropdown, then presses a button next to it to submit.
Now, I've tried setting it by doing this:
document.getElementById(selectId).value = valueIWant
and
document.getElementById(selectId).selectedIndex = indexIWant
which both work, they change the value that is displayed in the select element, however, if I click the button next to it now, or call a click() on the button, it just resets to it's original value and doesn't load the page I want. But if I select the value with my mouse everything works fine... I don't get it, and I don't know what I'm doing wrong.
Has anyone come across something like this before? I appreciate any help you guys can provide :)
All I had to do was add a mySelect.onchange() before calling the button click.
I made a form somewhere on an HTML page, but made its visibility hidden so that it wouldn't appear immediately. I wanted to activate it through a button click, but then appear at where the button was clicked, so I set the "innerHTML" of the button div to that of the hidden form. The form appears, but it won't allow me to enter any data into the fields (I'm assuming due to it being hidden somewhere else) so I'm wondering if there is a way around this? Or a better alternative?
Thanks
Replace the button with the form altogether. With jQuery, you could use replaceWith():
$('#button').replaceWith($('#form').show());