Trying to access javascript elements inside a page - javascript

I hope someone can help me. I'm trying to access the text box inside a webpage so I can do some scripting, e.g. placing text in fields, checking a box and clicking submit, to automate my employees' workflow. It's confusing as heck because I cannot find the name/id/whatever that will allow me to manipulate the form. I can see the name of the field I'm trying to get at using Firebug ("history[comment]") and the id, if that helps ("history_comment") but no matter what I do, the form will not be manipulated. Based on the other scripting I've done, this Applescript:
do JavaScript "document.forms[1].history_comment.value='Testing';" in document 1
should do the job, telling the browser to put "Testing" in the appropriate field. I've substituted other names I think might be what it wants, and tried referencing any other forms (forms[2], forms[3]), all for naught. I'm actually confused a bit more because there are no statements in the HTML, so it could be I'm screwing up there.
I've posted an HTML dump of the form at http://images.jlist.com/testform.html (with dummy information of course) in case any kind soul can take a gander and give me some direction. My goal is to be able to put information into the Comment field. Is there a script I can run that will tell me the complete name (as far as the browser is concerned) of every element in the form?

if you can use jquery, then you can do it quite easily using the following command
$("history_comment").val("HELLO");

The JavaScript should be:
document.getElementById("history_comment").value='Testing';
document.forms is non-standard and, as is the case in your example code, fails if the element is not inside a form. This is fairly common in AJAX applications and another good reason to avoid document.forms.

What #Kikuchyo wrote, though it's actually strictly incorrect not to enclose form elements like textarea in a form tag. You'll also need that form tag if (as you suggest) you want to submit the form programmatically. Since you're already accessing that text box, you can get the form from that in your javascript function:
var thetext=document.getElementById('history_comment');
thetext.value='whatever you want to put in there';
thetext.form.submit(); // all form elements have a 'form' property
You can get at the checkbox state as document.getElementById('history_notify').checked; it's a Boolean value, so set it to true or false, and use it in conditionals directly.
Of course, if (as, looking at the form, you likely want to) you want an AJAX submit, you'll need to check out the documentation for whatever wrapper library you're using.

since your element is a text area, it should be done like this:
document.getElementById('history_comment').innerHTML = 'HELLO';
using innerHTML instead of value

Related

How to pass the value of console.log to django views?

