Making an input non-editable without disabling - javascript

I have a form which calculates a cost and sets the value of an input accordingly. For obvious reasons, I have used:
$('#totalcost').attr('disabled',true);
to prevent the user from being able to edit the cost.
However, when I do this, the PHP script I'm using to mail the form doesn't pick up the input (not just the value - it doesn't read the input at all). When the input is enabled, it works fine.
How can I prevent the user from editing the input while still having the PHP mailing the value? Or is there a better way to do this anyway?

Make it readonly, not disabled:
$("#totalcost").attr('readonly', true);
You could also do it in the original HTML, since it's not something you really want to change back and forth dynamically.
<input id="totalcost" type="text" readonly>

Use Read Only property, Though i guess it wont work in internet exploer.

Add readonly attribute, like this:
$("#totalcost").attr('readonly', true);

Add property readonly="true".
$('#totalcost').attr('readonly',true);

you can try:
$("#totalcost").prop("readonly",true);

Use read only in html itself or in script
<input type="text" name="totalcost" id="totalcost" value="" readonly>
$('#totalcost').attr("readonly", true);

Related

Is it safe to use "readonly" elements in the form of ejs template?

I would like to know if any script with readonly elements is editable through bypassing. Im practicing an ejs template where I used the below script. People suggested me not to go with this action and mentioned it might not be secure.
For instance;
<input
type="text"
id="name"
name="name"
class="form-control"
value=<%= name %>
readonly/>
the name in the value will be the default value from the database. Is it possible for any malicious actors to edit the name even if it is non-editable? or if I use disabled elements, How could I make the value posted to the database?. I would like to know If there is any work around.
Could you please advice?
Thanks.
Yes, if you send values directly from this input, user can delete the readonly part and change the value. This can lead to undesirable results.
1. You can create a short-term Session[] for the value you want to send.
2. You can call it from where that you want to post it. (So there will be no link between the input field and the value you call there. The İnput field will only be used for view. You can also delete it or change readonly to disabled if you want.
my point of view 2>1.
You need to check value on the backend/server side too. You can't know if attacker is submitting value via your form or specially crafted request.

How to get content length of invalid input?

I have an element:
<input type="number">
When I type in $500, it fails validation, so
console.log("el.value");
//returns ""
This is expected.
Here's the question:
How can I check that there is content?
I'm trying to show/hide placeholder text (no, I can't use the native stuff). It needs to be type="number" because I need to force the mobile number keyboard.
Any thoughts?
Update:
From the responses below I can see that I wasn't clear enough in my question.
1) I need to use JavaScript to tell me whether there is content in the input. (I don't need to extract it, I just need to see whether there is content).
This is tricky, because invalid content (like putting words in a number input field) means the value="" even if there is content typed in.
This is the exact problem I need to solve.
inputEl.validity.valid might work but I can't find any docs on how well it is supported across browsers.
Check if you can do something with that :
html
<input id="my-input" type="number">
js
$(document).ready(function(){
$('#my-input').on('input', function(){
console.log($(this).val());
});
});
At mobile device specially Samsung append value in field do not throw key press event,
you can validate the field with onChange="check(this)"
if (variablename==""){
//no content
}
or
if (variablename.length==0){
//no content
}
If the only reason you need to force the input type to be a number is for the number-pad, why don't you instead make type="text" and pattern="\d*"? This way you can handle and check the input any way you'd like, but still, force the number-pad to show.
<input type="text" pattern="\d*">
This was the one that actually answered it:
How to get the raw value an <input type="number"> field?
Basically you can check input.validity.valid or input.validity.badInput.
Not supported in IE but good support elsewhere.
More details on it here:
https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

Is there a way to apply the default "disabled" style on a text input without actually disabling the input?

Pretty straightforward. I want the text input to look disabled (browser's default disabled style) but without actually being disabled so I can still sell it trough post.
If you just need to send it throung post you can make the input field as hidden instead of making it look disabled
<input type="hidden" value="yourvalue">
Its not direct way to make it look disabled as disabled input field looks different in every other browser...
If you want to display data that the user can't change, and then send it to a server with a POST then include it as a hidden <input>
<input type=hidden name=myHiddenValue value="My Hidden Value">
It will appear as $_POST['myHiddenValue'] when the form is submitted.
If you need to display it too then you can include it in your HTML, just not as an <input> field.

(Javascript) Can i set "autocomplete=off" for Single Inputbox?

Inside a <form> I want to use multiple Password type fields but.. I want to make some of them not to be remembering the value of it.
Normally i can use autocomplete=off inside <form> tag.
But this affects over every single fields inside.
Edited: Got Simple Solution Now
<input autocomplete="off" ....... />
Yes, you can (set autocomplete="off" on individual inputs).
You can set autocomplete on a single field by using:
#Html.TextBoxFor(x => x.Property, new {autocomplete = "off"})
If you're using DisplayForModel than you will have to create a custom Edit Template.
You can set it on individual fields, but it's a non-standard HTMl extension and will cause your pages to fail validation: Is there a W3C valid way to disable autocomplete in a HTML form?

disable enable a textfield dynamically

Hi I was trying to make a textfield dynamic. This is my code
<input type="text" id="test1" value ="dynamic" onfocus="this.disabled=true" onblur="this.disabled=false">
<input type="text" id="test2">
so fields get disabled perfectly but doesnt get enabled on blur. If any one here can solve my problem that would be great.
Perhaps in this situation it is better to make the field readonly and add some custom class to make it look like it is disabled.
Since disabled element are well... disabled :)
EDIT
I've done some testing and it gets enabled again on blur!
http://jsfiddle.net/dfhHz/
You still need to click outside the input to trigger the blur ofcourse
EDIT2
WHat would you like to achieve. Since this functionality looks a bit strange (disable on focus and enable on blur) to me :)
Why don't you use onmouseover and onmouseout events on your text field instead ?
<input type="text" id="test1" value="dynamic" onmouseover="this.disabled=true" onmouseout="this.disabled=false">

Categories