How to hide the value of textbox using jquery - javascript

If the user did not give any value to text box the value 0 (zero) to be set on blur but the text box should not display the value How can i do it using jquery
<g:textField name="distance" id = "distance" value="${tripInstance?distance}" min="0" class="number" />

You can't as "value" is the display value.
Only way you be able to do it is intercept the form submission and prepopulate with default values if none are entered.
Failing that, the best place to hand it would be at the server end, ultimately where this kind of thing should happen.
That said, you should never rely on JavaScript to set/enforce default values as the user may not have JavaScript enabled or worse they are manipulating before sending it to you.
In that respect JavaScript should be considered dirty.
On second thoughts, you could do this:
<input type="hidden" name="distance" id = "disatance_default" value="0" />
<g:textField name="distance" id = "distance" value="${tripInstance?distance}" min="0" class="number" />
I think, if nothing was entered into the "textField" it wouldn't get sent back to the server, and therefore the hidden input field with the same name would take precedence.
The last most field of that name (which contains a value) will always be the one that is sent back to the server.

I dont see a reason for doing this. why do you need to set it to 0 and not display it.. if you need to do some prcessing on this value then check if this value is set or not. if it is not then select 0.

Related

Input field refresh issue

I want to change the value of 3 input text at the same time.
The strange behaviour comes when I try to change the first input field (all of them are changed), then I change the second input field, again I would expect all of them changed, yet you can see the first one won't change.
It is like only "pristine" input fields will change.
https://stackblitz.com/edit/saavz2?file=my-element.js
Change from
<input type="text" data-id=${item.id} value=${this.state[item.id].value ?? ""} #input=${this.onInput} />
to
<input type="text" data-id=${item.id} .value=${this.state[item.id].value ?? ""} #input=${this.onInput} />
See the docs for Property binding.

How to append string with name 'kg' in input type number ? Angular ngModel

I need to append 'kg' string in my ngModel type number?
How to do it?
<input (click)="singleClickForTraining(set)"
[ngClass]="{ currentExe : currentSet === set }"
[(ngModel)]="set.reps" class="input-invisible-for-sets" type="number">
Your input control is of "type" number. meaning it only accepts numeric values eg. 01234... etc.
to have your input control accept alpha-numeric(text and number) values you need to change the type to text. You should only consider doing this if 'kg' is part of the value of the input and not a description of what the value of the input is.
if the meaning or the context of your input control is a number or an entity that represents a number-value then you should always keep the type as a number and not text.
this protects you or other pieces of code and/or other developers using that field, such that they don't need to do any string manipulation to acquire/use the value of the input, considering there might be a need to sum the input in a calculation. eg. [100kg - 20kg] is incorrect and will fail.
if 'kg' is a description of the input then consider putting it in the label control to tell the user what exactly the input is for. eg. "Please enter your weight in 'kg'"... you can take this further and add a placeholder to the input
eg. <input type='number' placeholder='eg. 100kg' />"
you can even be fancy and use a :before or :after pseudo class on the input wrapper and give the content property a value of 'kg' and then style it appropriately to overlap onto the input.
this is inline with best practices from a ui/ux perspective as well as a back-end consideration.
theres many ways to put the 'kg' in there but lets create good code...
UPDATE:
I dont unserstand why you dont want to use a pseudo class, theres still many way it can be done. also have you considered using a range element.
check out this fiddle
You need to quote the string 'kg' in ngModel or it will be evaluated as another scope variable.
<input [(ngModel)]="'kg' + set.reps" type="number">
or if type="number" is not necessary then you can do something like this as well:
<input type="text" pattern="[0-9]" [(ngModel)]="'kg' + set.reps" />
Hope it helps, if not feel free to ask further questions

Input field extends after setting value?

In my app I have few forms where users can pick the value and that value will show in text input field. These values are usually one to three characters. Once I pick the value my input field extends (changed the width). Input field has enough space (size set to 10) and there is no reason to be extended. I have checked if my values are trimmed and nothing is odd with the value. I'm wondering if this is related to JQuery .val() that I use or something else? Here is example of my code.
HTML:
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
JQuery:
//Looping through the table with the records where users choose desired code/value for their input field
$('#searchTbl tbody tr').on('click', function(){
var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table
$('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated
});
I have attached image where you can see input field before and after user selects the value. There is obvious difference in field size. Nothing changed in HTML structure (I monitored in my dev tools after value is set).
If I'm correct, you're not only setting a value, but also applying a style: .css('font-weight','bold');, I suspect it's the reason you have a change of your input's width...
Try removing this call to .css() to check, and if it confirms, try applying your style once on rendering the page...

How to set prefilled input field active with Jquery/javascript?

I'm using a calculator widget where I can enter random values into an inputfield and then the widget automatically calculates when clicking the "go"-button.
Now I want to insert/prefill the value into this input field, since the value which needs to be calculated comes from a server. The issue though is, that this input field apparently only reacts on keypress. I tried to do this:
$('input[name="value"][data-type-money]').val('150.000').focus();
and
$('input[name="value"][data-type-money]').val('150.000').select();
which prefills the input field with the desired value but when I click the "go" button the calculation fails as long I dont enter the value manually into the input field. So, in the end my solution does not work.
Does anyone know how I can solve this?
If data changes frequently you can also use the setInterval function:
<input name="value" data-type-money="money">
setInterval (function(){
var moneyValue = "150.000";
$('input[name="value"][data-type-money]').val(moneyValue);
},1000);
fiddle here: http://jsfiddle.net/85pbnnu1/
or you can just do:
$(document).ready(function(){
$('input[name="value"][data-type-money]').val('150.000').change();
});
Edit, Updated
the input field is -
and reacts only on keypress, I mean when value is entered manually
If input value property cannot be changed , try replacing the element in DOM with value set at html using .replaceWith()
$('input[name="value"][data-type-money]')
.replaceWith("<input name=value data-type-money type=text value=150.00 />")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="value" data-type-money type="text" />

How to define default values for HTML form elements without populating the field?

I have a huge form with many text boxes. Not all are mandatory but I dont want it to send undefined to my backend since many are of type integer and float.I need to define default values for all of them but I don't want the users to have to delete the default values before entering theirs everytime. The default values show up if I do value="defaultVal" in the <input>...</input> tag. I tried providing placeholder="..." but still value overrides placeholder. Any suggestions to achive this?
you can set the default value as you have been, and then just clear the input field onFocus, so that the user can enter into a fresh slate
You can try this:
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />
Source code

Categories