I have seen so many responses but none of those correspond to my needs.
Basically I am trying to get the value of an href through JavaScript and I need to pass that to my django views, when I do a console.log this is the output that I am getting
http://localhost:8000/#vert-tabs-Personal localhost:8000:316:21
#vert-tabs-Personal localhost:8000:317:21
http://localhost:8000/#vert-tabs-Career localhost:8000:316:21
#vert-tabs-Career localhost:8000:317:21
http://localhost:8000/#vert-tabs-Finances localhost:8000:316:21
#vert-tabs-Finances
And here is the script that triggered the output so far
<script>
$(".nav-link").on('click', function(e){
console.log(e.target.href);
console.log(e.target.hash);
});
</script>
Now What is the best way to get the e.target.hash value passed to my django views.
I am thinking of jquery or ajax but honestly I don't know.
Any help would be appreciated.
Thank you in advanced...
Your question is a little vague as to what you want to achieve, but I'd say there are a couple of ways:
Via a form
presumably you have some kind of form on this page. If you just need the value in your django view when you submit the form, then include an input tag (which can be hidden, so nobody sees it), then update the value of this via Javascript as and when you need to. This value will then be received by the view as it will be part of the submitted form.
See here for setting an <input> value : How to set the value of a input hidden field through JavaScript?
Via an ajax call
You could have an endpoint to send this to, where you could just stuff it into the body of the ajax call, and this could potentially be part of the view you're working with, though usually it's better to separate these things out and have specific views to handle ajax stuff (or at least that's my experience).
Also, since you say you want this "in your view", I'd suggest option 1 is the simplest and cleanest option for you.
Add that <input> tag to your template, make it hidden, and use JS to set the value of it, and presto, you'll see it in your view when you handle the submit.

Security concerns with jquery

I am working on page, which uses a modal dialog to allow a customer to chose an item.
On this dialog, the customer can choose one item from a pre-populated list or write in their own item. Once the user clicks the OK button, the modal goes away, gets the name of the item using .val() and through jQuery's .text() function we enter whatever the item name was into a div element.
Since the customer can write in anything, do I have to be concerned about them putting in a <script></script> tag? Are there any other security things I should be concerned about in this scenario?
I am not worried about the back end as when the user finally submits this form, we have input validation on the back end. I am just concerned about the front end.
Thanks!
If you use jQuery's .text(untrustedString) method, you'll be fine. That method will escape any html or tags.
$('<div>').text("<test>")[0].innerHTML
// returns "<test>"
What you would not want to is use .html(untrustedString) method, as any script tags or other html elements in the string would get created.
$('<div>').html("<test>")[0].innerHTML
// returns "<test></test>"
Although, if this will only be shown in their own browser there isn't much security to be gained. You would only be able to attack... yourself? People already have the ability to inject whatever javascript they want into a webpage running in their own browser, should they desire.
The only time this matters to security is if my hacking script tag executed in someone elses browser, which, for instance, beams their cookie to me over the internet and I can assume their identity on your website.
So this isn't about security, it's about your app not exploding when someone enters text that may have meaning to HTML.
That said, in this case, you should definitely use text().

Read only textfield editable via inserted javascript?

I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.

Is there any danger to using input fields outside/without forms in HTML/Javascript pages?

Input fields are usually associated to forms, but I would like to use them in a simple Javascript/HTML page. I don't need the form. I see no issue with my HTML page, but is there any danger or bad practice I am not aware of? I just don't want my page to bug down the road.
(Basically, a field in my page can be Javascript enabled or disabled according to values in other fields)
The only real problem is if you want your page to function for users who have JavaScript disabled - if the inputs are actually for user input then placing them outside a form means that you'd need to use JavaScript (presumably with Ajax) to do anything with the values, whereas form fields can be submitted without JavaScript. If your page isn't intended to be submitted to the server anyway then you're dependent on JavaScript for interaction. If you've taken that into account and it doesn't matter for your scenario then go ahead.
P.S. I should've mentioned that as far as HTML standards go it is perfectly valid to have input elements that aren't in forms.
You should be fine AFAIK. It's ok in the HTML 4.01 standards anyway
http://www.w3.org/TR/html401/interact/forms.html#form-controls
The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces. This is discussed in the
section on intrinsic events. Note that controls outside a form cannot
be successful controls.
You can use an HTML validator (here, or on many other sites) to check this sort of thing. If it shows up legal, which I think it should in this case, as Ted pointed out, then you are probably good.

To kow if an element in JS is disabled in CGI

How can I get to know in CGI script if an element in the Javascript is disabled.
I have disabled dropdown values whose values doesn't get passed on Submit. I can make these values equal to 1 if I could know if they are disable.
I have already tried enabling the elements on submission and disabling again, it works but I do not want to use this method as it doesn't give a good view to use.
Further, editing my question, is there a way I can have a variable common(global/sahred) between JS and CGI?
You can not 'share' a variable between JS and CGI because they are two different environments. JS runs on the client, CGI on the server.
In order to pass information of any sort, including the enabled/disabled status of an element you could use JavaScript to add a <input type="hidden"> to the form so that the CGI script knows to output a disabled element next time it generates the form.
Rereading your question, it sounds like you are trying to get the value of a drop down which is not passed since the element is disabled? In that case you can use the same technique, read the value of the drop down with JavaScript and put that value in another hidden form element.
I dont understand completely your question, but I think I can help you. Do you know JQuery? With JQuery you could add a function to an event, let's say onChange, and then send a value with Ajax if the value was changed or if the value was disabled. I could help you if you know JQuery, I could also put some code if you dont and try to explain. But first, is this what you want to achieve:
See if an element was disabled(or set to null or 0), send it to CGI script, and then return a message or change something within the page?

Categories

Resources