How to show certain texbox depending on which button is pressed? - javascript

I am working on a project in which I need to make an HTML page with couple of radio buttons.
First button is, INSERT. As soon as I click INSERT button, I would like to show three text box just below the INSERT button. First textbox is datacenter, second textbox is node and third textbox is data.
Second button is, UPDATE. As soon as I click UPDATE button, I would like to show same above three text box just below the UPDATE button.
Third button is, DELETE. As soon as I click DELETE button, I would like to show only one text box just below the DELETE button. In this one text box will be node.
Fourth button is, PROCESS. As soon as I click PROCESS button, I would like to show four text box just below the PROCESS button. In this first textbox will be datacenter, second textbox will be node, third textbox will be data and fourth textbox will be conf
And lasttly there will be submit button which I will be pressing.
I am able to come up with this design in the jsfiddle
Problem Statement:-
But somehow, few things are not working such as Submit button is not getting shown when I click Process button for the first time. Meaning for the first time, if you click Process button, then it shows only three textbox which is datacenter, node and data but in general it should show four textbox as shown above. And also submit button is not shown as well.
It will be of great help if anyone can provide jsfiddle example?
And also is there anything wrong I am doing in my jsfiddle which I should not be doing? Meaning instead of hiding the elements, I should delete them?
I am following up on previous question here. In my previous question, my design was something else but after that I was able to come up with my new design as shown in my jsfiddle above.

We talked about it some in a discussion and came up with http://jsfiddle.net/4Nmqk/12/
It's simpler to have forms for each type of submission, rather than trying to hide and show the right parts of the forms. Unless you have a method for abstracting the data (which sections to show ) from the logic ( how to show/unshow them ) it ends up being a mess, just like the OPs original Fiddle.
My fiddle creates a lot more html, but the javascript is as simple as:
$('.btn-primary').click( function(){
$( '.btn-primary').removeClass( 'currentButton' )
$( this).addClass('currentButton')
$( 'form' ).hide()
$( "#form_" + $(this).attr('id') ).show();
})
Also added a bit of cleanup, just for fun.
Of course the most sophisticated implementation of this would probably be heavily integrated into the server side code and be generated a lot more dynamically, but for the purposes of answering the question, this technique seems more straight forward and more capable (note how easy it is to add additional content, like the headers I added to each form. IT would be equally easy to add descriptive text, disparate form elements, etc).

Related

Accessible in-line modal?

When it comes to accessibility, what is the proper design pattern or technique for appending an inline panel that would have a header, body text, and optional close button?
For context, I've been tasked with creating an accessible multi-select quiz question that appends a correct or incorrect feedback panel under the question after the user presses submit. I think normally this sort of feedback would appear in a modal popup that covers the other content and traps focus, but this particular design needs the feedback panel to appear in the page directly under the submit button, and still allow the user the tab back through the answer options (even though they would be aria-disabled after submitting).
The feedback panel would have a title header, body text, and an optional close button. There would be no close button if the user got it all correct or they ran out of attempts.
Is there a suitable aria-role or known design pattern for this sort of appended panel? And what should I send focus to once the feedback panel appears, the header? The close button?
In case its relevant, for the multiselect answer options I am using native checkboxes with <label>s
Option 1
The first would be to add role="alert" to the appended box (assuming you will only add it once per page as otherwise we would use aria-live).
This would then be announced to screen reader users.
Option 2
Option 2 is that you can just append the box to the page and use focus management. So the box appears and you would move focus to the heading of the box via JavaScript (with tabindex="-1" on the heading for example). This needs to happen from an expected action (so "submit answer" button that you said you have).
I would probably go with option 2 as it is the easiest way to not introduce more accessibility issues by mistake.
There are other ways you can achieve this with aria-live, aria-labelledby etc. etc. but the above two options are the most straight forward.

How do I use javascript in Acrobat?

