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...
Related
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" />
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
I'm working on a dynamic form where you can add or delete fields, Here you can find the fiddle
The first button you find is Add Metric. From this the code generates:
Input Field Metric
Button Add Tag
Inside this field a user can add a tag with the button Add Tag, generated when you click add Metric. When you click Add Tag button, two fields are generated:
Input Field Id
Input Field Value
The Html code that I need to generate in order to serialize the entire form (this is not however the question point) will result like this:
<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">
Problem:
I need that (when I fill the field with id="TagId0") the value I select will go immediately to the field name with id="TagValue". This field must result like this:
Consider I write on TagId0 the word "hello", field will become:
<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">
How, if it's possible, it can be done?
Thanks
You can use the change method to detect a change in the fields value. Then use the attr method to change the name. Hope I understood correctly. Here is the modified JSFIDDLE.
$(document).on('change', '#InputsWrapper .inputID', function(){
thisVal = $(this).val();
thisName = $(this).siblings('.inputVal').attr('name');
newName = thisName.replace('[tags][', '[tags][' + thisVal);
$(this).siblings('.inputVal').attr('name', newName);
});
Don't forget to press enter after change the field value :)
Edit: I also added two classes to the fields you are appending. .inputID and .inputVal. I hope this helps!
you can write id of field something like TagId-0 and some common class like tagfield,so that u can split the value to get the index an then access it using the class
$(".tagfield").keypress(function() {
var id=parseInt($(this).attr("id").split("-"));
$(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});
When I have HTML input fields and a change them by direct input they should actually change there value attribute. But when I try to get the whole HTML record it just shows the old value attributes.
Somehow this is clear to me, couse the HTML is not overwritten, but I need the HTML containing the changed input values. How can I approach it?
Example:
$('input').addEvent('blur', function(){
alert($('adiv').get('html'));
});
<div id="adiv">Enter something in input box and press tab<div>....<input id="input" type="text" value="1">the mootools will grep the old value of 1 again....</div></div>
http://jsfiddle.net/hJtzc/1/
alerts allways:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="1">the mootools will grep the old value of 1
> again....</div>
but what I need to get is:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="[VALUE FROM USER]">the mootools will grep the old
> value of 1 again....</div>
Attribute value in HTML sets initial, default value of the element, DOM property value contains the actual, real value of the element . To change the default value of input element change defaultValue property:
$('input').addEvent('blur', function(){
this.defaultValue = this.value;
alert($('adiv').get('html'));
});
This is normal behavior that is not related to mootools framework
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.