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.
Related
I'm trying to achieve what seemed like a straightforward task. However, my lack of knowledge concerning load events is making this more difficult than expected. Hoping one of you intelligent people can help me out:
https://rauantiques.com/collections/antiques/products/silver-gilt-exhibition-tea-table-by-maison-aucoc?variant=34759888961671
I want to grab values on the page above and insert it into a form held within the "request more info" button. Below is the script I thought might help me achieve this:
<script>
window.addEventListener('load', function () {
let itemNumber = document.getElementsByClassName("text-slate")[0].children[0].innerText
let price = document.getElementsByClassName("actual-price")[0].innerText
let itemFormField = document.querySelector("input[name='customerinterests']")
let priceFormField = document.querySelector("input[name='asking_price']")
itemFormField.value = itemNumber
priceFormField.value = price
});
</script>
It seems as though the window load is not a sufficient event listener to use to pick up on the form fields. I was under the impression that even though the form wasn't actually visible on the page, I'd still have access to it given that it's held within the HTML body (is this incorrect?).
As a result, the script is not accurately picking up on the form fields. Therefore those values don't get sent along with the submission. Using the chrome developer tools, I noticed that when I had the actual form brought up in the console and I clicked on the elements I wanted to target on the form, only then did my querySelectors work, which I find strange. But then, when I'd try to target the elements I want inserted into those fields...they started to return null! So when form is brought up - I can't target elements on the page I want to insert on the form. When form is not brought up, I can't target the input elements I want to use as values on the form.
A big issue here is that I don't have access to the source code, therefore I can't test is as I would like to. All of this testing is being done through developer tools. It's on a Shopify page.
If anyone knows of a way to accomplish what I'm trying to, I'd really, really appreciate it. I also understand that my wording may be wildly unclear, so I'm more than willing to offer as much clarification as I can.
Thank you!
I have an input field with id Email and im getting the value of this field to update my object. However when i try to edit it again without a refresh and try to send it via Ajax, email field becomes empty. I get this field by using $("#Email").val() and I tried using .attr("value") as well however this gets the old value of the field not the new value.
My problem is similar to this "jQuery showing empty string on input text?" however, I can't use the solution there as I have to use the input box multiple times after updating.
However when i try to edit it again without a refresh and try to send it via Ajax, email field becomes empty.
Are you sure the page is not refreshing? The field can only become empty from either a refresh, or actual JavaScript code you have written/included that is causing the problem.
$("#Email").val() will read the value and will not blank it out.
.attr("value") will read what the value was when the page loaded, but not accounting for changes made by the user.
My problem is similar to this "jQuery showing empty string on input text?" however, I can't use the solution there as I have to use the input box multiple times after updating.
Do you understand the reason for that solution? The problem there was that the value was captured to a variable Name too early. The solution was to move the call to val() to later. (after blur took effect, not before)
I hope these are helpful, but there's really not much more I could tell you without seeing your code.
I expect this question to be closed due to lack of details. When you post the new question, please try to fix one problem at a time (either "becomes empty", or "gets old value") and post enough details for a solution. (i.e. an SSCCE)
Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?
First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.
Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.
One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".
Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!
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.
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