I am creating an Acrobat file with multiple pages. Each page has a map and a list of names down the side. Each name is a button and I have JavaScript entered for each, so that when you hover the mouse over the button, the corresponding name shows up at it's location on the map (via a text field), and then when you move your cursor away from the button, the text field disappears.
Here is the code I have for MouseEnter:
this.getField("Kyle Deal").display = display.visible;
Here is the code I have for MouseExit:
this.getField("Kyle Deal").display = display.hidden;
It works great if you stay on one page, but my problem is, is that when you hover the mouse over the button and the name appears and you move to a new page, and then come back, the text field is still there because the MouseExit never actually triggered when you were on the page the first time, no matter where your cursor is now. This happens way more often than it sounds like it might, pretty much every time someone uses this document at all.
Does anyone have an idea of how I can go about resolving this issue whether it be by a bit of JavaScript that clears all functions when you move to a new page, or maybe I can edit the MouseEnter function to go away after a certain period of time, or some other method inside Acrobat's settings?
One approach would need some field renaming (to make things easier). You would set all relevant fields to hidden when leaving the page.
Now with hierarchical field names, where the fields on page 2, for example, would have a name "p2.xxx", your command in the pageOut event would be
this.getField("p2").display = display.hidden ;
and that would do it.
Otherwise, you would have to hide field by field in the pageOut event.

Adding text into a PDF button with 1 click using Javascript

I'm creating a staff document which requires only 2 things to be unlocked.
1. A placeholder for an image, I've implemented that just fine by creating a button with "Icon only" and using a javascript code as follows:
// Mouse Up script to import a button icon
event.target.buttonImportIcon();
It works perfectly!
However I also need a text field which can be clicked once, and have text filled in and saved, because quite frankly the people that will be using the document, couldn't edit a PDF if the human race depended on it haha
Any help would be appreciated greatly!!! Thanks!
Create a text field (which I'm assuming you will want to start off as empty) and then add the following command to activate on Mouse Down:
(this.getField("TextFieldName")).value = "The text that you want to add...";
Where TextFieldName is the reference to the text field that you want to auto fill.
This will make the text appear when the text field is clicked. You could add a clear button using similar code so that erroneous clicks can be undone. Also, you could set the field to be read only to prevent unwanted changes to the auto filled text.

Multiple dinamic forms that become a single one

Should be 4-5 forms that have some input types on each one ( like the second one has 3 select options where you can select your birthday).All of them are in a horizontal line .After completing one I can press the button "continue" and my current form go in background and the next one go in front( the current form is on spotlight) and the rest are in background.After I pressed continue the values of the form are shown on that form( like if I completed a text box and press continue,the text box with my data becomes an text on that form).In the last form are shown all the data from the previous 4/5 forms.
I can't use php,only basic js/css/html.
So how I can make that continue button and transport the data between forms?
You could use CSS3 to animate stuff in a browser. But my suggestion is to not use many of them, because many animations could lead to a laggy browser.
Here are some examples:
http://www.w3schools.com/howto/howto_css_animate_buttons.asp
Also the forms can be made invisible with css. If you use a bit of javascript you can trigger that event when a button is clicked.

Differentiating between nodes for receiving events in HTML using jQuery

I wanted a drop down to implement a particular input. But the inbuilt select didn't look good to me. So instead I tried implementing it with lists. I've had partial success with this. When I click on the text field the list gets presented by sliding down from the text field and when clicking on the list gets dismissed by sliding up. The slide animations are done using jQuery.
On click of any of the <li> elements the value gets set in the field. A click anywhere else just dismisses the list.
But now when the list gets presented over a button and when I click on the list, it considers this as a click on the button and just dismisses the list.
How can I tell the browser to take the click on the list instead of taking the click on button when the list is presented?
The screenshot should give a fair idea: Click on all other list items works properly, but ones that's is above the button doesn't work. In the screenshot, the click on list item Miscellaneous doesn't work:
You can use event.stoppropagation.
$("#PopuListId").click(function(event){
event.stopPropagation();
// do rest of the things
});

Categories