How to maintain two values of single field in html - javascript

I have a requirement, where i need to show rounded decimal value for the fields in the page. But if user doesn't change the field's value then i need to post the original value of field instead of rounded value and my external library will be called with this posted values.
For example if a have a field 'Initial Temperature' and its value 12.892433 in database, when i populate the field in the page it will be 12.9. Now if user doesnt change this value then i need to post the actual value which is 12.892433.
Can anyone suggest me the best way to do this. I dont want to pull data from the database once i have the posted data.

You can use the data-* attribute, which is used to store custom data private to the page. For example:
<span id="span" data-val="12.892433">12.9</span>
And you can get the value with JS:
var value = $("#span").data("val");
And if you want the value on the server side you can use an input hidden, something like this:
<input type="hidden" name="value" id="value" value="12.892433">

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.

Currency format in AngularJS

I want to show the number value as currency. The number value comes from the database through MVC controller to cshtml input object with ng-model. I can show the value as currency but according to my scenario i have to change the value and save it using the same input value. How can I do that? Without the currency filter I can change the value and save it. With currency filter I cannot change the input value to save it. The filter prevents me to change the ng-model value. I can change the ng-model value without currency filter.
Can anyone help me?
The filtered and non-filtered input value picture is in the attachment and the input cshtml code is:
<input type="text" id="GiroFeb" autocomplete="off"
ng-model="moneyvalue | currency:'₺'"
ng-change="notifyChange(money.AccountNumber)" />

Collect data with PHP from dynamically created inputs

I have this code: http://jsfiddle.net/Zx8hc/9/.
It's a form where a user can add input-text dynamically, he can add and delete as many as he wants (only and the first being mandatory). And since he can add and delete the ones he likes their ID's may not be consecutive.
My question is how can I collect the data from the newly created inputs with PHP and store it in vars, each input in it's own var, independently ([input_1] > $input_1, so on). My idea was to create a for loop and go through all the elements from 0 to n, and those who contain data would be stored and those who don't wouldn't. Would that be an appropriate approach?
I am sorry that I don't have any PHP code to show but I don't even know where to start with this one, so thank you very much in advance if you can help me with this one.
I have checked your fiddle, and you have the next HTML as input element.
<input type="text">
If you want to send form data to a server, you have to wrap it in a form element. Here below is an example of a simple form
<form action="url_to_php_file.php" method="post">
<input type="text" name="age[]" />
<input type="submit" value="submit" />
</form>
Here, you see a <form> element, which you can use to pass form data to the server. It has several attributes. Here, action is the URL to where the form content should be sent to. Pick it the PHP file where the form should be handled. If it's on the same page as the display, just use # as field.
Then method-attribute is to send the form by POST data. The other option is using GET, but it's not secure because using GET will send in the form data in the URL too. While POST will wrap it in the request.
If you have a form element, it's necessary to have a button to submit the form. By submitting, you're activating the trigger to send the form to the address described in action-attribute of the form. That's the input-submit element.
Now, the data itself. Each input has to be assigned with a name-attribute. The content of it will be associated to that name when submitting the form. If you want to send in multiple data as one name field, you have to use an array, the [] in the form name.
For example, age will only hold one data-entry. While age[] can hold multiple values.
If you want to add the element, just clone the said object, only if it doesn't have id with it. If you have multiple elements with same id, you can get unpredictable results. It's advisable to keep id's unique.
And on your PHP file, read the $_POST['name'] as an array.
...... edited.
I suggest to create these new inputs with name tags. These name tags must be unique e.g. cool_input1, cool_input_2, ... OR use as array: cool_input[].
As result - you can get incoming info in php and parse received data from POST/GET.
For the first idea you don't need to know real count of the generated inputs. You just can use 'foreach element in POST' and if its name matches your pattern - this is what you need.

xpage getComponent always returns null even when variable is declared and initialized

I've seen a few articles here trying to bind computed fields but my preferred solution; getComponent is just not working for me. I'd rather not have hidden "real" fields. Here's what I have. A computed VAT Tax percentage field called VP
<xp:text escape="true" id="VP" value="#{FInvoiceDoc.VP}" style="text-align:right">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:text>
Here is one of the calculations where I set the value of this field;
XSP.getElementById("#{id:VP}").innerHTML = tmp.toFixed(2);
tmp calculates correctly, VP displays the correct expected value on the page.
Then in my querySaveDocument event, I do the following
var VP = getComponent("VP").getValue();
FInvoiceDoc.replaceItemValue("VP",VP);
and what gets stored is a Null value. I've even confirmed that the VP variable is null by doing a "Print (VP)" command after setting the VP variable then checking the log. There's got to be something I'm missing.
At page submit you don't get a computed text field's value back to server as it is read only.
You are looking for a solution where you can:
show a document's field in read mode
set new values to this field on client side with CSJS
save the value back to document's field on submit
The first two points working already with your solution.
The third point you can achieve with adding an input text field "VPdoc" which is bound to your document's field "VP" and hidden with style="display:none".
<xp:inputText
id="VPdoc"
value="#{FInvoiceDoc.VP}"
style="display:none">
<xp:this.converter>
<xp:convertNumber pattern="0.00"></xp:convertNumber>
</xp:this.converter>
</xp:inputText>
At submit copy the current value (innerHTML) from computed text field "VP" to input text field "VPdoc" using the following CSJS code in submit button:
<xp:this.script><![CDATA[
XSP.getElementById("#{id:VPdoc}").value =
XSP.getElementById("#{id:VP}").innerHTML
]]></xp:this.script>
This way the value which was set on client side to field "VP" is saved to document.
You do NOT assign a value, but replace the html- representation by some html code. With that you simply break the element and kind of "convert" it to a stupid div (sorry, don't know how to explain better)...
Never mess around with the frontend: the element is bound to an item in your document. Modify that value, and the element representing it will represent the change.
And: you do not need that lines of code in querysavedocument to save back the value... This will be done automatically, that's what binding (value property of element) is for...
Perhaps, instead of manipulating the innerHTML, you used
getComponent("VP").setValue(tmp.toFixed(2));
Would that work? You'd be setting the value of the component then, I think.....

Make array of data from $(this).serialize()

I have a product page wherein if the user clicks on edit, an overlay form window is populated to make it editable.
After the edit is completed and the user clicks submit I want to update the text() of each field of the product which was changed.
So instead of getting value of each input field and updating is there a way I can use $(this).serialize() as an array
Current solution I think of is:
var name = $("#input_name").val();
$("#name_id").innerhtml(name);
But the problem is that there are a lot of fields, and I wanted to use the power of jQuery, instead of grabbing each input field's value manually.
Check out the serializeArray method.
var array = $('#someForm').serializeArray();
Well, there's got to be some way of relating the input elements to the plain text elements (spans? divs?) you want to update. That could be by some naming convention, or by some explicit hook in the input field class names. Once you've got that convention established, it should be a pretty easy matter to iterate over the form fields and update the text.
So for example if the text areas are <span> tags whose "id" value is the name of the input field plus the suffix "_text", then you could do something like this:
$('#theFormId input:text').each(function() {
$('span#' + $(this).attr('name') + '_text').text($(this).val());
});
There are approximately one billion possible variations of course.

Categories