I'm writing a program to auto fill form blanks in the web pages. With javascript I can deal with normal blanks like username input and passwd input. But when it comes to cascade select, like some web pages asking you to input your address info, there's 3 selects: choose country, choose province and choose city. The content of the second menu is loaded upon the onchange event of the first one, so as to the third select.
I'm wondering how to auto fill these 3 selects, given that I've already known the value for each one of them. Could any one help?
The following code seems not working:
document.getElementById("selProvinces").value='11';
document.getElementById("selProvinces").onchange();
document.getElementById("selCities").value='113';
document.getElementById("selCities").onchange();
document.getElementById("selDistricts").value='1190';
You might have a few problems here.
In some browsers, calling .onchange() won't actually trigger the event. See this answer to How do I programatically force an onchange event on an input? for more details.
If the page you're filling in is ajaxing in the next lot of values in the cascade, 'selCities' might not contain the value 113 just yet. You could set a timeout and poll periodically to see if 'selCities' has some values in it before setting the value
It might not actually be the onchange event that they're using for the cascading. The oldschool way used to be onclick. They might be doing it onblur. Possibly silly, but worth peeking at the source to make sure :)
Related
I have been looking for information about this but I don't get with the solution.
I have some text fields on a page which I get updated on blur making use of jQuery events.
There's no form to submit, the update took place in the background using jQuery $.post.
If a user updates those inputs, then clicks on a link to go to another section of the page and then comes back using the browser's back button, those inputs won't show the last values set by the user but the previous ones in case there were, or empty text inputs if there weren't.
Users are reporting this as a bug (even is more a browser behavior), and I wonder if there is any solution for this.
I have been taking a look at things like this or this, but they don't solve the problem I have. I have no forms, I have no submit and I don't want to reset the form.
I've noticed this problem doesn't take place in IE 9 and either in Firefox but it does on Chrome.
The user can navigate to different pages (more than 30) with more than 12 text fields in each and therefor I have discarded the idea of storing them on sessions.
Is there any way to solve it?
Thanks.
I do not know if my solution can solve you're problem , but:
what if you bind data to you're input? e.g you can set dinamically data on input
$('input').data( 'val' , $(this).val());
and then re-bind it through
$('input').val( $(this).data() ) ;
Do not follow exactly these lines of code , I'm trying to give you an idea of what I'm wondering. I hope that it can help you.
http://api.jquery.com/data/ doc for .data()
I have a column that has 2 Categories, Done and Pending. I would like to Hide/Disable edit button once the user selects an item and if that item has a Status column of "Pending".
I would like to know how can this be done, whether in visual studio 2010 or ECMA Scripts.
I know this question is old but if someone still needs the answer:
Create a custom action in visual studio like this:
https://msdn.microsoft.com/en-us/library/office/ff408060(v=office.14).aspx
This hides the button you want, now you can set a condition via enabledscript parameter to choose in which case the button should be hidden:
Just add this code after </CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="HideEditRibbon"
CommandAction="javascript:return true;" EnabledScript="javascript:checkIfNeedsToBeHidden();" />
</CommandUIHandlers>
<CustomAction Id="yourJsReference" Location="ScriptLink" ScriptSrc="yourJsFile.js"></CustomAction>
If you need this in List-Ribbon, Edit and DisplayForm, you need to make 3 Custom Actions and change the Location-Part and maybe your js-code.
If you want to use an out of the box edit form then you're not going to do this with server side code; you'd need an entirely custom edit form to do that.
This means using Javascript on the edit page, which is fragile, and doesn't prevent users from saving the data if they know what they're doing.
The input field for every column will have a 'title' attribute with the column name. JQuery can find the element with title='column name' rather easily, so that's how you'll know if you need to hide the save button. The save button isn't quite as easy to get to. You could try getting the input with type=button and value=save.
If it's important to have actual security around this, so that no matter what someone can't edit an item in this state then you can use an event receiver on the ItemUpdating event. Just check the properties of the item and use the properties.Cancel = true; (or something like that) so that even if they disable your JavaScript and save the event anyway, it won't get saved. If you need help adding an event receiver or getting it working just ask.
Edit: In your comment that you say you just want to prevent access to the edit form entirely under certain conditions. For that, I'd make a new webpart/user control and add it to the edit page. In that section you can fetch the appropriate item (the ID of the item will be a query parameter) and see if the page should be 'viewable'. If not, then you can redirect to another page.
Another addition to the above would be attempting to edit the list view such that there is no edit link for certain items. This would be substantially harder, and I doubt it would even be possible (practically) with out of the box webparts. You would need to have an entirely custom list view page in order to control which items have links to an edit page. (Others feel free to correct me here.)
Specifically what I'd like to do is "alter" one of the fields in the Google Calendar field entry for my own purposes. Namely the location is almost always going to be one of four locations, but the way the Google Calendar is set up it doesn't track frequently entered information, and writing the full address every time (or keeping a notefile w/ the 4 addresses to C&P) is kind of annoying.
Ideal I suppose would be an "extension" or script that would automagically detect that I'm filling out a Google Calendar event entry and change the location field to a drop with the four addresses I frequently use as well as an "other" option.
Another possibility might be some kind of bookmarklet (or set of 4) that fills the location field in.
I don't really know where to start or which method would be better (hell, there might well be a third option that is superior).
PS: If this would be easier/more efficiently done in Firefox or some other browser rather than Chrome that is fine as well.
I'd go with bookmarklets. Here's a potential URL for setting addresses given the current Google Calendar page (the id of the "Where" input is ":1u"):
javascript:document.getElementById(':1u').value='123 Some st.'; void(0);
I'd write bookmarks with URLs similar to the above for each of your 4 addresses and then put them into an easily accessible folder, and use them each time you want to populate that address.
UPDATE:
Since the ID changes, you can get it by the class name. However, if the class changes or the number of inputs before the Where field changes, you'll have to update your links:
javascript:document.getElementsByClassName('textinput')[1].value='123 Some st.'; void(0);
UPDATE 2:
Apparently Google doesn't consider the current value of the textbox when a Calendar item is saved. I fixed this by manually firing the 'change' event after the value of the textbox is updated. The following currently works in Firefox:
javascript:var a=document.getElementsByClassName('textinput')[1];a.value='123 Some st.';var e=document.createEvent("HTMLEvents");e.initEvent('change',true,true);a.dispatchEvent(e);void(0);
A little web design dilemma: I have a form with a lot of options, mainly radio buttons but not only.
I want the form to open up gradually, meaning at the beginning only two radio buttons are visible, and after the user picks one, more options appear under the chosen radio button. If the user then switches the pick, the page updates and shows the options under the new pick.
This happens on several levels, say 4 or 5 levels, and at the end there is a submit button that submits only certain inputs according to the branches the user chose. Also some of the branches have identical components even though the initial choice was different.
These are the options I could think of:
Build the complete form in the html body and use jquery to hide and show them according to the choices of the user. This means I have to write sections that repeat themselves twice.
Write nothing in the body, and append new elements when the user makes certain choices. This means the JavaScript is more complicated, because I have to make sure nothing appends twice.
Write an HTML skeleton of the form, and use append to fill it. Then use jquery to show and hide elements. This has none of the disadvantages but seems a bit unaesthetic.
Which one should I pick? Any better ideas?
It really comes down to your knowledge of javascript. The cleanest way would be to append to form using javascript. This way you can avoid having duplicates in your form.
If you are not that familiar with javascript and don't know how to append the form, then I would use javascript to show/hide the different parts of the form.
I think using javascript to append would be the correct way, but I don't see anything really wrong with using javascript to just hide parts of the form.
Probably going to use http://wiki.jqueryui.com/w/page/12137997/Menu
or JStree (http://www.jstree.com/) which I found out about from here http://wiki.jqueryui.com/w/page/12138128/Tree
I want to hide some form fields by default, and only reveal in groups them depending on a checkbox.
If a user shows some fields, fills them in, but then rehides them using the checkbox, will the data submit anyway if the fields have something in them or should I empty them using JavaScript?
The fields will send anyway, but your service which is receiving the post should just look for the value of that checkbox and ignore the values at that point. Either that or you will need to clear the fields.
According to the html spec a field is submitted if it meets the following criteria:
It is contained in the form being submitted
It is of type input, select, button
It contains a non-blank name attribute
If it is of <input type="checkbox" or type="radio"/> it must be checked.
Visibility is unimportant. In fact there are many reasons why something may be invisible incluiding being off-screen. Some techniques such as honeypot fields require this.
So to fully answer your question, if some form interaction demands that you only submit what is visible, you can do one of the following:
Move "visible" elements to be children of the form (prefered way) move them to another parent when not visible (after animation hides them). This should be easiest way I think especially if using jquery. Remember for animations, move hidden elements around to appropriate parents, then animate. Furthermore hidden elements can be easily manipulated with minimal performance since the browser does not attempt to re-render them until they are made visible anyways.
Clear out data (lose user input)
Clear out names of input fields, and re-create the names when they are unhidden.
The third technique is a bit much. I'd do either first or 2nd depending on your specific needs with a preference given to the first.
To keep it short and sweet, use javascript to remove the field. This is easy and quick, and you won't have to extend your server side script to determine what went through. If you want too, store the removed html into a global var, so when they toggle the option the script's back. Hope this helps!
If the form is just getting visibly hidden, yes, the data will still submit despite having hidden them. You need to empty them via JS.