Develop Reference

Difficulty sending values to input fields (sounds ridiculous)

EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.

At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.

I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!

In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";

Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Selenium + PhantomJS in Python 2.7, file upload

I've been struggling with this function for a few hours now and I can't get it to work in any way shape or form.
Assume my element location and image path are correct at all times. (Seriously, I've been going over this for the past 4 hours, it's not the element location and it's not the file path.)
What I started with was a sendkeys to the input element. This gave no error but caused the script to hang for ever; it wouldn't get past it and no images were being uploaded.
I literally tried every single possible variation of the sendkeys method listed on the first 4 pages of Google when looking for "Python PhanthomJS Selenium upload file sendkeys". Back to the drawing board.
Currently I am looking into executing a bit of JavaScript through Python to upload the file, though I have no idea how to go about this.
The page which I am trying to upload to has its form set to hidden and only shows a button which opens an upload dialog on normal browsers. I feel this is why sendkeys was not working.
Can anyone give me some input or suggestions as what to try next? Or how to execute some JavaScript from Python?
EDIT:
I learned how to execute JavaScript while using selenium in python and it saved my day.
To anyone coming here from google or whatever with the same problem, let me explain what I did:
The fact that my .send_keys() was hanging when sending keys to the input[file=input] element had me wondering before I made the topic but since the webdriver was still able to find the element I wasn't thinking too much of it and shrugged it off as something random. Later however I came with a suggestion that because it had a css type display: hidden !important the webdriver might have been able to find it, but not interact with it, and for some reason selenium just decided to hang itself instead of crashing / giving an error.
With that in mind I started browsing the docs and found the .execute_script() command, turns out we can use this to run a piece of JavaScript through the webdriver. Why I wanted this, is to see if the class styling had anything to do with it at all, how you ask? Well we can use the following line of code to change the class attribute of the input[type=file] element: document.querySelector("input").className="". This is not the most elegant solution since we are basically deleting the entire class responsible for the display: hidden !important styling. If the class were to hold more important data I'd suggest changing the class instead of renaming it to "" or deleting.
Moving on and trying it out, it showed the input button just like I hoped it would! After this I simply re-tried sending the keys and found no problems at all. There is no need for a click, submit or anything. driver.find_element_by_css_selector('input[type=file]').send_keys('path/to/file') However I did note that the way you structure the path seems to be pretty important. For example I am testing on windows and path/to/file did not upload or select any image for me, using path\\to\\file however, worked completely fine.
tldr:
driver.execute_script('document.querySelector("input")').className=""
followed by:
driver.find_element_by_css_selector('input[type=file]').send_keys('path/to/file')
Is what worked for me, and if you are in any alike situation your
variation on the script should upload the image as intended.

Changing the editor in Joomla deleted my javascript, unsaved...Any way to recover?

I used No editor option and joomla and wrote javascript. The code was working perfect. To add other articles I changed editor to TinyMCE, added a table. ...All my javascript is gone, even after I revert back to No editor. Anyway, I can get previous version of article with javascript. Has about 2 days of coding and unfortunately, stupid enough, I don't have back up

No way (unfortunately) to get what was saved before and overwritten afterwards.
Two solutions (if it was made after at least one day):
A. Maybe your server was set to backup the database?
If so, you could recover it via the backups.
B. If the site was indexed by Google (and public), try to view a cached version of that page (if accessible and indexed).

I just had the same issue. To prevent javascript disappearance, just put the javascript tag into html comments. The editor do not delete it and the javascript is still seen in HTML.
<!--
<script language="javascript">
...
</script>
-->

Using document.write for fixed html

I'm creating a webform that has combos containing 100 values or so. The values are the same.
The form may have several records. So if there are 100 records there are 10,000 lines which seems pretty wrong from a "download" point of view.
The thing is: I want to keep that combo dynamic to keep the id from the database.
So I came up to the following:
.....
<script>
stupidCombo = "<option>a"+
"<option>b"+
...
"<option>99zzz"+
"</select>";
</script>
..... form here
.... for each item in huge list do paint <table><tr> etc. etc
<td>
<select name="comb-<%=id%>">
<option selected><%=obj.val%>
<script>document.write(stupidCombo);</script>
</td>
... close form, table, html etc.
I have rendered it and "look" fine. The page has decreased from 50k lines to 5k and the select is created by the javascript on the client side.
My question is.....
Is this ok?
Is there any risk involved?
I borrow this Idea after understanding who most of the javascript frameworks work, but most of them work on a <div> element rather that just to the document it self.
I'm targeting IE6 and this is a quick fix that has to be on production tomorrow morning ( so I don't want to spend too much time on this ) but I don't want to have 50,000 lines written for each request if I can help it.
Thanks

HTTP compression (mod_gzip, etc.) will compress all that nicely.
If you insist on document.write, you will have to use JavaScript to write <select> element as well, because in HTML you're not allowed to put <script> inside <select>.
Another approach is to send one copy of the control to the browser and then duplicate it with help of selectElement.cloneNode(true).

HTML produced by document.write works in same way as normal one, so there is no any technical problems with your solution. ( of course, such solution works only if javascript enabled )
By the way, for the lists with big count of options, you can look at "suggest box" component, which can replace native selectbox.

well it obviously won't work if javascript is disabled.

Google does it ("document.write") all the time (Analytics/Adsense/...), so I don't see why there would be anything wrong with it.
Your solution does look a bit odd, because the <script> tag is inside a <select> tag, so you better check in several browsers. After all, you never know what IE is going to do :)

Update.
I've done just the way I asked and it worked fine. There were no problems with the js inside ie.
But...
Once the table is rendered, the next thing the user attempt to do ( always the user does something unexpected ) was..
"Ok, the report looks fine. I'm going to copy/paste it into MS-Excel thank you."
Which is something that I don't really care. Is up to the user, but the result was: The excel spreadsheet die ( or froze which is almost the same)!!!! because the javascript engine within the excel is not as good as it is inside IE, the combos took forever to copy and actually it leave excel application unusable.
I didn't knew the copy/paste was so good from IE to Excel that it actually copied all the generated html and Excel tried to run the javascript too with terrible results.
I'll try again by leaving the raw html and see if that works better.
:(

Can you insert a form onto a page using jQuery's $.load() function?

I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?

That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.

I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.